p5.js

p5.js && ecmascript6 notation

由 别来无恙 提交于 2021-02-08 11:18:41
问题 I want use p5.js function inside a class with ECMAScript notation. How to fix this code? class Sketch { constructor(p, params) { // generate vars use in class with object if (typeof params !== 'undefined') { for (let key in params) this[key] = params[key]; } // p5.js object this.p = p; } // p5.js setup method setup() { this.p.createCanvas(); } // p5.js draw method draw() { } } sketch = new Sketch(p5,{}); Error: this.p.createCanvas is not a function 回答1: The docs say that you must instantiate

Exponential Graph Animation P5js Canvas

由 寵の児 提交于 2021-02-08 11:02:18
问题 I am trying to animate a growing exponential graph using P5js. I have successfully plotted the graph itself, but the "rulers/scales" on the sides won't work. I want the "window" to scale according to the X and Y axis, just like this example: Animation I am trying to replicate this animation I want the graph to "grow" and the rulers/scales on the sides to represent the growth, X is time and Y the multiplier (big text in the middle). As seen on the animation I linked, X and Y values move

Exponential Graph Animation P5js Canvas

由 一世执手 提交于 2021-02-08 10:59:45
问题 I am trying to animate a growing exponential graph using P5js. I have successfully plotted the graph itself, but the "rulers/scales" on the sides won't work. I want the "window" to scale according to the X and Y axis, just like this example: Animation I am trying to replicate this animation I want the graph to "grow" and the rulers/scales on the sides to represent the growth, X is time and Y the multiplier (big text in the middle). As seen on the animation I linked, X and Y values move

Trim an audio file using javascript (first 3 seconds)

由 孤街浪徒 提交于 2021-02-07 08:36:01
问题 I have a question that can i trim my audio file that is recorded via javascript. I want to trim the first 3 seconds of it can you help me please? I recorded the audio file using p5.j and merged the recorded file and a real karaoke file with AudioContext() and I have to trim it because of unpleasant sound at starting that makes merging wrong. 回答1: You will probably need to read the audio into an AudioBuffer using something like AudioContext.decodeAudioData(), plug the AudioBuffer into a

Having a problem loading setting 'WEBGL' to the createCanvas() method in P5.js

由 与世无争的帅哥 提交于 2021-02-05 08:51:40
问题 I'm trying to load a 3D model with P5.js in Angular 8. the syntax for creating a 3D canvas is createCanvas(100, 100, WEBGL); in Angular WEBGL is regarded as if it were a variable defined somewhere and throws this error. core.js:6014 ERROR Error: Uncaught (in promise): ReferenceError: WEBGL is not defined ReferenceError: WEBGL is not defined I tried modifying it like this createCanvas(100, 100, 'WEBGL'); But when doing that I get this error p5.js says: createCanvas() was expecting P2D|WEBGL

how do i make shape move relatively on another shape p5.js

由 假如想象 提交于 2021-01-29 15:35:10
问题 i want to make square shape to be able to move on rectangle shape below it relative to it rotation. please check my code here https://editor.p5js.org/saidabdul80/sketches/-Adu8HzFZ 回答1: @Said Abdulsalam I think the answer to your question is this. you should move the one object with the same vareable as the the other. eg: //rot for object 1 int rotY =0; void draw (){ // object 1 rectMode(center); popmatrix(); rotate(rotY); rect(X,Y,20,20); pushMatrix(); // object moving relative to object 1

p5js Image Array

由 拈花ヽ惹草 提交于 2021-01-29 10:28:55
问题 I would like to draw a random image to the canvas every time the mouse is clicked. let img = [] function preload(){ for (let i = 0; i < 3; i++) { img[i] = loadImage('img/img' + i + '.png') } } function setup() { createCanvas(windowWidth, windowHeight) background(200, 255,255 ) let img = random('img') } function draw() { } function mouseClicked() { image(img,200, 200, 50, 50) } <html> <head> <meta charset="UTF-8"> <script language="javascript" type="text/javascript" src="https://cdnjs

Error in oneHot: depth must be >=2, but it is 1

由 試著忘記壹切 提交于 2021-01-29 08:13:55
问题 So I was working with ml5 in js on a simple NeuralNetwork that was going to be trained by images using the p5 js lib to get the images into a array and then train them through ml5, But I ran into a major issue that I have been spending hours looking for the answer of this error but cant find it anywhere. Using Libraries p5,p5.sound,sketch,ml5 Js File let RustImage = []; function preload() { for (let i = 0; i < 5; i++) { RustImage[i] = loadImage(`RustPhotos/2020-12-08 (${i+7}).png`); } } let

Detecting bpm of audio input using javascript?

由 谁都会走 提交于 2021-01-29 07:20:13
问题 I'm trying to put together an audio input + beatdetektor example so I could calculate the BPM of a track playing through my line in ( or even microphone input ). Unfortunately, I didn't understand exactly how the "time" parameter from the "process" method is supposed to be used ( specially in that case, where I don't necessarily know when the track changes, etc ). Here is some code I put together trying to solve this puzzle using the lovely p5.js library, please let me know how I could tweak

How to create more than one canvas with p5?

由 南楼画角 提交于 2021-01-29 06:32:34
问题 I want to try some things with stereoscopy in 3 dimensions and I need 2 canvas but I find nothing. I've tried to use canvas1.background(200); function setup() { let canvas1 = createCanvas(100, 100); canvas1.position(0,0); } function draw() { //for canvas 1 background(100); rotateX(frameCount * 0.01); rotateZ(frameCount * 0.01); cone(30, 50); } function setup() { let canvas2 = createCanvas(100, 100); canvas2.position(100,0); } function draw() { //for canvas 2 background(100); rotateX
订阅 p5.js