Interaction Designer, Creative Technologist, Professor and Researcher
Public
Edited
Mar 2, 2021
1 fork
2 stars
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 200);
};
sketch.draw = function() {
sketch.stroke('#2299FF');
sketch.rect(30, 30, 100, 100);
};
})
p5(sketchB => {
sketchB.setup = function() {
sketchB.createCanvas(width, 200);
};
sketchB.draw = function() {
sketchB.stroke('#2299FF');
sketchB.rect(width - 120, 30, 100, 100);
};
})
function centra(wdt,canvwdt) {
return (canvwdt/2) - (wdt/2);
}
p5(sketchC => {
sketchC.setup = function() {
sketchC.createCanvas(width, 200);
};
sketchC.draw = function() {
sketchC.stroke('#2299FF');
sketchC.rect(centra(30, width), 30, 100, 100);
};
})
dadodeentrada = html`<input type=range />`
p5(sketchD => {
sketchD.setup = function() {
sketchD.createCanvas(width, 200);
};
sketchD.draw = function() {
sketchD.background(255);
sketchD.stroke('#2299FF');
sketchD.rect((width * dadodeentrada.value) / 120 + 30, 30, 100, 100);
};
})
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.
