Motion, Design, Art & Code
Published
Edited
Mar 22, 2019
function oscillate(sketch) {
// our variable to return
var val = sketch.sin(sketch.frameCount*0.05)*300;
return val;
}
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(640, 420);
sketch.background(255);
sketch.noStroke();
};
sketch.draw = function() {
sketch.background(33);
// We use our oscillate function to change
// the size of our cross shape over time.
var crossSize = oscillate(sketch);
sketch.fill(200, 255, 0);
cross(320, 210, crossSize, 0, sketch);
};
})
function myOsc(sketch, freq, amp) {
// sinus
var val = sketch.sin(sketch.frameCount*freq)*amp;
return val;
}
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(640, 420);
sketch.background(255);
sketch.noStroke();
};
sketch.draw = function() {
sketch.background(33);
// Now, when we call our function, we can give it
// values that will be passed into our function as
// the parameters for freq & amp
var crossSize = myOsc(sketch, 0.05, 250);
sketch.fill(255, 0, 0);
cross(200, 210, crossSize, 0, sketch);
//This means we can use the same function
// but with different values.
var crossSize2 = myOsc(sketch, 0.015, 350);
sketch.fill(0, 0, 255);
cross(440, 210, crossSize2, 0, sketch);
};
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
