Public
Edited
Jan 26, 2024
mutable mouse = ""
p5((s) => {
let height= 600;
let width= 400;
s.setup = function () {
s.createCanvas(width, height);
s.frameRate(1000);
s.background(0)
};
s.draw = function () {
// debug mouse coordinates
mutable mouse = `${s.mouseX}, ${s.mouseY}`;
//sun itself (yellow)
s.stroke(255,185,12);
s.fill(255,s.random(200,255),12);
s.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)
s.stroke(s.random(50,200),0,0)
s.noFill();
s.line(width*2/3, height*2/4,s.random(0,width),s.random(360,380)) //Unten Mitte
s.stroke(255,s.random(0,255),0);
s.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
s.curve(s.random(1000,3000), s.random(1000,3000),width, height/4,width , -height, width, height); //Oben Rechts
s.stroke(255,s.random(50,255),0);;
s.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
s.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
//Grey Ground
s.noStroke()
s.fill(0);
s.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)
s.fill(150)
s.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)
s.fill(255)
s.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.filter(s.BLUR, 3);
s.fill(0);
s.circle(270,205,20)
};
if (s.mouseIsPressed === true) {
s.frameRate(30); // slow down framerate
if (s.mouseX >= 0 && s.mouseX < width && s.mouseY >= 0 && s.mouseY < height) {
s.saveCanvas(`${s.frameCount}`, "png");
}
} else {
s.frameRate(60); // reset framerate
}
})
import { p5 } from '@thometnanni/p5'
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.
