Cordeiro colorido dançante

// options

kumaleon.options = {

  onInit: () => {

    // called when the app is initialized

  },

​

  onUpdate: () => {

    // called in requestAnimationFrame loop

  },

​

  onResize: () => {

    // called when window resized

  },

}

​

/******************

Code by Vamoss

Original code link:

https://www.openprocessing.org/sketch/1051794

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

//Original Artwork by Waldemar Cordeiro (1958)

//Fonte: http://enciclopedia.itaucultural.org.br/obra4196/sem-titulo

​

let size, tile, grid, rotations;

let changed = -1;

​

let firstDraw = true, bg, colors;

​

function setup() {

  kumaleon.setCanvas(createCanvas(windowWidth, windowHeight).canvas);

  size = min(width, height) / 15;

  noStroke();

  colors = [color("#b1f4d5"), color("#a0f9fc"), color("#43e8d6"), color("#68c4e8"), color("#8e9eca"), color("#5577a1"), color("#2e2e31")];

  bg = createGraphics(width, height);

  bg.background(0);

  tile = createGraphics(size, size);

  tile.fill(255);

  tile.noStroke();

  tile.beginShape();

    tile.vertex(0, 0);

    tile.vertex(size, size);

    tile.vertex(0, size);

  tile.endShape();

  grid = [];

  rotations = [];

  let counterY = 0;

  for(let y = size/2; y < height; y += size){

    let counterX = counterY%4 < 2 ? 0 : 2;

    for(let x = size/2; x < width; x += size){

      if(++counterX%4==0) continue;

      let rotation = 0;

      //diagonal

      if(counterY % 2 == 0) {

        if(counterX % 4 == 3)

          rotation = -HALF_PI;

      }else{

        if(counterX % 4 == 1)

          rotation = HALF_PI;

        else if(counterX % 4 == 3)

          rotation = PI;

      }

      //change diagonal direction

      if(counterX % 4 == 2){

        if(counterY % 4 < 2) {

          if(counterY % 2 == 0)

            rotation = PI;

        }else{

          rotation = counterY % 2 == 0 ? HALF_PI : -HALF_PI;

        }

      }

      rotations.push(rotation);

      grid.push({rotation, x, y, lastChange: 0});

    }

    counterY++;

  }

}

​

function draw() {

  image(bg, 0, 0);

  var time = millis()/1000;

  grid.forEach((g, index) => {

    if(!g.cacheCalc)

      g.cacheCalc = sqrt(pow(g.x-width/2, 2)/100000+pow(g.y-height/2, 2)/100000);

    var freq = (sin(time*2-g.cacheCalc) + 1) / 2;

    // fill(freq * 255, 100);

    // rect(g.x, g.y, size, size);

    // return;

    if(freq > 0.8 && time - g.lastChange > 0.5){

      g.lastChange = time;

      rotations[index] += TWO_PI/4;

    }

    g.rotation += (rotations[index] - g.rotation) * 0.09; 

    push();

      translate(g.x, g.y);

      rotate(g.rotation);

      image(tile, - size / 2, - size / 2);

    pop();

    if(firstDraw) {

      bg.push();

        bg.tint(random(colors));

        bg.translate(g.x, g.y);

        bg.rotate(g.rotation);

        bg.image(tile, - size / 2, - size / 2);

      bg.pop();

    }

  });

  firstDraw = false;

}

​

function findClosest(){

  let closest = 0;

  let closestDistance = 9999;

  grid.forEach((g, index) => {

    let d = dist(mouseX, mouseY, g.x, g.y);

    if(d < closestDistance) {

      closestDistance = d;

      closest = index;

    }

  });

  return closest;

}

​

function mousePressed() {

  changed = findClosest();

  rotations[changed] += TWO_PI/4;

}

​

function mouseMoved() {

  let tempChanged = findClosest();

  if(changed != tempChanged){

    changed = tempChanged;

    rotations[changed] += TWO_PI/4;

  }

}