p5.js | 易学教程

Slow performance, using p5 in react

阅读更多关于 Slow performance, using p5 in react

问题 I am trying to use p5 (https://p5js.org/) in a react application and the performance of some sketches is really bad (same in development as after building the app). I'm using create-react-app for the project scaffold, without any changes to the build setup. The sketches run around 50-60fps when running them directly in the browser, but when loaded into react they drops to about 1-2fps. I am connecting the sketches with react like this: // React Component to interface the sketches class

How to use React with p5.js

阅读更多关于 How to use React with p5.js

问题 I really like p5.js and react.js so i wondered how to combine these two together, and i was unable to do it so I need your help. I cant really provide you with some code samples because I have no clue how to start. So what I want to do : 1. create-react-app 2.render a canvas using p5.js (i dont need the p5.dom and p5.sound) 回答1: First thing that needs to be done is install the create-react-app tool. Once it's up and running the p5.js and the react-p5-wrapper packages can be included; assuming

How to fill text with particles using p5js

阅读更多关于 How to fill text with particles using p5js

问题 I want to fill a text with particles like this I tried to do this using p5.js but I am stuck where the particles are only appearing on the edges. Any idea to accomplish this rather than having it on the edges? Here is my attempt. Thanks a ton in advance :) SteeringDemo.html <body> <script> var font; var vehicles=[]; var x=1360; var y=400; function preload() { font=loadFont('Poppins-Medium.ttf') } function setup() { var canvasDiv = document.getElementById('canvas'); var width = canvasDiv

How to fill text with particles using p5js

阅读更多关于 How to fill text with particles using p5js

How to put p5 canvas into our div background?

阅读更多关于 How to put p5 canvas into our div background?

问题 I would like to put p5js canvas in my divisions background. How to do that? I know how to put canvas in div but don't know how to put in background. 回答1: This isn't really a P5.js question. It's more a general HTML and CSS question. I recommend googling something like html use canvas as background of div for a ton of results, including: Use <canvas> as a CSS background Set canvas element as background of a div element An html5 canvas element in the background of my page? Set HTML Canvas as

Draw lines inside the shape in p5.js

阅读更多关于 Draw lines inside the shape in p5.js

问题 js beginner and trying to make program which is change the shape of eyebrow. I just finished to make shape by mousePressed event but I want to know how to draws lines inside the shape that I made! Like the photo below, I made the shape of eyebrow by using p5.js functions (beginShape(), endShape(CLOSE)) but is it possible to draw lines inside the shape?? Any help appreciate!! <html> <head> <meta charset="UTF-8"> <script src="p5/p5/p5.min.js"></script> <script src="sketch7.js"></script> </head>

Split single line string into multiline string in JavaScript/p5.js

阅读更多关于 Split single line string into multiline string in JavaScript/p5.js

问题 I have a .csv file that I'm calling in JavaScript through a p5.js sketch. One of the fields contains sentences that range from 103 char to 328 char. My script calls the data and displays in randomly on the canvas. Because some of the sentences are very long, they aren't fitting on the canvas properly, so I'd like to split them into 2- or 3-line strings. I've read up on Template Literals and RegExp in the JavaScript documentation, but all of the examples use string variables written out as a

YOLO object identification more rapidly and consistently

阅读更多关于 YOLO object identification more rapidly and consistently

问题 Using YOLO and p5.js I am trying to identify the objects using my webcam. Even though, I gave permission to access the webcam, following are the problems. Is there any way we can improve the object identification more rapidly and consistently? Once identified the green rectangular is not sticking around consistently. I need to move slightly for object identification. I have test.mp4 video saved locally, how can we do the object identification on saved video. Following is my code: let video; /

ReferenceError: process is not defined, Error in heroku app with node and sockets.io

阅读更多关于 ReferenceError: process is not defined, Error in heroku app with node and sockets.io

问题 Just deployed an app (https://socket-draw-app.herokuapp.com/) on Heroku but am getting this error: ReferenceError: process is not defined. in a javascript file: sketch.js. I am using the p5.js library. Code below (firstly the sketch.js and then my server.js node file) : var socket; function setup() { createCanvas(400, 400); background(0); socket = io.connect(process.env.PORT || 3000); socket.on('mouse', function(data) { console.log("Got: " + data.x + " " + data.y); fill(0,0,255); noStroke();

Image array p5.js

阅读更多关于 Image array p5.js

问题 I've created some nested arrays to display array of Images, one thing I cant get right it repeats the same image instead of drawing a new one in every loop. here is my example code simulates my problem var images = []; function preload() { for (var i = 0; i< 3; i++) { images[i] = loadImage("img/img" + i + ".jpg"); } } function setup() { createCanvas(900, 900); background(0); preload(); } function draw() { //image(images[0],0,0); for ( var y= 0; y < height; y=y+300) { for ( var x =0; x < width