p5((s) => {
s.setup = function () {
s.createCanvas(width, 400);
};
s.draw = function () {
s.background(255);
s.stroke(255, 0, 0);
s.ellipse(s.mouseX, s.mouseY, 20); // x,y, radius
// ignore me: i am here just to show the mouse position :)
mutable mouse = `${s.mouseX}, ${s.mouseY}`;
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 400);
s.stroke(255, 0, 0);
};
s.draw = function () {
s.background(255,255,255,50);
s.ellipse(s.mouseX, s.mouseY, 20);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 400);
};
s.draw = function () {
if (s.mouseIsPressed) {
s.stroke("blue");
} else {
s.stroke("red");
}
s.ellipse(s.mouseX, s.mouseY, 20);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 400);
};
s.draw = function () {
s.ellipse(s.mouseX, s.mouseY, 20, 20);
};
s.mouseClicked = function () {
s.stroke(s.random(0, 255), s.random(0, 255), s.random(0, 255));
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 400);
s.stroke(255, 0, 0);
};
s.draw = function () {
mutable pos = `${s.mouseX}, ${s.mouseY}`;
s.ellipse(s.mouseX, s.mouseY, s.mouseX / 5, s.mouseY / 5);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 400);
};
s.draw = function () {
s.noFill();
s.stroke(s.random(0, 255), 120, 255);
s.ellipse(s.mouseX, s.mouseY, s.mouseX / 5, s.mouseY / 5);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 400);
s.rectMode(s.CENTER)
};
s.draw = function () {
s.noFill();
s.stroke(s.random(0, 255), s.random(0, 255), s.random(0, 255));
s.rect(s.mouseX, s.mouseY, s.mouseX / 5, s.mouseY / 5);
};
})
p5((s) => {
let previousX = 0
let previousY = 0
s.setup = function () {
s.createCanvas(width, 400);
s.colorMode(s.HSL, 360, 100, 100); // Set color mode to HSL
};
s.draw = function () {
s.stroke(s.frameCount % 360, 100, 50);
s.line(previousX, previousY, s.mouseX, s.mouseY)
previousX = s.mouseX
previousY = s.mouseY
};
})
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.
