Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Plasma effect in javascript using canvas
(function() {
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
res = 48,
rad = Math.PI / 180,
aa = ab = ac = ad = 0,
cr = cg = cb = 128, // COLOR
a = seed(6),
HALF_WIDTH = Math.ceil(SCREEN_WIDTH / res),
HALF_HEIGHT = Math.ceil(SCREEN_HEIGHT / res);
init();
function init() {
canvas.height = SCREEN_HEIGHT;
canvas.width = SCREEN_WIDTH;
plasma();
}
function plasma() {
for(var x = 0; x < res; x++) {
aa += 0.0005 * Math.cos(rad * x * a[0]);
ac += 0.0010 * Math.sin(rad * (res - x) * a[2]);
for(var y = 0; y < res; y++) {
ab += 0.001 * Math.cos(rad * y * a[1]);
ad += 0.001 * Math.sin(rad * (res - y) * a[3]);
var h = x * 8 * Math.sin(rad * (aa + ab) * a[4]),
j = y * 8 * Math.cos(rad * (ac + ad) * a[5]),
k = (x * a[0] + y * a[1]) * 32 * Math.sin(rad * ((res - x) * h + (y - res) * h) * a[2] / 720),
l = (res * a[3] - x * a[3] + (res * a[4] - y * a[4])) * 32 * Math.sin(rad * (x * h + y * j) * a[5] / 720);
h = 48 * Math.cos(rad * h) + 42 * Math.cos(rad * j);
cr = 128 + Math.ceil(42 * Math.cos(rad * k) + h);
cg = 128 + Math.ceil(42 * Math.cos(rad * l) + h);
cb = Math.ceil((cr + cg) / 2 - h * 2);
context.fillStyle = 'rgb(' + cr + ',' + cg + ',' + cb + ')';
context.fillRect(y * HALF_WIDTH, x * HALF_HEIGHT, HALF_WIDTH, HALF_HEIGHT);
}
}
setTimeout(plasma, 20);
}
function seed(count) {
var res = [];
for(var i = 0; i < count; i++) {
res[i] = Math.ceil(Math.random(0, 1) * 3 + 1);
}
return res;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment