added Particle brush

pulkit-30 · Oct 3, 2021 · 81dfa77 · 81dfa77
1 parent 7bce729
commit 81dfa77
Show file tree

Hide file tree

Showing 4 changed files with 291 additions and 0 deletions.
diff --git a/Particle Brush/Particle.js b/Particle Brush/Particle.js
@@ -0,0 +1,57 @@
+/**
+ * @class Particle
+ * @author <Ayush Kumar>
+ */
+ class Particle {
+    constructor(x, y, color) {
+      this.pos = { x: x, y: y };
+
+      let min = CONFIG.velocity;
+      let max = min*2;
+      this.vel = { x: min - Math.random() * max, y: min - Math.random() * max };
+      this.acc = { x: min - Math.random() * max, y: min - Math.random() * max };
+
+      this.health = 1;
+      this.dieRate = CONFIG.dieSpeed;
+
+      this.color = color;
+    }
+
+    applyForce(f) {
+      this.acc.x += f.x;
+      this.acc.y += f.y;
+    }
+
+    isDead() {
+      return (this.health < 0);
+    }
+
+    update() {
+      this.health -= this.dieRate;
+
+      // physics velocity += acceleration | position += velocity
+      this.vel.x += this.acc.x;
+      this.vel.y += this.acc.y;
+      this.pos.x += this.vel.x;
+      this.pos.y += this.vel.y;
+
+      // reset the acceleration
+      this.acc.x *= 0;
+      this.acc.y *= 0;
+    }
+
+    render(ctx) {
+      ctx.save();
+      ctx.globalCompositeOperation = 'lighter'
+      ctx.globalAlpha = (this.health < 0) ? 0 : this.health; // ternary
+      ctx.fillStyle = this.color;
+      ctx.fillRect(this.pos.x, this.pos.y, 1, 1);
+
+      // second trails
+      ctx.globalCompositeOperation = 'xor'
+      ctx.globalAlpha = 0.2; // ternary
+      ctx.fillStyle = this.color;
+      ctx.fillRect(this.pos.x, this.pos.y, 1, 1);
+      ctx.restore();
+    }
+  }
diff --git a/Particle Brush/README.md b/Particle Brush/README.md
@@ -0,0 +1,42 @@
+# ParticleBrush
+
+### Amazing Drawing App With Particles. 
+Lots Of Colorful Particles
+
+
+![](./assets/screenshot.png)
+
+> Click And Drag to draw
+
+> Tinker with the settings in right hand side
+
+---------
+
+## Author
+* [Ayush Kumar](https://ayush7614.github.io/ayushportfolio.github.io/)
+* [email protected]
+
+Made with :heart: and javascript by Ayush
+
+## Owner
+
+* [Ayush Kumar👨‍💻](https://github.com/Ayush7614)
+
+
+## Quick Start
+
+- Fork and Clone the repository using-
+```
+git clone https://ayush7614.github.io/ParticleBrush.github.io.git
+```
+- Create a Branch- 
+```
+git checkout -b <branch_name>
+```
+## web stack
+- HTML
+- CSS
+- JS
+
+* Open the repo in your local machine and open the `index.html` to run the app in your browser.</br> </br>
+
diff --git a/Particle Brush/index.html b/Particle Brush/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="ParticleBrush | Particle Based Drawing App | FUN TO PLAY">
+  <meta name="keywords" content="canvas,particle,javascript,canvas,html5,canvasapi,brush,drawing,particlebrush">
+  <meta name="author" content="Anurag Hazra">
+  <title>ParticleBrush | Ayush Kumar</title>
+
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    a {
+      color: white;
+    }
+
+    canvas {
+      z-index: 0;
+    }
+
+    .src-link {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      font-size: 12px;
+      color: white;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+  </style>
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-119972196-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', 'UA-119972196-1');
+  </script>
+
+</head>
+
+<body>
+
+  <canvas id="c"></canvas>
+
+  <a class="src-link" href="https://github.com/anuraghazra/ParticleBrush">source-code</a>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+  <script src="./Particle.js"></script>
+  <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/Particle Brush/index.js b/Particle Brush/index.js
@@ -0,0 +1,128 @@
+/**
+ * ParticleBrush By Ayush Kumar
+ * @author <https://Ayush7614.github.io>
+ */
+
+ const CONFIG = {
+    particleCount: 10,
+    gravityX: 0,
+    gravityY: -0.05,
+    velocity: 0.6,
+    HUE: 250,
+    dieSpeed: 0.04,
+  }
+
+  let json = {
+    "preset": "Default",
+    "closed": false,
+    "remembered": {
+      "Default": {
+        "0": {
+          particleCount: 10,
+          gravityX: 0,
+          gravityY: -0.05,
+          velocity: 0.7,
+          HUE: 250,
+          dieSpeed: 0.04,
+        }
+      },
+      "Fire": {
+        "0": {
+          particleCount: 10,
+          gravityX: 0,
+          gravityY: 0.055,
+          velocity: 0.8,
+          HUE: 40,
+        }
+      },
+    },
+    "folders": {}
+  }
+
+  window.onload = function () {
+    let canvas = document.getElementById('c');
+    let ctx = canvas.getContext('2d');
+    const WIDTH = canvas.width = window.innerWidth;
+    const HEIGHT = canvas.height = window.innerHeight;
+
+    CONFIG.saveImage = function () {
+      var link = document.createElement('a');
+      link.setAttribute('download', 'ParticleBrush_art.png');
+      link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
+      link.click();
+    }
+
+    let gui = new dat.GUI({ load: json });
+    gui.remember(CONFIG);
+    gui.add(CONFIG, 'particleCount', 0, 100, 0.01).name("Particle Count");;
+    gui.add(CONFIG, 'velocity', -1, 1, 0.01).name("Velocity");
+    gui.add(CONFIG, 'gravityX', -1, 1, 0.001);
+    gui.add(CONFIG, 'gravityY', -1, 1, 0.001);
+    gui.add(CONFIG, 'HUE', 0, 360, 1);
+    gui.add(CONFIG, 'dieSpeed', 0, 0.1, 0.001).name("Die Speed");
+    gui.add(CONFIG, 'saveImage').name("Save Artwork");
+
+    let particles = [];
+
+    let mouse = { x: 0, y: 0 }
+    canvas.addEventListener('mousemove', function (e) {
+      mouse.x = e.offsetX;
+      mouse.y = e.offsetY;
+    });
+    canvas.addEventListener('touchmove', function (e) {
+      mouse.x = e.touches[0].clientX;
+      mouse.y = e.touches[0].clientY;
+    });
+
+    let MOUSE_DOWN = false;
+    canvas.addEventListener('mousedown', function (e) {
+      MOUSE_DOWN = true;
+    })
+    canvas.addEventListener('mouseup', function (e) {
+      MOUSE_DOWN = false;
+    })
+    canvas.addEventListener('touchstart', function (e) {
+      MOUSE_DOWN = true;
+    })
+    canvas.addEventListener('touchend', function (e) {
+      MOUSE_DOWN = false;
+    })
+
+    // Animation Loop
+    function animate() {
+      const GRAVITY = { x: CONFIG.gravityX, y: CONFIG.gravityY };
+
+      ctx.save();
+      ctx.globalCompositeOperation = 'destination-atop'
+      let grd = ctx.createRadialGradient(WIDTH / 2, HEIGHT / 2, 0, WIDTH / 2, HEIGHT / 2, WIDTH);
+      grd.addColorStop(0, "rgba(20, 20, 20, 1)");
+      grd.addColorStop(1, "rgba(0, 0, 30, 1)");
+      // Fill with gradient
+      ctx.fillStyle = grd;
+      ctx.fillRect(0, 0, WIDTH, HEIGHT);
+      ctx.restore();
+
+      if (MOUSE_DOWN) {
+        for (let i = 0; i < CONFIG.particleCount; i++) {
+          particles.push(new Particle(mouse.x, mouse.y, `hsl(${Math.random() * CONFIG.HUE}, 100%, 50%)`));
+        }
+      }
+
+      for (let i = 0; i < particles.length; i++) {
+        const p = particles[i];
+        p.applyForce(GRAVITY);
+        p.update();
+        p.render(ctx);
+
+        if (p.isDead()) {
+          particles.splice(i, 1);
+        }
+      }
+
+      requestAnimationFrame(animate);
+    }
+    animate();
+
+
+
+  }