Canvas Color Smoke

Developer
Jack Rugile
Size
3,446 Kb
Views
42,504
  1. Canvas Color Smoke Previews
  2. Canvas Color Smoke HTML Codes
  3. Canvas Color Smoke CSS Codes
  4. Canvas Color Smoke JS Codes

How do I make an canvas color smoke?

What is a canvas color smoke? How do you make a canvas color smoke? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.

Canvas Color Smoke Previews
IQ Test

Canvas Color Smoke - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Color Smoke</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%;
}
canvas { background: #000; display: block; height: 100%; width: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="c"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Canvas Color Smoke - Script Codes CSS Codes

html, body { height: 100%;
}
canvas { background: #000; display: block; height: 100%; width: 100%;
}

Canvas Color Smoke - Script Codes JS Codes

(function() { var Blip, blips, c, ch, clear, ctx, cw, divider, globalTick, initialBlips, pi2, rand, run; c = document.getElementById('c'); ctx = c.getContext('2d'); divider = 4; cw = c.width = window.innerWidth / divider; ch = c.height = window.innerHeight / divider; pi2 = Math.PI * 2; blips = []; initialBlips = 30; globalTick = 0; rand = function(min, max) { return Math.floor((Math.random() * (max - min + 1)) + min); }; Blip = function(x, y) { this.x = x; this.y = y; this.r = .1; this.rGrowthBase = 1; this.rGrowth = this.rGrowthBase; this.rMax = (cw + ch) / 7; return this.alpha = 1; }; Blip.prototype.update = function(i) { var percent; percent = (this.rMax - this.r) / this.rMax; this.rGrowth = .1 + this.rGrowthBase * percent; this.r += this.rGrowth; this.alpha = percent; if (this.r > this.rMax) { return blips.splice(i, 1); } }; Blip.prototype.render = function(i) { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, pi2, false); ctx.fillStyle = 'hsla(' + rand(globalTick - 80, globalTick + 80) + ', 50%, 1%, ' + this.alpha + ')'; return ctx.fill(); }; clear = function() { ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = 'hsla(0, 0%, 0%, .05)'; ctx.fillRect(0, 0, cw, ch); return ctx.globalCompositeOperation = 'lighter'; }; run = function() { var i; window.requestAnimationFrame(run, c); clear(); i = blips.length; while (i--) { blips[i].update(i); } i = blips.length; while (i--) { blips[i].render(i); } blips.push(new Blip(rand(0, cw), rand(0, ch))); return globalTick++; }; $(window).on('resize', function() { cw = c.width = window.innerWidth / divider; return ch = c.height = window.innerHeight / divider; }); window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { return window.setTimeout(function() { return callback(+new Date()); }, 1000 / 60); }); run();
}).call(this);
Canvas Color Smoke - Script Codes
Canvas Color Smoke - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded August 11, 2022
Rating 4.5
Size 3,446 Kb
Views 42,504
Do you need developer help for Canvas Color Smoke?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jack Rugile (jackrugile) Script Codes
Name
Abstract Canvas Visualization
Canvas Parallax Skyline
Canvas Orbital Trails
Canvas Parallax Mountains
Canvas Swarming Bugs
Canvas Radar
Bubble Sketch.js Test
Canvas Fireworks
In View Detector
Scroll Progress as Canvas to Favicon
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!