p5.js

问题 I'm trying to make a basic 2d game with p5js and p5.play. An issue that seems to cause issues every time I try to do anything is the keyIsDown function. Is there a way to determine if a key is down before pressing it? If I used upKey = keyIsDown(UP_ARROW); upKey will show as undefined until I press the up arrow. Is there any way to assign the respective boolean values to these types of things prior to pressing them? As of now, my game will not properly work until I have pressed every involed

问题 I'm trying to draw a line that represents a 'slingshot' and I want it to have a maximum draw length. in p5 I'm drawing a line between positionA and positionB: line(posA.x, posA.y, posB.x, posB.y); posA is the mouse x and y. posB is the position of a circle on the canvas. What I want to do is limit the length of the line, so that it is never more than 40px long, but still points toward the mouse from the circle. 回答1: The Euclidean distance between 2 points is calculated by sqrt(dx*dx + dy*dy)

问题 I'm trying to make a ball bounce around the canvas using p5.js, but it seems that width , height , and random() aren't defined. Here's all my code: function setup() { createCanvas(640,480); background(240); } var dot = { x: random(width), y: random(height), size: 50, r: 255, g: 0, b: 0, speedX: 5, speedY: 5 }; function draw() { background(240); fill(dot.r, dot.g, dot.b); ellipse(dot.x, dot.y, dot.size, dot.size); if (dot.x >= 615 || dot.x <= 25) { //if the ball is out of screen horizontally

问题 Im working on a sorting visualizer using p5.js, and I need to know if its possible to slow down merge sort so it can be drawn slower. Im currently trying to use the sleep function below to slow down they merge function, but I get Uncaught TypeError: a.slice is not a function. Am I just making a silly mistake, or am I approaching the problem incorrectly? let rectWidth; let depth = 0; function setup() { let numOfRects = document.getElementById('numOfRects').value; let width = document

问题 var video; var snapshots = []; var readyCheck = false; var button; function setup() { createCanvas(800, 600); background(0); video = createCapture(VIDEO, ready); video.size(200, 150); } function ready() { readyCheck = true; console.log('work'); } function draw() { var w = 200; var h = 150; var x = 0; var y = 0; if (readyCheck) { for (var i = 0; i < 100; i++) { // use setTimeout() to wait for 2 seconds setTimeout(function() { snapshots[i] = video.get(); image(snapshots[i],x, y); x += w; if (x

问题 Given a loaded png image as a template, I want to enable a user to trace elements of the image. In p5, this is easy: setup() { // Load image var img = loadImage('...'); image(img, 0, 0); } draw() { ellipse(mouseX, mouseY, 2, 2); } However, I want to then be able to save only the ellipses (without the underlying image). Is there a way to write to an Image instead of directly down to the canvas, so that I can lift the pixels of the trace without taking the original image with it? My current

问题 I'm doing an analysis of the presidential candidates speeches. I have a data file with the following variables: > names(cl.context) [1] "id" "category" "statement" "nchar" "polarity" The statement variable is populated by sentences that each belong to one category from three. The polarity ranges from -1 to 1, reflecting whether the sentence has a positive bias, neutral, or negative bias. What I'm trying to do in p5 is to have statements displayed by category, with random x,y placement, when

问题 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 seconds. The shape moves to point C. The shape stay at point C rotating for 2 seconds. This is what I have already attempted which didn't work: var angle=0.0 var x=[20,40,60,320] var y=[50,70,90,280] function setup() { createCanvas(400, 400);

问题 The problem: I'm trying to create a simple drawing app using p5.js. Instead of the standard cursor image, I'd like to show a circle at my cursor location that represents the size of the drawing brush. Potential solution 1: Replace the cursor using the cursor() function native to p5. Why it doesn't work: The p5 cursor function only takes the following parameters: ARROW, CROSS, HAND, MOVE, TEXT, or WAIT, or path for image As such, there's no native way to replace the cursor using the ellipse

问题 I am working on a project these days. My goal is to change the color of the intersecting areas of the two squares. I have written the code which detects whenever two squares intersect but I cant figure out how to change the color of the intersecting area. Kindly help me with this. let squares = []; let dragObject = null; // variable to hold the object being dragged function setup() { createCanvas(600, 520); button1 = createButton("Alpha"); button2 = createButton("Bravo"); button3 =