oscillation sandbox

🔗 » VIEW ONLINE

explore oscillations in p5.js and beyond!
expanding on visualizations by: Jérôme Mercier
cc teddavis.org 2021 / gitHub repo

usage

x is analogous to frameCount (grows +1).
algos applied to y in each sketch,
are normalized (0, 1), ie. .5 is height/2.
hover sketch to loop. click to reset.
select algos to edit / copy + paste

applying

shape

// shape example for p5.js
let w = width, h = height;
let xpos = frameCount % w;
let x = xpos*.2
let y = sin(x*.1)*.4
let xshape = w/2 + cos(x*.1)*w/2;
ellipse(xshape, h/2 + y*h, 50);

wave

// wave example for p5.js
let w = width, h = height;
let xpos = frameCount % w;
let x = xpos*.2; // adjust speed
let y = _insert_algo_;
ellipse(xpos, h/2 + y*h, 50);

math

p5.js math reference:
abs() ceil() constrain() dist() exp() floor() lerp() log() mag() map() max() min() norm() pow() round() sq() sqrt() fract() noise() random() acos() asin() atan() atan2() cos() sin() tan() degrees() radians()

contribute

add new algos directly from oscillation-sandbox / issue.