p5((s) => {
let height = 600;
let width = 400;
let proxy;
s.setup = function () {
s.createCanvas(width, height);
proxy = s.createGraphics(width, height);
s.frameRate(1000);
s.background(0);
};
s.draw = function () {
// debug mouse coordinates
//mutable mouse = `${s.mouseX}, ${s.mouseY}`;
//sun itself (yellow)
proxy.stroke(255, 185, 12);
proxy.fill(255, s.random(200, 255), 12);
proxy.curve(
s.random(0, width),
s.random(0, (height * 5.5) / 8),
s.random(0, width),
s.random(0, (height * 5.2) / 8),
(width * 2) / 3,
height / 3,
73,
61
);
//sun itself (red)
proxy.stroke(s.random(50, 200), 0, 0);
proxy.noFill();
proxy.line(
(width * 2) / 3,
(height * 2) / 4,
s.random(0, width),
s.random(360, 380)
); //Unten Mitte
proxy.stroke(255, s.random(0, 255), 0);
proxy.curve(
s.random(2000, 3000),
s.random(2000, 3000),
width,
height / 4,
(width * 1) / 2,
height / 3,
s.random(2000, 3500),
s.random(400, 1000)
); //Oben Links
//s.curve(s.random(2000,3000), s.random(2000,3000),width, height/4,width , -height, width, height); //Oben Rechts
proxy.curve(
s.random(1000, 3000),
s.random(1000, 3000),
width,
height / 4,
width,
-height,
width,
height
); //Oben Rechts
proxy.stroke(255, s.random(50, 255), 0);
proxy.curve(
s.random(1500, 2500),
s.random(-400, -600),
(width * 2) / 3,
(height * 2) / 4,
width / 2,
height / 3,
s.random(2000, 4000),
s.random(0, 1000)
); //Unten Links
proxy.curve(
s.random(-1600, -1000),
s.random(-500, -150),
(width * 4) / 5,
(height * 1) / 3,
(width * 2) / 3,
(height * 2) / 4,
s.random(0, 300),
s.random(-200, -400)
); // Unten Rechts
proxy.filter(s.BLUR, 3);
//Grey Ground
proxy.noStroke();
proxy.fill(0);
proxy.arc(
s.random(0, width),
s.random((height * 5) / 8, (height * 6.5) / 8),
s.random(50, 20),
s.random(50, 20),
s.PI + s.QUARTER_PI,
s.TWO_PI
);
proxy.fill(150);
proxy.arc(
s.random(0, width),
s.random((height * 5.5) / 8, (height * 7) / 8),
s.random(50, 20),
s.random(50, 20),
s.PI + s.QUARTER_PI,
s.TWO_PI
);
proxy.fill(255);
proxy.arc(
s.random(0, width),
s.random(height, (height * 7) / 9),
s.random(50, 20),
s.random(50, 20),
s.PI + s.QUARTER_PI,
s.TWO_PI
);
s.image(proxy, 0, 0, width, height);
s.fill(0);
s.circle(270, 205, 20);
};
})
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.
