mutable mouse = ""
p5((s) => {
let height= 600;
let width= 400;
let sun
s.setup = function () {
s.createCanvas(width, height);
s.frameRate(1000);
s.background(0)
sun = s.createGraphics(width, height);
};
s.draw = function () {
// debug mouse coordinates
mutable mouse = `${s.mouseX/width}, ${s.mouseY/height}`;
//sun itself (yellow)
sun.stroke(255,185,12);
sun.fill(255,s.random(200,255),12);
sun.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)
sun.stroke(s.random(50,200),0,0)
sun.noFill();
sun.line(width*2/3, height*2/4,s.random(0,width),s.random(height*6/10,height*6.5/10)) //Unten Mitte
sun.stroke(255,s.random(0,255),0);
sun.curve(s.random(height*3,height*5), s.random(height*3,height*5),width, height/4,width*1/2 , height/3, s.random(height*3,height*6), s.random(400,1000)); //Oben Links
sun.curve(s.random(height*2,height*5), s.random(height*2,height*5),width, height/4,width , -height, width, height); //Oben Rechts
sun.stroke(255,s.random(50,255),0);;
sun.curve(s.random(height*2,height*4),s.random(-height*2/3,-height),width*2/3, height*2/4,width/2 , height/3, s.random(height*3,height*7), s.random(0,height*2)); //Unten Links
sun.curve(s.random(-height*8/3,-height*5/3),s.random(-height*5/6,-height*1/4),width*4/5, height*1/3, width*2/3, height*2/4, s.random(0,height/2), s.random(-height/3,-height*2/3)); // Unten Rechts
//Grey Ground
sun.noStroke()
sun.fill(0);
sun.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)
sun.fill(150)
sun.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)
sun.fill(255)
sun.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)
//Blurry Filter
sun.filter(s.BLUR, 2);
s.image(sun, 0, 0, width, height);
//Mid Circle
s.fill(0);
s.circle(width*2/3,height/3,20)
//Ike
s.fill(255);
s.stroke(0);
s.strokeWeight(4);
s.ellipse(width/2,height-80,100,140)
s.triangle(width/2,height-80,width/2-40,height,width/2+40,height)
s.noStroke();
s.ellipse(width/2,height-80,100,120)
//Text
s.fill(0);
s.textAlign(s.CENTER, s.CENTER);
s.textSize(width/8);
s.textFont('Courier New');
s.text("THE SUN", width/2, height - 30);
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
}
}
})
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.
