200606

let humans = [];

let ColsHead = createCols("https://coolors.co/eede68-4b5247-91732b-1a150a");

let ColsBody = createCols("https://coolors.co/868074-e7ce13-476039-333029-c74329");

let ColsLeg = createCols("https://coolors.co/868074-1b3e50-3f4d5a-ebe9e6-7a8f61");

​

function setup() {

  createCanvas(windowWidth, windowHeight,WEBGL);

  //ortho

  let dep = max(width,height);

  ortho(-width / 2, width / 2, -height / 2, height / 2,-dep*3 , dep*3);

  //shader

  sh = createShader(vert,frag);

  this.shader(sh);

  sh.setUniform("u_resolution", [width,height]);

  sh.setUniform("u_pixelDensity", pixelDensity());

  sh.setUniform("u_lightDir", [1,1,-1]);

  noStroke();

  const size = width*2;

  const span = size/10;

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

    for(let z = -size/2; z < size/2; z+=span){

      let cycle =100;

      let height = random(0.35,0.8)*span;

      let wid = random(0.12,0.2)*span;

      humans.push(new Human(createVector(x,0,z),cycle,height,wid,ColsHead[int(random(ColsHead.length))], ColsBody[int(random(ColsBody.length))], ColsLeg[int(random(ColsLeg.length))]));

    }

  }

}

​

function draw() {

  background("#CCCCCC");

  orbitControl();

  rotateX(-PI/6);

  rotateY(PI/5);

  for(let h of humans){

    h.update();

    h.display();

  }

}

​

​

function createCols(_url)

{

  let slash_index = _url.lastIndexOf('/');

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split('-');

  for (let i = 0; i < arr.length; i++) {

    arr[i] = '#' + arr[i];

  }

  return arr;

}

​

​

class Human{

  constructor(pos,cycle,height,wid,colFace,colBody,colLeg){

    this.pos = pos;

    this.height = height;

    this.width = wid;

    this.weight = wid/5;

    this.legL = new Leg(p5.Vector.add(pos,createVector(0,-this.height*0.4,-this.weight)),height*0.25,PI/2+PI*0.2, PI/2-PI*0.1,cycle,0, height*0.25,-PI*0.3,0,cycle,0.2,this.weight);

    this.legR = new Leg(p5.Vector.add(pos,createVector(0,-this.height*0.4,this.weight)), height*0.25,PI/2+PI*0.2, PI/2-PI*0.1,cycle,0.5, height*0.25,-PI*0.3,0,cycle,0.7,this.weight);

    this.armL = new Leg(p5.Vector.add(pos,createVector(0,-this.height+this.weight*4,-this.weight*2)),height*0.2,PI/2+PI*0.125, PI/2-PI*0.125,cycle,0.5, height*0.2,0,PI*0.25,cycle,0,this.weight*0.8);

    this.armR = new Leg(p5.Vector.add(pos,createVector(0,-this.height+this.weight*4,this.weight*2)),height*0.2,PI/2+PI*0.125, PI/2-PI*0.125,cycle,0, height*0.2,0,PI*0.25,cycle,0.5,this.weight*0.8);

    this.col = [colFace,colBody,colLeg];

  }

  update(){

    this.legL.setPos(p5.Vector.add(this.pos,createVector(0,-this.height*0.4,-this.weight)));

    this.legR.setPos(p5.Vector.add(this.pos,createVector(0,-this.height*0.4,this.weight)));

    this.armL.setPos(p5.Vector.add(this.pos,createVector(0,-this.height+this.weight*4,-this.weight*2)));

    this.armR.setPos(p5.Vector.add(this.pos,createVector(0,-this.height+this.weight*4,this.weight*2)));

    this.legL.update();

    this.legR.update();

    this.armL.update();

    this.armR.update();

  }

  display(){

    setCol(this.col[0]);

    noStroke();

    //face

    push();

    let faceSize = this.weight*3;

    let facePos = -this.height+faceSize/2;

    translate(p5.Vector.add(this.pos,createVector(0,facePos,0)));

    sphere(faceSize/2,10,10);

    pop();

    //body

    setCol(this.col[1]);

    push();

    let bodyHeight = this.height*0.5-this.weight*3;

    let bodyPos = facePos+faceSize*0.75+bodyHeight/2;

    translate(p5.Vector.add(this.pos,createVector(0,bodyPos,0)));

    box(this.weight,bodyHeight,this.weight*2.3);

    pop();

    this.armL.display();

    this.armR.display();

    //leg

    setCol(this.col[2]);

    push();

    let hipSize = this.weight*1.5;

    translate(0,bodyPos+bodyHeight/2+hipSize/2,0);

    pop();

    this.legL.display();

    this.legR.display();

  }

​

}

​

class Leg{

  constructor(pos,

               length1,seg1MinAngle,seg1MaxAngle,seg1Cycle,seg1ratio,

               length2,seg2MinAngle,seg2MaxAngle,seg2Cycle,seg2ratio,

              weight)

  {

    this.seg1 = new Segment(pos,length1,seg1MinAngle,seg1MaxAngle,seg1Cycle,seg1ratio,weight);

    this.seg2 = new Segment(this.seg1.getEndPos(),length2,seg2MinAngle,seg2MaxAngle,seg2Cycle,seg2ratio,weight);

  }

​

  update(){

    this.seg1.update();

    this.seg2.setPos(this.seg1.getEndPos());

    this.seg2.setAngleOffset(this.seg1.getAngle());

    this.seg2.update();

  }

  setPos(pos){

    this.seg1.pos = pos;

  }

  display(){

    push();

    translate(this.seg1.pos);

    sphere(this.seg1.weight/2,6,6);

    pop();

    this.seg1.display();

    this.seg2.display();

  }

  getPos(){

    return this.seg1.getPos();

  }

​

}

​

​

class Segment{

  constructor(pos,length,minAngle,maxAngle,cycle,ratio,weight)

  {

    this.pos = pos;

    this.angle = 0;

    this.angleOffset = 0;

    this.length = length;

    this.cycle = cycle;

    this.frameOffset = cycle*ratio;

    this.minAngle = minAngle;

    this.maxAngle = maxAngle;

    this.weight = weight;

  }

  setPos(pos){

    this.pos = pos;

  }

  setAngleOffset(angle){

    this.angleOffset = angle;

  }

  update(){

    const ratio = ((frameCount + this.frameOffset)%this.cycle)/this.cycle;

    const ratioRad = ratio * TAU;

    this.angle = map(sin(ratioRad),-1,1,this.minAngle,this.maxAngle) + this.angleOffset;

  }

  getPos(){

    return this.pos;

  }

  getEndPos(){

    let pos = this.pos.copy();

    pos.add(createVector(cos(this.angle)*this.length,sin(this.angle)*this.length),0);

    return pos;

  }

  getAngle(){

    return this.angle;

  }

  display(){

    let endPos = this.getEndPos();

    let cPos = p5.Vector.lerp(this.pos,endPos,0.5);

    let h = this.pos.dist(endPos);

    push();

    translate(cPos);

    rotateZ(this.angle+PI/2);

    cylinder(this.weight/2,h,6,1);

    pop();

    push();

    translate(endPos);

    sphere(this.weight/2,6,6);

    pop();

  }

}