Nikhil Kumar bio photo

Nikhil Kumar

A stylish blog on my code

Google+ Gmail LinkedIn Github Résumé
Changelog:

Developing Random Math Art

You may have noticed the graph on the side. This is created dynamically by Javascript using random numbers and basic trig alterations of sine graphs. After a lot of googling, I was finally able to find a method. You first need to create a canvas object in your html

1
<canvas class = "sine" id="canvas" width=160 height=635></canvas>

Then create a canvas object in javascript pointing to that canvas.

1
2
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

Then you have to clear the canvas for any previous lines:

1
2
3
4
5
6
ctx.save();

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.restore();

Now, draw the sine curve. There are many option you have here. I have a randomized amplitude and frequency for every 12th number with a max amplitude of 75 and a max frequency of 1.5.

1
2
3
4
5
6
7
8
9
10
11
12
while( x<400)
{   if(Math.floor(x)%12 ==0)
    {
          amp =  Math.floor(Math.random() * 75)+.01;
        width = Math.floor(Math.random() * 1.5)+.01;
    }    
        
    
    var y=amp*Math.sin(width*x)+ 80;
    ctx.lineTo(y,x);
     x=x+.05;
}

After that, you need to generate a randomized color gradient for the graph. To do so I used createLinearGradient.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gradient=ctx.createLinearGradient(0,0,0,300);
var color1 = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
gradient.addColorStop("0",color1);
var color2 = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
gradient.addColorStop(".25",color2);
var color3 = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
var color4 = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
gradient.addColorStop(".5",color3);
gradient.addColorStop("1.0",color4);

// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=2.4;

ctx.stroke();

Finally, a button to regenerate the sine.

1
<button onclick ="getSine()" class = "btn" id = "sinbtn"> Regenerate Sine </button>