xxxxxxxxxx
// 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!