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

p5.js How to delete the last draw()

I'm not quite sure how to word this. I've been messing around with p5, and always come across this "error". function setup(){ createCanvas(400,400); } function draw(){ textSize(32); text(second(), 10, 30); } All I'm trying to do is…
N. Sainsbury
  • 137
  • 2
  • 15
1
vote
1 answer

Passing $(this) to a new P5 instance is undefined

In the code below, I'm looping through each "player_visualizer" element and attempting to create a new P5 instance for each element. If I console.log(context) in the loop I will get the context of that particular element, which is exactly what I…
Sumner Erhard
  • 63
  • 1
  • 3
1
vote
1 answer

p5 image() friendly error message in React / Webpack

I am refactoring a p5 sketch as part of a React/Redux build and am getting the following friendly error message from p5 concerning arguments passed to the p.image() function (note: I am using p5 in instance mode). p5.js says: image() was expecting…
Ryan Achten
  • 495
  • 4
  • 21
1
vote
1 answer

Import Adobe Illustrator bezier coordinates into Processing bezier() function

I'm working on a project where I can take my lettering pieces I do on illustrator with the pen tool and take the bezier point coordinates (curves and all) into processing bezier() function so I can individually manipulate the points with different…
Koysun
  • 11
  • 1
1
vote
1 answer

Random subset of array elements in JS

I'm trying to select a random set of three unique elements from an array. I'm newish to JS, and I'm constantly tripping over reference behavior that is unexpected (Python is my best language). I think that's happening here, too. This is…
DeltaG
  • 760
  • 2
  • 9
  • 28
1
vote
1 answer

2D rendering processing P5

I'm new to javascript and stumbled over this webpage: http://processingjs.org/articles/RenderingModes.html It describes how to render 2D objects in processing. If I open a new P5 project and insert the example code the code looks like this: HTML…
Gaterde
  • 779
  • 1
  • 7
  • 25
1
vote
1 answer

How to use p5.js sound library preload with Node.js (and create-react-app)

I am trying to use p5.js sound library in Node.js and the preload function simply throws an (understandable) error saying that it is not being used. How do I use the preload function in Node ? import React, { Component } from 'react'; import p5 from…
William
  • 4,422
  • 17
  • 55
  • 108
1
vote
1 answer

How to dynamically adjust the height and width of drawings in p5.js ?

I have a rectangle which depends on the windowWidth. I want the rectangle and its drawings inside to dynamically adjust its size depending on windowWidth. Here is my partial code which does a drawing. //Hardcoded date and time var date =…
alan samuel
  • 415
  • 6
  • 28
1
vote
1 answer

text on top of text gets thicker in p5js

I have the following code as part of my p5.js code: textSize(40); textAlign(LEFT, CENTER); textStyle(BOLD); strokeWeight(2); text("What does this series evaluate to?", 60, 50); when I run this it displays: I then have a function that…
Sonny Da Silva-Peters
  • 113
  • 4
1
vote
2 answers

Using p5.js, is it possible to preload some .json files that are defined in a .json file that is itself preloaded with the preload() function?

I am working on a p5.js project that loads some configuration options from a JSON file. I am preloading the config file in p5.js's preload() function, like so: let config = {}; function preload() { config = loadJSON("data/config.json"); } Part…
safetycopy
  • 554
  • 4
  • 15
1
vote
2 answers

Add 3d(2d) object on map mapbox Gl using three.js or p5.js

As I understand I have to use one canvas for both mapbox Gl and p5. But how to do this? And what if I have p5 animation will it overwrite the canvas with map? Any example or hint? Thanks. My code, but nothing serious mapboxgl.accessToken =…
SERG
  • 3,907
  • 8
  • 44
  • 89
1
vote
1 answer

Save tracking data from Leap Motion with p5.js to .csv

I need to write a script in p5.js to track the position of the five fingertips (on one or both hands) at a set interval (e.g. 20 ms), and then save the time-finger data to a .csv I have previously done this in Processing with Table and getting the…
anon
1
vote
1 answer

p5 object renders weirdly after shifting an array

In this pen, I'm having the problem that the last ball in the array does not show for a split second. I believe that's because upon shifting the array, the objects have to rerender, but I can't seem to find a solution for this fix. function draw()…
garritfra
  • 546
  • 4
  • 21
1
vote
1 answer

p5.js move objects along the trajectory of polygons

I just started to learn p5 and canvas. So sorry if it's stupid question. I've found gif online and decided to repeat this in p5.js. So I've wrote code to generate image below. var shapes = []; function setup() { createCanvas(windowWidth,…
supermishboy
  • 99
  • 11
1
vote
1 answer

how to render smothly P5.js in hdpi screen?

Computer with hdpi screen are more and more common and I own one. I'm building a webpage with a P5.js canvas inside it filling a div. I have absolutely no problem till this point, but as I have an hdpi screen the number of pixels to render is…
Simon Renault
  • 80
  • 11
1 2 3
…
99
100