diff --git a/src/art/MollySmith/icon.png b/src/art/MollySmith/icon.png new file mode 100644 index 0000000..43d1ccd Binary files /dev/null and b/src/art/MollySmith/icon.png differ diff --git a/src/art/MollySmith/index.html b/src/art/MollySmith/index.html new file mode 100644 index 0000000..19434d0 --- /dev/null +++ b/src/art/MollySmith/index.html @@ -0,0 +1,20 @@ + + + + + + + Purple Rain + + + + + +

Prince

+ + + + + \ No newline at end of file diff --git a/src/art/MollySmith/meta.json b/src/art/MollySmith/meta.json new file mode 100644 index 0000000..fe784f7 --- /dev/null +++ b/src/art/MollySmith/meta.json @@ -0,0 +1,5 @@ +{ + "art_name": "PurpleRain", + "author_name": "Molly", + "author_github_url": "https://github.com/mollyollyoxenfree" +} \ No newline at end of file diff --git a/src/art/MollySmith/script.js b/src/art/MollySmith/script.js new file mode 100644 index 0000000..f947036 --- /dev/null +++ b/src/art/MollySmith/script.js @@ -0,0 +1,46 @@ +const canvas = document.getElementById("canvas1"); +const ctx = canvas.getContext("2d"); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +class Particle { + constructor(x, y) { + this.x = x; + this.y = y; + this.size = 2; + this.weight = 2; + this.directionX = -2; + } + update() { + if (this.y > canvas.height) { + this.y = 0 - this.size; + this.weight = 2; + this.x = Math.random() * canvas.width * 1.4; + } + this.weight += 0.06; + this.y += this.weight; + this.x += this.directionX; + } + draw() { + ctx.fillStyle = "purple"; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.closePath(); + ctx.fill(); + } +} + +const particle1 = new Particle(400, 800); +const particle2 = new Particle(200, 400); + +function animateRain() { + ctx.fillStyle = 'rgba(255, 255, 255, 0.01)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + particle1.update(); + particle1.draw(); + particle2.update(); + particle2.draw(); + requestAnimationFrame(animateRain); +} + +animateRain(); \ No newline at end of file diff --git a/src/art/MollySmith/style.css b/src/art/MollySmith/style.css new file mode 100644 index 0000000..a3c456b --- /dev/null +++ b/src/art/MollySmith/style.css @@ -0,0 +1,31 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +#canvas1 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +#title1 { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + line-height: 110px; + white-space: nowrap; +} + +#title1::before { + content: "Purple Rain"; + position: absolute; + bottom: -70px; + font-size: 40px; + text-align: center; + width: 100%; +} \ No newline at end of file