My Sketch - OpenProcessing

mySketch
xxxxxxxxxx
 
//This work is a dynamic version of kinetic art project
// https://artsandculture.google.com/entity/m03g48h?categoryid=art-movement
​
var growFactor = 0.4
​
class Hanger{
  constructor(args){
    let def = {
      p: createVector(0,0),
      length: 100,
      mid: 0.5,
      mHeight: 30,
      rotSpeed: 0.1,
      angle: random(0,200),
      angleSpeed: 0,
      lMass: 0,
      rMass: 0
    }
    Object.assign(def,args)
    Object.assign(this,def)
    
  }
  update(){
    this.angle+=this.angleSpeed
  }
  draw(dp){
    dp = dp || 1
    push()
    translate(this.p.x,this.p.y)
      let lLen = this.projLength*this.mid
      let rLen = this.projLength-lLen
      let lY = -this.projHeight*this.mid
      let rY = this.projHeight*(1-this.mid)
​
      strokeWeight(2)
      
      //hang line
      stroke(color(`rgba(255,255,255,${dp})`))
      line(0,this.mHeight,0,0)
​
      
      // main body
      push()
      translate(0,this.mHeight)
        // stroke(color(60,60,60,dp*0.9))
        line(-lLen,lY,0,0)
        // stroke(color(60,60,60,dp*0.9))
        line(0,0,rLen,rY)
​
        //left child
        push()
        translate(-lLen,lY)
          this.lChild && this.lChild.update()
          this.lChild && this.lChild.draw(dp*0.8)
          if (!this.lChild){
            noStroke()
            fill(255,0,0)
            ellipse(0,0,15,15)
          }
        pop()
        
        //right child
        push()
        translate(rLen,rY)
          this.rChild && this.rChild.update()
          this.rChild && this.rChild.draw(dp*0.8)
          if (!this.rChild){
            noStroke()
            fill(255,255,0)
            ellipse(0,0,15,15)
          }
        pop()
​
      
      pop()
            
      //circle
      fill(255)
      noStroke()
      ellipse(0,0,10,10)
      
    pop()
    
  }
  get lPoint(){
    return createVector(this.p.x-this.projLength*this.mid,this.p.y+this.mHeight)
  }
  get rPoint(){
    return createVector(this.p.x+this.projLength*(1-this.mid),this.p.y+this.mHeight)
  }
  get hangAngle(){
    return Math.cos(this.angle)
  }
  get projLength(){
    return cos(this.hangAngle)*this.length
  }
  get projHeight(){
    return sin(this.hangAngle)*this.length/3
  }
}
​
var hangers = []
var angleRan = 0.04
function addHang(h,dp){
  // println(dp++)
  
  console.log(h.lPoint,h.rPoint)
  let ll = new Hanger({
    length: 100+random()*200,
    mHeight: 50+random()*100,
    angleSpeed: random()*angleRan*2-angleRan,
    mid: random(0.3,0.7)
  })
  h.lChild=ll
  if (dp<5 && random()<growFactor){
    addHang(ll,dp)
  }
  
  
  let rr = new Hanger({
    length: 100+random()*200,
    mHeight: 50+random()*100,
    angleSpeed: random()*angleRan*2-angleRan,
    mid: random(0.3,0.7)
  })
  h.rChild=rr
  if (dp<5 && random()<growFactor){
    addHang(rr,dp)
  }
}
​
function setup(){
  createCanvas(windowWidth,windowHeight)
  hangers.push( new Hanger({
    p: createVector(windowWidth/2,50),
    angleSpeed: random()*0.02-0.01,
    mid: random(0.3,0.7)
  }))
  addHang(hangers[0],0)
}
function draw(){
  hangers.forEach(h=>h.update())
  background(color('rgba(0,0,0,0.7)'))
  hangers.forEach(h=>h.draw())
}
function mouseClicked(){
  hangers=[]
  hangers.push( new Hanger({
    p: createVector(windowWidth/2,50),
    angleSpeed: random()*0.02
  }))
  addHang(hangers[0],0)
}