Genuary 26: Symmetry - OpenProcessing

mySketch
xxxxxxxxxx
 
let simplex
let loovers=[]
let reflection
​
function preload(){
font= loadFont('FamiljenGrotesk-VariableFont_wght.ttf')
}
​
function setup() {
  createCanvas(400, 400); 
  simplex= new openSimplexNoise(Date.now())
  background('#f4f1de') 
  let delayer=0
  for(let a=PI+PI/4; a<=TAU-PI*0.4; a+=PI/36){
    let baseSize= map(a, PI+PI/4, PI+HALF_PI, 30, 60)
    loovers.push(new loover(200, 325, a+ random(-PI/26, -PI/26), 3, baseSize+random(-5, 5), delayer))
      delayer+=10
  }
}
​
function draw(){
    for(let i=loovers.length-1; i>=0; i--){
    loovers[i].move();
    loovers[i].divide();
    loovers[i].show();
    loovers[i].done();
  }
  
  
  
  noStroke()
  fill('#f4f1de')
  rect(0, 0, width, 40)
  rect(0, 0, 40, height)
  rect(360, 0, 60, height)
  rect(0, 360, width, 40)
  
  
  noFill()
  stroke(100)
  textFont(font)
   fill(100)
  strokeWeight(1)
  stroke(100)
  text('1.26', 20, 330) 
  
  reflection=get(0, 0, 200, 400)
  push()
  translate(400, 0)
  scale(-1, 1)
  image(reflection, 0, 0)
  pop()
}
​
​
​
class loover{
  constructor(x, y, initAngle, initSize, finalSize, delay){
    this.pos= createVector(x, y)
    this.vel= p5.Vector.fromAngle(initAngle+random(-0.1, 0.1), 3.5) 
    this.initAngle= initAngle
    this.initSize= initSize
    this.size= initSize
    this.finalSize= finalSize
    this.totalGrowth= finalSize-initSize
    this.delay=delay
    this.spreadTime= frameCount+this.delay+int(finalSize*0.33)
  }
  
  move(){
    if(frameCount>this.delay){
    let turnMax= map(this.initAngle, PI+PI/12, PI+HALF_PI, 0.075, 0)
    let amount= map(this.size, this.initSize, this.finalSize, 0, turnMax)
    let turn= noise(this.pos.x/100, this.pos.y/100, this.vel.heading())*-amount
    this.vel.rotate(turn)
    this.pos.add(this.vel)
    }
  }
  
  divide(){
    if(frameCount==this.spreadTime  && this.finalSize>30){
      let currentAngle= this.vel.heading()
      //loovers.push(new loover(this.pos.x, this.pos.y, currentAngle+ QUARTER_PI, 1, this.finalSize*0.5, 3))
      loovers.push(new loover(this.pos.x, this.pos.y, currentAngle- QUARTER_PI, 1, this.finalSize*0.5, 3))
    }
  }
  
  show(){
    if(frameCount>this.delay){
    push()
    //fill(0, 50)
      noFill()
      noStroke()
    blendMode(MULTIPLY)
    let framesMap= map(this.size, this.initSize, this.finalSize, 0, 1)
    let adjSize= lerp(this.initSize, this.finalSize, easeInSine(framesMap))
    translate(this.pos.x, this.pos.y)
    rotate(this.vel.heading()+HALF_PI)
    ellipse(0,0, adjSize*1.05, adjSize)
    fill(0, 5)
    ellipse(0, 0, adjSize)
    stroke(0, 5)
      strokeCap(ROUND)
    strokeWeight(adjSize)
    line(0, -(adjSize*0.1), 0, (adjSize*0.5))
      stroke(100, 20)
      line(0, -(adjSize*0.1), 0, (adjSize*0.5))
    noStroke()
    pop()
    }
  }
  
done(){
  if(frameCount>this.delay){
  this.size++
  if(this.size>=this.finalSize){
    let index= loovers.indexOf(this)
    loovers.splice(index, 1)
  }
  }
​
}
}
​
function easeInSine(x){
  return 1 - Math.cos((x * Math.PI) / 2);
}
​