// p5.js sketch
s = function( s ) {
var unit = 100;
var bgcolor;
var checkbox;
s.setup = function() {
s.createCanvas(settings.width, settings.height);
s.unit = 100;
s.bgcolor = s.color(127, 0, 127)
s.rectMode(s.CENTER);
s.domtest();
};
s.draw = function() {
s.background(s.bgcolor);
if(!s.mouseIsPressed){
var c = s.frameCount % 255;
s.fill(0, c, c);
s.push();
s.translate(s.width/2, s.height/2);
s.rotate(s.frameCount/100);
s.rect(0, 0, unit, unit);
s.pop();
}
s.fill(127, 127, 0);
s.ellipse(s.mouseX, s.mouseY, unit, unit);
checkbox.changed(s.checkboxEvent);
};
s.domtest = function() {
checkbox = s.createCheckbox('check', false);
}
s.checkboxEvent = function() {
if (this.checked()) {
s.bgcolor = s.color(64, 127, 192)
} else {
s.bgcolor = s.color(127, 0, 127);
}
}
}
// settings for p5.js sketch
settings = ({width: 200, height: 200, id: "p5-container"})
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.
