Generator

Canvas generator

by Konstantin Cryman

HTML

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas"></canvas>
<br/>
<input id="T1" type="range" min="-1" max="1" step="0.01" value="0">
<br/>
<input id="T2" type="range" min="-1" max="1" step="0.01" value="0">
<br/>
<input id="T3" type="range" min="-1" max="1" step="0.01" value="0">
<br/>
<input id="T4" type="range" min="-1" max="1" step="0.01" value="0">

</body>
</html>

CSS

#myCanvas{
  border:1px; 
  solid #d3d3d3; 
  width: 400px;
}

input{
  display: inline-block;
}

canvas {
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
	//ctx.moveTo(0,0);

var T1 = 0;
var T2 = 0;
var T3 = 0;
var T4 = 0;

function drawPattern(){
    c.width = 100;
    c.height = 100;
    for (var y = 0; y < c.height; y++) {
      for (var x = 0; x < c.width; x++) {      
        var nx = x/c.width - 0.5, ny = y/c.height - 0.5;
        var w = Math.round( ( Math.sin( Math.tan((nx*ny)/Math.sin(T4+x*T3)) + Math.sin( Math.sin(y*x / T1) * Math.cos(y*x / T2) * T3 ) )/2+0.5 )*255);
        ctx.beginPath();
        ctx.strokeStyle = "rgb("+ w + "," + w + "," + w + ")";
        ctx.arc( x, y, 1, 0, 2*Math.PI );
      ctx.stroke();
      }
    }
}
drawPattern();

document.getElementById('T1').addEventListener('input', function( event ){
		T1 = parseFloat(event.target.value);
    drawPattern();
}, false);

document.getElementById('T2').addEventListener('input', function( event ){
		T2 = parseFloat(event.target.value);
    drawPattern();
}, false);

document.getElementById('T3').addEventListener('input', function( event ){
		T3 = parseFloat(event.target.value);
    drawPattern();
}, false);

document.getElementById('T4').addEventListener('input', function( event ){
		T4 = parseFloat(event.target.value);
    drawPattern();
}, false);