Wednesday, March 19, 2014

 Psychedelic Flames

Copy and paste the code into a text editor then modify









 http://thecodeplayer.com/walkthrough/html5-canvas-experiment-a-cool-flame-fire-effect-using-particles





<html>
<head>
<style>
/*Some styles*/
* {margin: 0; padding: 0;}
#canvas {display: block;}
</style>
<head></head>
<body>
<!-- Lets make a cool flame effect -->
<canvas id="canvas"></canvas>
<script>
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
   
    //Make the canvas occupy the full page
    var W = window.innerWidth, H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
   
    var particles = [];
    var mouse = {};
   
    //Lets create some particles now
    var particle_count = 100;
    for(var i = 0; i < particle_count; i++)
    {
        particles.push(new particle());
    }
   
    //finally some mouse tracking
    canvas.addEventListener('mousemove', track_mouse, false);
   
    function track_mouse(e)
    {
        //since the canvas = full page the position of the mouse
        //relative to the document will suffice
        mouse.x = e.pageX;
        mouse.y = e.pageY;
    }
   
    function particle()
    {
        //speed, life, location, life, colors
        //speed.x range = -2.5 to 2.5
        //speed.y range = -15 to -5 to make it move upwards
        //lets change the Y speed to make it look like a flame
        this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};
        //location = mouse coordinates
        //Now the flame follows the mouse coordinates
        if(mouse.x && mouse.y)
        {
            this.location = {x: mouse.x, y: mouse.y};
        }
        else
        {
            this.location = {x: W/2, y: H/2};
        }
        //radius range = 10-30
        this.radius = 10+Math.random()*20;
        //life range = 20-30
        this.life = 20+Math.random()*10;
        this.remaining_life = this.life;
        //colors
        this.r = Math.round(Math.random()*255);
        this.g = Math.round(Math.random()*255);
        this.b = Math.round(Math.random()*255);
    }
   
    function draw()
    {
        //Painting the canvas black
        //Time for lighting magic
        //particles are painted with "lighter"
        //In the next frame the background is painted normally without blending to the
        //previous frame
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, W, H);
        ctx.globalCompositeOperation = "lighter";
       
        for(var i = 0; i < particles.length; i++)
        {
            var p = particles[i];
            ctx.beginPath();
            //changing opacity according to the life.
            //opacity goes to 0 at the end of life of a particle
            p.opacity = Math.round(p.remaining_life/p.life*100)/100
            //a gradient instead of white fill
            var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
            gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
            gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
            gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
            ctx.fillStyle = gradient;
            ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
            ctx.fill();
           
            //lets move the particles
            p.remaining_life--;
            p.radius--;
            p.location.x += p.speed.x;
            p.location.y += p.speed.y;
           
            //regenerate particles
            if(p.remaining_life < 0 || p.radius < 0)
            {
                //a brand new particle replacing the dead one
                particles[i] = new particle();
            }
        }
    }
   
    setInterval(draw, 33);
}


</script>
</body>
</html>

Matrix Sample



Copy and paste this code into a text editor










 http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript

<html>
<head>

<style>

/*basic reset*/
* {margin: 0; padding: 0;}
/*adding a black bg to the body to make things clearer*/
body {background: blue;}
canvas {display: block;}

</style>


</head>
<body>
<canvas id="c"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
//converting the string into an array of single characters
chinese = chinese.split("");

var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
    drops[x] = 1;

//drawing the characters
function draw()
{
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
   
    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chinese character to print
        var text = chinese[Math.floor(Math.random()*chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);
       
        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;
       
        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);
</script>
</body>
</html>