Skip to content

Sunshine

Click the shivering application icon to start the animation.

A shivering cloud icon stop shivering as the sun comes up; text: "Sunshine is right around the corner"

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)

Experiments tagged p5 (27/85)

Experiments tagged interactive (8/26)

Experiments on this site (27/85)