Stack Overflow
Stack Overflow

Questions tagged [p5.js]

p5.js is a JavaScript library that starts with the original goal of processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.

p5.js is a JavaScript library that starts with the original goal of processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. p5.js has a full set of drawing functionality too.

See also:

3071 questions
1
vote
1 answer

Determining whether point color was set using the blendMode()?

I have two intersecting circles drawn using blendMode(MULTIPLY). A new shape is formed as a result of the intersection. I need to determine the edge points of new shape without using math. Is there any programmable way to determine whether a…
Виталий Комаров
  • 289
  • 4
  • 16
1
vote
1 answer

'Switch iframe source' works locally but not on Github Pages site

I'm trying to use a function that switches an iframe's source link on Github Pages. It is from here. The iframe sources are p5.js sketches also hosted on Github Pages. The whole page (121templatetwo) works locally but when pushed to Github Pages,…
Lily Donaldson
  • 13
  • 1
  • 3
1
vote
1 answer

P5js. Sliding matrix of circles, can't generate or fill new row of circles in 2D array

Hi am creating a 2D array of circles, which slides down every second. Right now if the height of the circles is bigger than the sketch height, it resets the height of the circles to the top. So, i generate once a grid and i just slide it,…
user2643810
1
vote
1 answer

p5.js- Setting input type to password

fairly new programmer here. I've recently been trying to use p5.js to create a username and password form. It's worked wonderfully, at least until I needed to make the password field private (and look like a password field) I know that there is the…
ed Luebke
  • 13
  • 3
1
vote
1 answer

how to have steps of actions in p5.js

This is the pseudocode I hope to realize in p5.js: The shape keeps rotating throughout the process. The shape moves to point A. The shape stay at point A rotating for 2 seconds. The shape moves to point B. The shape stay at point B rotating for 2…
santoku
  • 3,297
  • 7
  • 48
  • 76
1
vote
1 answer

p5 sketch always below other angular components

I've built a p5 sketch in my app.component file but it seems to always be at the bottom of all other components. Right now I'm at a loss on how to fix this so my sketch is always at the top. Any help on how I can control the positioning of my sketch…
Val14720
  • 45
  • 10
1
vote
1 answer

Animation frames overwrite themselves. Why? using p5.js

I am using a video input to draw onto a canvas in order to get the color of the pixel in the very middle of the canvas. With the recent code I have the pixel color and pass it as a color value to draw a line. This line should run from left to right…
arnoldovna
  • 21
  • 2
1
vote
1 answer

P5.JS: Saving generative art (using noise()) as images on device and reuploading them on HTML

I'm working on generative art using p5.js and the noise() function. I have followed Daniel Shiffman's tutorials, but his final product always ends up being in constant generation, like an everlasting animation. On my end, I'd like to save these…
user8890965
  • 23
  • 3
1
vote
1 answer

Use input from textfield P5

In my sketch I want to type a City in a textfield and insert this Information into my API-URL: var Stadt='Berlin'; function setup() { createCanvas(500,500); textfield = createInput (); textfield.changed(newText); …
foliran
  • 75
  • 6
1
vote
1 answer

TypeError: Cannot read property 'width' of undefined

I'm trying to write a small piece of javascript (p5.js) so I can drag in an image from my desktop into the browser. Then using my mouse cursor X&Y I can distort the image. I had this code working previously by just simply loading the image, but now…
James Aspey
  • 11
  • 1
  • 1
  • 3
1
vote
1 answer

JS safe box combination dials logical issue

I am trying to create combination dial lock, which can be turned when mouseMoved, it works perfectly when I assign the value of each key equals to mouseX or mouseY's coordinate, but not working when I assign the value to plus/subtract a number from…
WWL
  • 155
  • 2
  • 9
1
vote
1 answer

Bezier and rotating

Once I call the right function, then the shape of bezier is changing with every step (the curve is becoming larger). These lines of code cause it: direction.mult(length); direction.rotate(angle); I attached a photo to present the problem more clear.…
Greg
  • 55
  • 6
1
vote
1 answer

P5 SVG imageMode

I load my mapbox-Link like this and it works: var mapimg; function preload () { mapimg = loadImage('mapbox-LINK'); } function setup() { createCanvas(1024,720); translate(width /2, height / 2); imageMode (CENTER); image(mapimg,…
foliran
  • 75
  • 6
1
vote
1 answer

Sketch won't open safe in homework game assignment

Im not sure I understood the assigment correctly. I tried to insert my code in the space designated for it, but still the sketch does not makes open the safe. not sure what to do. any suggestion is wellcome.I would like to know where Im doing it…
Mag
  • 23
  • 2
1
vote
1 answer

setup and draw with canvas tag

How can I do everything I do with the functions setup() and draw() but while using Canvas tags? Because when I try to set up a canvas while having a canvas tag present it just creates a second canvas.
Lucas
  • 11
  • 1
1 2 3
…
99 100