Sunshine
Click the shivering application icon to start the animation.
function setup() {
createCanvas(windowWidth, windowHeight)
}
var windowResized = setup
let t = 0
let going = false
function draw() {
if (!going && mouseIsPressed) {
going = true
}
if (going) {
t += 1/20
}
let v = 0.7 * pow(0.93, max(t - 5, 0))
background(100)
rectMode(CENTER)
textAlign(CENTER, CENTER)
textSize(22)
noStroke()
translate(width/2, height/2)
push()
fill(0, 10)
for (let i = 4; i >= 0; i -= 2) {
if (i == 0) {
fill(128, 200, 255)
translate((cos(frameCount) + cos(frameCount * 3)) * (cos(frameCount / 80) ** 8) * v, (sin(frameCount) + sin(frameCount * 3)) * (sin(frameCount / 80) ** 8) * v)
}
square(0, 0, 80 + i, 5)
}
fill(255, 255, 0, 30)
let a = min(t, 15)
for (let i = 4; i >= 0; i -= 2) {
if (i == 0) fill(255, 255, 0)
circle(0, -1-a, 20 + i)
}
fill(0, 10)
for (let i = 2; i >= 0; i -= 2) {
if (i == 0) fill(220+a*3)
rect(0, 6+a, 45 + i, 17 + i, 10)
rect(-12, -1+a, 15 + i, 15 + i, 10)
rect(12, -3+a, 15 + i, 15 + i, 10)
rect(0, -6+a, 15 + i, 15 + i, 10)
}
pop()
push()
translate((sin(frameCount) + sin(frameCount * 3)) * (cos(frameCount / 80) ** 8) * v, (cos(frameCount) + cos(frameCount * 3)) * (sin(frameCount / 80) ** 8) * v)
fill(0, 10)
for (let i = 4; i >= 0; i -= 2) {
if (i == 0) fill(250, 50, 70)
circle(35, -35, min(frameCount / 10, 1) * (33 + i))
}
if (frameCount > 7) {
fill(255)
textSize(20)
text("1", 35, -33)
}
pop()
fill(255, map(t, 16, 17, 0, 255))
text("Sunshine", 0, 65)
fill(255, map(t, 19, 20, 0, 255))
text("is right around the corner", 0, 90)
fill(255, map(t, 22, 23, 0, 255))
text(":)", 0, 115)
if (!going && frameCount > 700) {
fill(255)
text("tap to start", 0, 150)
}
}(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/J6lX3id7m)
Browse more articles?
← Glitch butterfly Experiments tagged p5 (27/85) Scribble pen →
← Wall of eyes Experiments tagged interactive (8/26) Scribble pen →
← Glitch butterfly Experiments on this site (27/85) Scribble pen →