Skip to content

Instantly share code, notes, and snippets.

@kodi

kodi/Experiment 001.js

Last active August 29, 2015 14:22
Show Gist options
  • Save kodi/c6e00981c364f22632a0 to your computer and use it in GitHub Desktop.
Save kodi/c6e00981c364f22632a0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kodi renamed this gist Jun 4, 2015. 1 changed file with 0 additions and 0 deletions.
    0 Experiment 001 - JS Code → Experiment 001.js
    View file
    File renamed without changes.
  2. kodi renamed this gist Jun 3, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.js → Experiment 001 - JS Code
    View file
    File renamed without changes.
  3. kodi created this gist Jun 2, 2015.
    36 changes: 36 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var circleStroke = function(radius, x, y, strokeColor) {
    ctx.strokeStyle = strokeColor;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.stroke();
    ctx.closePath();
    };

    var width = 700;
    var height = 700;
    var center = {x: width/2, y: height/2};
    var mainRadius = 200;
    var counter = 0;
    var nP = 100;

    function draw(){
    ctx.clearRect(0, 0, width, height);
    var c = 5 + (nP* Math.abs(Math.sin(counter)));
    for (var i = 0; i < c; i++){
    for(var j = 1; j<=3.4; j += 0.01) {
    var x = mainRadius * Math.sin(i + j);
    var y = mainRadius * Math.cos(i + j);
    var cB = parseInt((255 / j) * (i/nP));
    var color = 'rgba(30, 30, ' + cB + ', 0.2)';
    circleStroke(c/j, ((x/j) + center.x), ((y/j) + center.y), color);
    }
    }

    counter+=0.01;
    window.requestAnimationFrame(draw);
    }

    window.requestAnimationFrame(draw);