// https://www.pizza-punk.com

// Use and abuse...

​

//Bezier documentation: https://p5js.org/reference/#/p5/bezierVertex

​

function setup() {

  createCanvas(450, 900);

  background(224, 228, 204);

}

​

function draw() {

  background(224, 228, 204);

  let part = 3;

  let colo = color(243, 134, 48);

  let colo2 = color(250, 105, 0);

  let colo3 = color(105,210,231);

  fill(colo);

  //noFill();

  stroke(colo2);

  let help = 1;

  let vit = 0.05;

  let valFlex = cos(frameCount * vit) * 20;

  //let valFlex = 40;

  let valFlexSmt = createVector(sin(frameCount * vit) * valFlex, cos(frameCount * vit) * valFlex);

  let motion = createVector(sin(frameCount * vit), cos(frameCount * vit - HALF_PI));

​

​

  push();

  translate(width / part, 20);

​

  //let ptJoint1 = createVector(motion.x*50,motion.y*valFlex);

  let ptJoint1 = createVector(motion.x * valFlex / 4, motion.y * valFlexSmt.x);

​

  stroke(colo2);

  beginShape();

  vertex(ptJoint1.x * 3, 0);

  bezierVertex(50, 50, 50, 100, 0, 150);

  bezierVertex(-50, 100, -50, 50, ptJoint1.x * 3, 0);

  endShape();

​

​

  if (help == 1) {

    stroke(0);

    line(ptJoint1.x * 3, 0, 0, 150);

    line(0, 150, 50, 100);

    line(0, 150, -50, 100);

    line(ptJoint1.x * 3, 0, 50, 100);

    line(ptJoint1.x * 3, 0, -50, 100);

  }

​

 translate(width / part, 0);

​

  let flexion = createVector(motion.x * valFlex, motion.y * valFlex);

​

  stroke(colo2);

  beginShape();

  vertex(ptJoint1.x*3, 0);

  bezierVertex(50, 100 - flexion.y, 50, 100 - flexion.y, 0, 150);

  bezierVertex(-50, 100 + flexion.y, -50, 100 + flexion.y, ptJoint1.x*3, 0);

  endShape();

​

  if (help == 1) {

    stroke(0);

    line(ptJoint1.x*3, 0, 0, 150);

    line(0, 150, 50, 100 - flexion.y);

    line(0, 150, -50, 100 + flexion.y);

    line(ptJoint1.x*3, 0, 50, 100 - flexion.y);

    line(ptJoint1.x*3, 0, -50, 100 + flexion.y);

  }

​

​

​

  pop();

​

  //LINE 2 // LINE 2 // LINE 2

​

  push();

  translate(width / part, height / 4);

  let valTwist = 50;

  let twist = createVector(sin(frameCount * vit) * valTwist, cos(frameCount * vit) * valTwist);

​

  stroke(colo2);

  beginShape();

  vertex(ptJoint1.x * 3, 0);

  bezierVertex(50 - (twist.x), 50, 50, 100, 0, 150);

  //bezierVertex(-50-(twist.x),100,-50,50,ptJoint1.x*3,0);

  bezierVertex(-50, 100, -50 - (twist.x), 50, ptJoint1.x * 3, 0);

  endShape();

  if (help == 1) {

    stroke(0);

    line(ptJoint1.x * 3, 0, 0, 150);

    line(0, 150, 50, 100);

    line(0, 150, -50, 100);

    line(ptJoint1.x * 3, 0, 50 - (twist.x), 100);

    line(ptJoint1.x * 3, 0, -50 - (twist.x), 100);

  }

 translate(width / part, 0);

​

  stroke(colo2);

  beginShape();

  vertex(ptJoint1.x*3, 0);

  bezierVertex(50 - (twist.x), 100 - flexion.y, 50, 100 - flexion.y, 0, 150);

  bezierVertex(-50, 100 + flexion.y, -50 - (twist.x), 100 + flexion.y, ptJoint1.x*3, 0);

  endShape();

  if (help == 1) {

    stroke(0);

    line(ptJoint1.x*3, 0, 0, 150);

    line(0, 150, 50, 100 - flexion.y);

    line(0, 150, -50, 100 + flexion.y);

    line(ptJoint1.x*3, 0, 50 - (twist.x), 100 - flexion.y);

    line(ptJoint1.x*3, 0, -50 - (twist.x), 100 + flexion.y);

  }

​

​

  pop();

​

  //LINE 3 // LINE 3 // LINE 3

  push();

  translate(width / part, (height / 4) * 2);

​

  stroke(colo2);

  beginShape();

  vertex(ptJoint1.x * 15, 0);

  bezierVertex(50 - (twist.x), 50, 50, 100, ptJoint1.x * -15, 150);

  //bezierVertex(-50-(twist.x),100,-50,50,ptJoint1.x*3,0);

  bezierVertex(-50, 100, -50 - (twist.x), 50, ptJoint1.x * 15, 0);

  endShape();

 if (help == 1) {

    stroke(0);

    line(ptJoint1.x * 15, 0, ptJoint1.x * -15, 150);

    line(ptJoint1.x * -15, 150, 50, 100);

    line(ptJoint1.x * -15, 150, -50, 100);

    line(ptJoint1.x * 15, 0, 50 - (twist.x), 100);

    line(ptJoint1.x * 15, 0, -50 - (twist.x), 100);

  }

​

 translate(width / part, 0);

​

  stroke(colo2);

  beginShape();

  vertex(ptJoint1.x, 0);

  bezierVertex(50 - (twist.x), 100 - flexion.y, 50, 100 - flexion.y, ptJoint1.x * 15, 150);

  bezierVertex(-50, 100 + flexion.y, -50 - (twist.x), 100 + flexion.y, ptJoint1.x, 0);

  endShape();

  if (help == 1) {

    stroke(0);

    line(ptJoint1.x, 0, ptJoint1.x * 15, 150);

    line(ptJoint1.x * 15, 150, 50, 100 - flexion.y);

    line(ptJoint1.x * 15, 150, -50, 100 + flexion.y);

    line(ptJoint1.x, 0, 50 - (twist.x), 100 - flexion.y);

    line(ptJoint1.x, 0, -50 - (twist.x), 100 + flexion.y);

  }

​

​

​

  pop();

​

  //LINE 4 // LINE 4 // LINE 4

​

  translate(width / part, (height / 4) * 3);

​

  stroke(colo2);

  beginShape();

  vertex(0, 0);

  bezierVertex(50, 50, 50, 100, ptJoint1.x * 3, 150);

  bezierVertex(-50, 100, -50, 50, 0, 0);

  endShape();

​

  if (help == 1) {

    stroke(0);

    line(0,0,ptJoint1.x * 3,150);

    line(ptJoint1.x * 3, 150, 50, 100);

    line(ptJoint1.x * 3, 150, -50, 100);

    line(0, 0, 50, 100);

    line(0, 0, -50, 100);

  }

​

 translate(width / part, 0);

​

  stroke(colo2);

  beginShape();

  vertex(ptJoint1.x * 3, 0);

  bezierVertex(50 - (twist.x), 100 - flexion.y, 50, 100 - flexion.y, ptJoint1.x, 150);

  bezierVertex(-50, 100 + flexion.y, -50 - (twist.x), 100 + flexion.y, ptJoint1.x * 3, 0);

  endShape();

  if (help == 1) {

    stroke(0);

    line(ptJoint1.x * 3, 0, ptJoint1.x,150);

    line(ptJoint1.x, 150, 50, 100 - flexion.y);

    line(ptJoint1.x, 150, -50, 100 + flexion.y);

    line(ptJoint1.x * 3, 0, 50 - (twist.x), 100 - flexion.y);

    line(ptJoint1.x * 3, 0, -50 - (twist.x), 100 + flexion.y);

  }

​

​

}