Motion, Design, Art & Code
Published
Edited
Mar 16, 2019
// we declare using the keyword function followed by our name for the function.
// this function has 4 parameters:
function cross (_cntX, _cntY, _size, _angle, sketch){
// this is our function definition
sketch.rectMode(sketch.CENTER);
sketch.push();
sketch.translate(_cntX, _cntY);
sketch.rotate(sketch.radians(_angle));
sketch.rect(0, 0, _size, _size/4);
sketch.rect(0, 0, _size/4, _size);
sketch.pop();
}
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(640, 420);
sketch.background(255);
sketch.noStroke();
};
sketch.draw = function() {
sketch.background(33);
// we use our function by calling it and passing in values for each argument.
// try playing with these values and observe what happens.
sketch.fill(0, 200, 255);
cross(150, 210, 250, 0, sketch);
sketch.fill(150, 255, 0);
cross(400, 210, 175, 0, sketch);
sketch.fill(255, 200, 0);
cross(550, 210, 75, sketch.frameCount * 1.5, sketch);
};
})
function myPixel (_cntX, _cntY, _size, _angle, sketch){
// this is our function definition
sketch.rectMode(sketch.CENTER);
sketch.push();
sketch.translate(_cntX, _cntY);
sketch.rotate(sketch.radians(_angle));
sketch.rect(0, 0, _size, _size);
sketch.rect(-_size, -_size, _size, _size);
sketch.rect(-_size, _size, _size, _size);
sketch.rect(_size, -_size, _size, _size);
sketch.rect(_size, _size, _size, _size);
sketch.pop();
}
p5(sketch => {
let x;
let y;
sketch.setup = function() {
sketch.createCanvas(800, 450);
sketch.background(0,0,33);
sketch.fill(255);
sketch.stroke(0);
sketch.strokeWeight(5);
sketch.rectMode(sketch.CENTER);
x = 0;
y = 0;
};
sketch.draw = function() {
sketch.translate(x, y);
// variable for animating the functions size
let theSize = sketch.sin(sketch.frameCount * 0.015) * 100;
// try attributing this variable to the function's angle parameter...
//let theAngle = sketch.sin(sketch.frameCount * 0.025) * 90;
myPixel(0, 0, theSize, 0, sketch);
x = x + 6;
if(x > sketch.width+50){
x = 0;
y = y + 150;
}
if(y>sketch.height+100){
sketch.setup();
}
};
})
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.
