Kaleidoscope

index.jade

// click for more

Kaleidoscope.markdown

Kaleidoscope

Made at CreativeJS workshop

I will add a 'save image' function at some point

A Pen by Charlotte Dann on CodePen.

License.

script.js

var canvas,
  c; // c is the canvas 2D context
var layers = [];
var layer_count = 20;

function setup() {
  frameRate = 30;
  setupCanvas();
  makeLayers(layer_count);
}

function makeLayers(count) {
  for(var i = 0; i<count; i++) {
    var petals = randomInteger(5,12);
    var size = random(20,canvas.height*0.45);
    var color = hsla(hues[randomInteger(0, hues.length)],100,50,0.1);
    var portion = random(0.6,0.9);
    layers.push(new Layer(petals, size, color, portion));
  }
}

function draw() {
  c.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
  for(var i = 0; i< layers.length; i++) {
    var layer = layers[i];
    if (!layer.enabled) continue;
    layer.update(canvas);
    layer.draw(c);
  }
}

function onMouseDown() {
  makeLayers(1);
  if (layers.length > layer_count) {
    layers.shift();
  };
};


function setupCanvas() {

  canvas = document.createElement('canvas');
  c = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);

  c.globalCompositeOperation = "lighter";

  c.strokeStyle = hsl(50,50,90);
  c.lineWidth = 0.5;
  c.shadowBlur = 40;

  c.translate(canvas.width/2, canvas.height/2);
}


Layer = function (petals, size, color, portion) {

  var points = this.points = [];

  this.enabled = true;

  var section = 360/petals;
  var section_open = section*portion

  var angle_start = this.angle_start = random(-section/2,section/2);
  var scale = size/200;

  var rnd = 0;
  var offset = new Vector2(random(-rnd,rnd), random(-rnd,rnd));


  this.reset = function () {

    var temp = new Vector2(0, 0);
    var extend = random(0.7,1.2)*size;

    var angle = angle_start;

    for (var i = 0; i < petals; i++) {

        temp.reset(0,0);
      temp.rotate(angle);
      this.points.push(temp.clone());

      temp.reset(size, 0);
      temp.rotate((-section_open/2)+angle);
      this.points.push(temp.clone());

      temp.reset(extend, 0);
      temp.rotate(angle);
      this.points.push(temp.clone());

      temp.reset(size, 0);
      temp.rotate((section_open/2)+angle);
      this.points.push(temp.clone());

      angle+=section

    };

  };

  this.reset();

  this.update = function(canvas) {

    var angle = (mouseY-canvas.height/2)*angle_start*0.0002+(mouseX-canvas.width/2)*(1-scale)*0.01;

    for (var i = 0; i < points.length; i++) {
      var p = points[i];
      var temp = new Vector2(p.x, p.y);
      temp.rotate(angle);
      points[i].copyFrom(temp);
    }

  };

  this.draw = function(c) {
    c.fillStyle = color;

    c.save();

    if (offset.x != 0 || offset.y != 0) {
      c.translate(offset.x, offset.y);
    }

    c.beginPath();

    for(var i = 0; i < this.points.length; i++) {
      var p = points[i];
      if (i%4 == 2) {

        } else
        if (i%4 == 3) {
          c.quadraticCurveTo(points[i-1].x, points[i-1].y, p.x, p.y)
        } else {
          c.lineTo(p.x, p.y);
        }
    }

    c.closePath();
    c.fill();

    c.restore();

  };

};

var hues = [
  2,
  10,
  17,
  37,
  40,
  63,
  67,
  72,
  74,
  148,
  152,
  156,
  160,
  170,
  175,
  189,
  194,
  260,
  270,
  280,
  288,
  302,
  320,
  330,
  340,
  350
];

style.sass

@import "compass/css3"
body
  background: #000
  margin: 0
  overflow: hidden
    
canvas
  cursor: pointer