p5.js

p5.js functions not working on ajax success

牧云@^-^@ 提交于 2019-12-02 14:37:57
问题 I'm attempting to integrate a p5.js into a webpage that draws upon receipt of a successful response. I want to draw a tree based on a user entering information that becomes a certain node. I'm using Django as my backend. views.py def index(request): if request.method != 'POST': return render(request, 'index.html') else: if request.is_ajax(): parent = request.POST.get('parent') child = request.POST.get('child') try: # various cases are run through... # case 7: neither child nor parent saved to

(Intergrate P5.js and Three.js) — Create a ThreeJS scene with animations from P5.js library?

故事扮演 提交于 2019-12-02 05:13:34
问题 Before we begin, you may want to read my previous post which lead to the creation of this question: Drawing/Rendering 3D objects with epicycles and fourier transformations [Animation] Context: Using the P5.js library and following a tutorial from The Coding Train (Coding Challenge #130.1 --> #130.3) i was able to animate and recreate any parametric drawing using epicycles and fourier transforms. (Read the Previous Post, trust me, it will help) I am now looking to expand this to three

Javascript merge sort visualisation

风流意气都作罢 提交于 2019-12-02 05:01:58
I have managed to get a merge sort working in p5.js to sort different length lines but can not figure out how to actually show them being sorted. I.e show them unsorted and then update their position as they are being sorted. I'm not sure if there is an easy way to do this with the way my code is currently written or if I need to break the sorting function up and re draw it after each stage? var values = []; var numLines = 500; function setup() { createCanvas(900, 600); colorMode(HSB, height); for (i = 0; i < numLines; i++) { values[i] = (round(random(height))); } values = mergeSort(values);

(Intergrate P5.js and Three.js) — Create a ThreeJS scene with animations from P5.js library?

社会主义新天地 提交于 2019-12-01 23:29:11
Before we begin, you may want to read my previous post which lead to the creation of this question: Drawing/Rendering 3D objects with epicycles and fourier transformations [Animation] Context: Using the P5.js library and following a tutorial from The Coding Train (Coding Challenge #130.1 --> #130.3) i was able to animate and recreate any parametric drawing using epicycles and fourier transforms. (Read the Previous Post, trust me, it will help) I am now looking to expand this to three Dimensions! A helpful community member suggested breaking the 3D drawing into two planes. This way, i dont have

Timer using frameRate and frame counter reliable?

故事扮演 提交于 2019-11-28 02:25:29
I'm using p5js to program an animation with a timer countdown. I set my timer up to be updated each frame within an object that is being animated by the draw() function in sketch. Because of this, setInterval() will not work for what I'm trying to do. I thought I could use the frameRate and a frame counter to decide if a second has passed: this.updateTimer = function(){ this.framecounter++; if(this.framecounter > frameRate()){ this.framecounter = 0; //increment seconds } } Is this reliable? I tested it against an actual timer and it seems to be about 1 second ahead after about 15 seconds. Is