​

function setup() {

  createCanvas(800, 800);

  oddframe = motions();

  noStroke();

}

​

function draw() {

  background(220);

  //test(width / 2, height / 2,oddframe.count);

  grid(4);

}

​

keyPressed = () => {

  if (key === 's') {

    //saveCanvas(canvas, 'canvas', 'png');

    saveGif('canvas', 2);

  }

};

​

​

// グリッド上に三角形を配置したかった

const grid = (num) =>{

  const r = width/num;

  let x,y;

  push();

  // numを2倍にするのがポイント

  for(let j = 0;j<num*2+2;j++){

    for(let i = 0;i<num+1;i++){

      if(j%2 == 0){

        fill(30);

        x = r*i;

      }else{

        fill(255);

        x = r*i+r/2;

      }

      y = r/2*j;

      lerpMotion(x,y,oddframe.count);

    }

  }

  pop();

}

​

function lerpMotion(xx,yy,m){

  const n = 3;

  const r = 50;

  const angle = 360/n;

  push();

  translate(xx,yy);

  for(let i = 0; i < n; i++){

    const x = r * cos(radians(angle * i));

    const y = r * sin(radians(angle * i));

    if(i === n-1){

      const xx = r * cos(radians(angle * 0));

      const yy = r * sin(radians(angle * 0));

      let v0 = createVector(x, y);

      let v1 = createVector(xx,yy);

      let v2 = p5.Vector.lerp(v0, v1, m);

      circle(v2.x,v2.y,r/3);       

    }else{

      const xx = r * cos(radians(angle * (i+1)));

      const yy = r * sin(radians(angle * (i+1)));

      let v0 = createVector(x, y);

      let v1 = createVector(xx,yy);

      let v2 = p5.Vector.lerp(v0, v1, m);

      circle(v2.x,v2.y,r/3);

    }

  }

  pop();

}

​

/**

 * モーション関数 点から線を走らせる gsap使用

 * @function motion

 * @return {object} frame - モーションのフレーム(0-1)

 */

const motions = () => {

  const easing_str = 'quad.inOut';

  const duration = 2;

  const frame = { count: 0 };

​

  const tl = gsap.timeline({ repeat: -1, yoyo: false });

  tl.to(frame, {

    count: 1,

    duration: duration,

    ease: easing_str,

    onComplete: () => {

    },

  });

  return frame;

};