dec-the-8th

// music: instagram @luis_poeschl

// snow example: https://p5js.org/examples/simulate-snowflakes.html

​

let size = 1080;

let pos = size / 2;

​

let sound;

let amplitude;

​

let snowflakes = [];

let index = 30;

​

​

function preload() {

  sound = loadSound("Instrumental_Luis.wav");

  img = loadImage("8-masked.png");

}

​

function setup() {

  createCanvas(size, size);

  background(255);

  fill(240);

  noStroke();

  amplitude = new p5.Amplitude();

  sound.setVolume(0.4);

  sound.loop();

}

​

function draw() {

  let colorPrimary = color(11, 218, 144);

  let colorContrast = color(255, 255, 255);

  background(colorContrast);

  // draw stripes

  push();

    translate(size/2, size/2);

    stroke(colorPrimary);

​

    // draw stripes

    angleMode(DEGREES);

    rotate(135);

    strokeWeight(size/8);

    let levelAdjusted = map(amplitude.getLevel(), 0, 1, 0.05, size/100);

    let offset = size/4;

    for (let i = 0; i < 8; i++) {

      line(-size/2, pos + offset*i, size/2, pos + offset*i);

      pos = pos - levelAdjusted;

      if (pos + offset*i < -size) {

        pos = pos + offset*i;

      }

    }

    rotate(-135);

    angleMode(RADIANS);

    // mask stripes with image

    image(img, -size/2, -size/2, size, size);

  pop();

  // draw snowflakes

  let t = frameCount / 60;

  if (frameCount % 2 == 0) {

    snowflakes.push(new snowflake());

  }

  for (let flake of snowflakes) {

    flake.update(t);

    flake.display();

  }

}

​

function snowflake() {

  this.posX = 0;

  this.posY = random(-50, 0);

  this.initialangle = random(0, 2 * PI);

  this.size = random(size/100, size/50);

  this.radius = sqrt(random(pow(size / 2, 2)));

​

  this.update = function(time) {

    let w = 0.6;

    let angle = w * time + this.initialangle;

    this.posX = size / 2 + this.radius * sin(angle);

    this.posY += pow(this.size, 0.2);

​

    if (this.posY > size) {

      let index = snowflakes.indexOf(this);

      snowflakes.splice(index, 1);

    }

  };

​

  this.display = function() {

    ellipse(this.posX, this.posY, this.size);

  };

}

​