Creative Technologist, Data Scientist, Generative Artist (generatecoll)
viewof form = Inputs.form({
width: Inputs.range([0, 1000], { label: "Width", step: 1, value: 1000 }),
height: Inputs.range([4, 1000], { label: "Height", step: 1, value: 1000 }),
})
p5((s) => {
let system, x, y, xdir, ydir, vari;
// Color
let clr = 0;
let bg = getColor();
let c1 = s.color(getColor());
let c2 = s.color(getColor());
s.setup = function () {
s.createCanvas(W, H);
s.noStroke();
s.background(bg);
xdir = 1;
ydir = 1;
vari = s.random(1);
};
s.draw = function () {
for (let n = 0; n < 20; n++) {
for (let i = 0; i < pnts.length; i++) {
s.fill(pnts[i].clr);
drawPencil(pnts[i].x, pnts[i].y, 100);
pnts[i].x += pnts[i].xdir + s.random(-1, 1);
pnts[i].y += pnts[i].ydir + s.random(-1, 1);
// Checks color
if (s.random(1) < 0.001) {
pnts[i].clr = getColor();
}
// Randomly changes direction
pnts[i].xdir =
s.random(1) < vari ? (pnts[i].xdir == -1 ? 1 : -1) : pnts[i].xdir;
pnts[i].ydir =
s.random(1) < vari ? (pnts[i].ydir == -1 ? 1 : -1) : pnts[i].ydir;
// Checks to see if it bumped a wayy
if (pnts[i].x > W || pnts[i].x < 0) {
pnts[i].xdir = pnts[i].xdir == -1 ? 1 : -1;
}
if (pnts[i].y > H || pnts[i].y < 0) {
pnts[i].ydir = pnts[i].ydir == -1 ? 1 : -1;
}
}
}
};
const drawPencil = (x, y, r) => {
let cx, cy;
s.push();
s.translate(x, y);
for (let i = 0; i < 10; i++) {
cx = 10 * s.sin(s.random());
cy = 10 * s.cos(s.random());
s.ellipse(cx, cy, 1, 1);
}
s.pop();
};
})
pnts = {
let arr = [];
for (let i = 0; i < 100; i++) {
arr[i] = {
x: Math.random() * W,
y: Math.random() * H,
clr: getColor(),
xdir: Math.random() < 0.5 ? 1 : -1,
ydir: Math.random() < 0.5 ? 1 : -1
};
}
return arr;
}
W = form.width
H = form.height
import { p5 } from "@tmcw/p5"
import { try_it } from "@observablehq/notes"
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.
