Purple Rain Remix

// Variables

let y=0;

let x=0;

​

// Start

function setup() {

  createCanvas(500, 500);

​

}

​

function draw() { 

background(189,0,255);

​

if(mouseIsPressed)

background(0);

fill(189,0,255);

// Corner Star: Star verticies courtesy of P5js reference 

push();

  if(mouseIsPressed)

    fill(255, 255, 77);

noStroke();

beginShape();

vertex(x+-10, x+10);

vertex(x+0, x+35);

vertex(x+10, x+10);

vertex(x+35, x+0);

vertex(x+10, x+-8);

vertex(x+0, x+-35);

vertex(x+-10, x+-8);

vertex(x+-35, x+0);

endShape();

pop();

​

​

​

//Raindrop copy by mrbombmusic; I used this to understand how to make the raindrop shape and placement 

//link: https://editor.p5js.org/mrbombmusic/sketches/ry-NCUcab

fill(100,0,225);

noStroke();

triangle(180,y+200,200,y+140,220,y+200);

ellipse(200,205+y,40); //,600)

​

//My attempt at remaking the raindrop......um smile and wave yall

triangle(201,y+300,290,y+100,400,y+300);

ellipse(300,305+y,200,100); //,300)- I took this number out and the raindrops started moving together-I have NO idea why but thank god

​

//Title  

  textSize(35);

 if(mouseIsPressed)

   fill(255, 255, 77);

text('Purple Rain', 10, 30);

fill(153, 0, 153);

 if(mouseIsPressed)

   fill(255, 255, 77);

text('by', 10, 60);

fill(122, 18, 202);

 if(mouseIsPressed)

   fill(255, 255, 77);

text('Prince & The Revolution', 10, 90);

// Shapes falling

y=y+1;

if (y>500)

y=0;

x=x+1

if (x>500)

x=0;

}

​

// Since the song is titled Purple Rain, I wanted to incorporate the natural, dreamy elements of the song and its title so I decided my user interaction would involve turning the background to a night sky. I also wanted to stick to the simple theme of the album art and have the raindrops fall from the "sky" throughout the interaction after slightly altering their shape. Hopefully as we learn more code I can make this cover even more interactive!

​