Merge pull request #311 from mollyollyoxenfree/purplerain

adding my canvas art
zero-to-mastery · Aug 5, 2023 · 25a38d2 · 25a38d2
2 parents 0050695 + c58a135
commit 25a38d2
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 0 deletions.
diff --git a/src/art/MollySmith/icon.png b/src/art/MollySmith/icon.png
diff --git a/src/art/MollySmith/index.html b/src/art/MollySmith/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Purple Rain</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <canvas id="canvas1"></canvas>
+    <h1 id="title1"><img
+            src="data:image/png;base64,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"
+            alt="Prince" /></h1>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/src/art/MollySmith/meta.json b/src/art/MollySmith/meta.json
@@ -0,0 +1,5 @@
+{
+  "art_name": "PurpleRain",
+  "author_name": "Molly",
+  "author_github_url": "https://github.com/mollyollyoxenfree"
+}
diff --git a/src/art/MollySmith/script.js 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();
diff --git a/src/art/MollySmith/style.css 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%;
+}