From 81dfa77d7540c12ec44e10abb01be63c2af70899 Mon Sep 17 00:00:00 2001 From: Ayush kumar <67006255+Ayush7614@users.noreply.github.com> Date: Mon, 4 Oct 2021 00:47:42 +0530 Subject: [PATCH] added Particle brush --- Particle Brush/Particle.js | 57 +++++++++++++++++ Particle Brush/README.md | 42 ++++++++++++ Particle Brush/index.html | 64 +++++++++++++++++++ Particle Brush/index.js | 128 +++++++++++++++++++++++++++++++++++++ 4 files changed, 291 insertions(+) create mode 100644 Particle Brush/Particle.js create mode 100644 Particle Brush/README.md create mode 100644 Particle Brush/index.html create mode 100644 Particle Brush/index.js diff --git a/Particle Brush/Particle.js b/Particle Brush/Particle.js new file mode 100644 index 0000000..f6be4c5 --- /dev/null +++ b/Particle Brush/Particle.js @@ -0,0 +1,57 @@ +/** + * @class Particle + * @author + */ + 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(); + } + } \ No newline at end of file diff --git a/Particle Brush/README.md b/Particle Brush/README.md new file mode 100644 index 0000000..bfaf2a6 --- /dev/null +++ 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/) +* ayushknj3@gmail.com + +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 +``` +## web stack +- HTML +- CSS +- JS + +* Open the repo in your local machine and open the `index.html` to run the app in your browser.

+ diff --git a/Particle Brush/index.html b/Particle Brush/index.html new file mode 100644 index 0000000..95e7e48 --- /dev/null +++ b/Particle Brush/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + ParticleBrush | Ayush Kumar + + + + + + + + + + + + + + source-code + + + + + + + \ No newline at end of file diff --git a/Particle Brush/index.js b/Particle Brush/index.js new file mode 100644 index 0000000..bffe637 --- /dev/null +++ b/Particle Brush/index.js @@ -0,0 +1,128 @@ +/** + * ParticleBrush By Ayush Kumar + * @author + */ + + 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(); + + + + } \ No newline at end of file