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
7
votes
1 answer

p5.js createCanvas not defined error. Uncaught ReferenceError

Problem: I am trying to use p5.js in my simple app, and including it thus: What I've tried: If I put a debugger and look in the console, I do get the functions for p5Color (for ex) and others. And the script…
Software Mechanic
  • 974
  • 2
  • 9
  • 25
7
votes
5 answers

p5.js loadFont function?

How can I change the font in p5.js? It does not recognize the Processing term "loadFont," does not carry over a font from CSS, nor does it let me put in a .vlw file or link to a GoogleFont. At least, not in any way I have tried. The references page…
Lucy
  • 71
  • 1
  • 1
  • 2
6
votes
1 answer

Uncontrollably fast p5.js sketch in 1D perlin noise

For the life of me, I cannot figure a way to get this sketch to run at a slow pace to clearly see the moving wavy pattern. It's just maddeningly fast paced. It uses 1D perlin noise. let gap = 10; let start = 0; function setup() { …
Tornado_code
  • 199
  • 8
6
votes
2 answers

How do I rotate text around an oval?

I'd like to revolve text around an oval. Some slight distortion occurs on each character however the more extreme (i.e. the less of a perfect circle) the oval becomes. Ideally this method would render text nicely on an oval of any height and width…
Danny
  • 475
  • 6
  • 19
6
votes
1 answer

How do I include a runnable p5.js sketch in a StackOverflow question?

If I have a question about a p5.js sketch, how can I include my code in the question such that people looking at the question can quickly test my code to see what I'm trying to do or what is wrong? I know I can include code using the {} toolbar…
Paul Wheeler
  • 18,988
  • 3
  • 28
  • 41
6
votes
1 answer

p5.js - how to rotate image related to the route

I've created a route from two points, set an image that follow the line animation between them. I'd like to rotate the image in the correct angle for every route. Unfortunately it seems follow the Y axis out of the line. How should I pass the…
mimelaine
  • 113
  • 5
6
votes
1 answer

Is there a way to space correctly a string of text in p5.js?

I saw many times really cool examples of kinetic typography. In these examples every letter is a particle. The text is a particle system and it may be subject to various forces such gravity or even centrifugal force. These systems are made in…
Luca Milanesio
  • 91
  • 7
6
votes
1 answer

How to generate continues Colorful Artistic Perlin Flow Field

I am trying to achieve effect as shown in the picture below: Im using p5.js library but im not a graphics programmer and thats why its very difficult to achieve this particular graphical effect. I am sharing my code with you and also I followed…
Saad Anees
  • 1,255
  • 1
  • 15
  • 32
6
votes
2 answers

P5.js in IntelliJ IDEA?

I started learning p5.js some days ago, and now I wanted to use IntelliJ IDEA instead of the p5.js online editor. Most things like the setup(), draw() and ellipse() functions work as expected, but the createCanvas() function doesn't - it is…
littlegamer757
  • 73
  • 1
  • 4
6
votes
1 answer

How to calculate intersection point of a line on a circle using p5.js

I have a line (se) that I know starts inside a circle, and I know ends outside of a circle. I'm trying to find a point l where the line crosses the circle. I'm using the p5.js library and have access to all of its Vector functions. My thoughts…
Djave
  • 8,595
  • 8
  • 70
  • 124
6
votes
1 answer

Picking up food object in radius

I'm making a Genetic Algorithm for a school project. Currently I'm building the foundation for the "dot" objects that move around and pick up food. I wrote some code that I thought should be able to do that and after some trial and error I came up…
AnotherJulia
  • 73
  • 7
6
votes
2 answers

Space-Ship movement - simulation

I have written some code to simulate a gravitation-free movement of a ship with a single thruster. Most of the time it works, and the ship reaches it's destination perfectly, but just sometimes it accelerates infinitively. But I can't figure out,…
Chris
  • 109
  • 1
  • 9
6
votes
1 answer

P5.js instance: export to SVG

A p5.js sketch is creating a plot that I would like to export as SVG. The plot is not static: it must be modified (in the demo by clicking on the circle) and then saved by pressing the Save SVG button. P5.js alas doesn't provide beginDraw() and…
Alex Poca
  • 2,406
  • 4
  • 25
  • 47
6
votes
1 answer

p5.js Graphic buffer performance vs 'normal' rendering

I'm working on an app that uses p5.js for it's front end. It's a canvas that covers the whole screen and has a bunch of different components. The app has grown to have many components that are rendered each frame, which, as you might expect, has a…
aapa320
  • 392
  • 4
  • 10
6
votes
3 answers

Firebase Javascript + P5.js: Asynchronous function getting in the way of redrawing the canvas

I'm trying to create an application where circles are drawn onto the canvas through reading information from a Firebase database that stores the x and y coordinates of the circles. Executing the code below however, simply produces nothing, without…
Adam Lee
  • 436
  • 1
  • 14
  • 49
1 2
3
…
99 100