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
4
votes
2 answers

p5js with Jekyll

I am quite new to Jekyll and I am not sure how I can go about creating a website with p5.js sketches embedded into it for a project that I am working on. I suspect it has something to do with dependencies and I would much appreciate any…
Tomáš Sláma
  • 122
  • 3
  • 8
4
votes
1 answer

In p5.js clear elements in draw() that change every frame, but leave expensive element (a map) created in setup()

Using p5.js and d3.js for mapping, I loaded a US map of specific counties in setup() on a canvas. This takes around 1/2 - 1 second to load because the shapefile is fairly large In draw(), I'm creating some text, ellipses, etc that I want to update…
Daniel F
  • 619
  • 7
  • 11
4
votes
1 answer

Populating a circle with dots, using bias towards the edge of the cirlcle

This is what I am trying to achieve So far I am happy with the code I have, borrowing from Wolfram and another source for some maths. But I can't figure out how to integrate some bias calculation, or simply a method to distribute what will be…
matski
  • 541
  • 6
  • 19
4
votes
2 answers

masking, or clipping mask with p5.js

I want to use one shape (for instance a rectangle) to act as a mask or clipping path for another shape (for instance a circle, or line) in P5.js I can see solutions for using images as masks, but not shapes. It seems mask() is not a function of…
amcc
  • 523
  • 5
  • 16
4
votes
3 answers

p5.js how to freeze canvas?

I try to do something like that : function setup() { createCanvas(500, 250); //frameRate(1); } function draw() { background(50, 50, 150); translate(10, 10); for (let i = 0; i < 30; i++) { rect(i*15, 0, 10, random(30,…
Anatole Lucet
  • 1,603
  • 3
  • 24
  • 43
4
votes
4 answers

Generate a random integer in p5.js

How can I get a random integer using the random() function in p5.js? For example this code: var num = random(0, 1); console.log(num); outputs decimal numbers to the console. How can I get a random integer?
Nil folquer covarrubias
  • 139
  • 1
  • 2
  • 7
4
votes
1 answer

Trying to get responsive window and shapes using p5.js

I'm making my way through JavaScript tutorials (using p5.js) and was interested in coding a responsive screen with four shapes that scale down and stick next to each other while doing so. Is defining a separate variable for y enough, or would it be…
Oliver Leak
  • 43
  • 1
  • 3
4
votes
3 answers

Passing in extra argument to new p5 instance

I need to pass in an additional argument when invoking a new p5 instance in instance mode. I want to be able to do this: var x = 50; var sketch = function(p5){ p5.setup = function(x){ // Canvas setup etc rect(x,40,40,40) } } new…
Modermo
  • 1,852
  • 2
  • 25
  • 46
4
votes
2 answers

Call function draw on mouse click

Is it possible to call the function draw(){} in a p5 js sketch when clicking on the canvas? I would like everything under the draw function to be called when clicking anywhere on the canvas, and not before. function setup() { createCanvas(500,…
codeneophyte
  • 57
  • 1
  • 6
4
votes
6 answers

How to change text in HTML element from p5.js?

I'm just trying out p5.js. I'd like to change some HTML text (not on the p5 canvas) from p5. Something like: score_display = createElement("text", "Score: 0"); ... score_display.nodeValue = "Score: " + score; // doesn't work How do I do…
David Matuszek
  • 1,263
  • 1
  • 16
  • 30
4
votes
1 answer

p5.js and node.js sync the position of x and y for little blobs

I'm currently making a agar.io like program for my school project using p5.js and node.js for the networking. However I'm having a problem setting all the little blobs in one locations for multiplayer mode because I wrote the program of setting the…
Rich
  • 3,928
  • 4
  • 37
  • 66
4
votes
2 answers

connected balls not working P5.js

I have been trying to make this code work for two days. I'm quite new to javaScript and P5.js, I have tried to make the same in processing with java and it has worked perfectly. Here is an image of my target. The balls however, do not connect in the…
wewelo welo
  • 99
  • 1
  • 6
4
votes
1 answer

p5.js Old frames not deleting

Using a javascript framework called p5, I'm trying to animate a circle that moves across the screen, however old frames don't delete, and this causes a line to show across the canvas. var xPos = 0; function setup() { createCanvas(400,…
Travis
  • 1,274
  • 1
  • 16
  • 33
4
votes
2 answers

Load an SVG to a P5 sketch

I've been programming in Processing some time now. I've also worked with shapes and SVG files. Having this humble experience regarding SVG files in Processing made me think that it would be the same story in P5.js, which is clearly not the case and…
Zardoz
  • 79
  • 1
  • 2
  • 11
4
votes
1 answer

Why are constants not defined when using p5.js in instance mode?

I'm probably missing something very obvious here. I can use p5.js in global mode and use constants for textAlign with no problem, e.g. CENTER. Here is global mode code where it works fine: function setup() { var canvas = createCanvas(720, 400); …
e_r
  • 794
  • 2
  • 8
  • 18
1 2 3
…
99 100