Genuary 28: Evolution Scroll

mySketch.js
style.css
index.html
xxxxxxxxxx
 
let figures = []
const w = 1000
​
function setup() {
  createCanvas(windowWidth, windowHeight)
  for (let i = 0; i < 6; i++) {
    figures.push(new Figure([
      {
        pos: createVector(map(i, 0, 5, -1, 1)*w*0.45, 0),
        type: 'root',
        children: [
          // torso
          {
            pos: createVector(0, map(i, 0, 5, -130, -100)).rotate(map(i, 0, 5, PI*0.2, 0)),
            children: [
              // head
              { pos: createVector(0, -40).rotate(map(i, 0, 5, PI*0.2, 0)), type: 'circle' },
              // arms
              ...[-1, 1].map(side => ({
                pos: createVector(20 * side, map(i, 0, 5, 100, 80)),
                children: [
                  { pos: createVector(10 * -side, map(i, 0, 5, 100, 80)) }
                ]
              }))
            ]
          },
​
          // legs
          ...[-1, 1].map(side => ({
            pos: createVector(60 + 5 * -side, 20).lerp(createVector(5 * -side, 100), i/5),
            children: [
              {
                pos: createVector(-40, 80).lerp(createVector(5 * -side, 100), i/5),
                children: [
                  { pos: createVector(20, 0) }
                ]
              }
            ]
          }))
        ]
      }
    ]))
  }
}
​
function draw() {
  background(255)
  
  textAlign(CENTER, BOTTOM)
  textSize(20)
  text('behold: evolution', width/2, height*0.95)
  
  const s = width/w
  translate(width/2, height/2 + (s*300)/2)
  scale(s)
  
  for (const figure of figures) {
    figure.dna[0].pos.x -= map(frameCount, 60, 120, 0, 5, true)
  }
  if (figures[0].dna[0].pos.x < -w/2 - w*0.18) figures.shift()
  if (figures.at(-1).dna[0].pos.x < w/2) {
    const mutated = figures.at(-1).clone()
    mutated.mutate()
    mutated.dna[0].pos.x = w/2 + w*0.18
    figures.push(mutated)
  }
  
  push()
  strokeWeight(8)
  for (const figure of figures) {
    figure.draw()
  }
  pop()
}
​
class Figure {
  constructor(dna) {
    this.dna = dna
    this.normalize()
  }
  
  draw() {
    for (const gene of this.dna) {
      this.drawGene(gene)
    }
  }
  
  drawGene(gene) {
    push()
    if (gene.type === 'circle') {
      circle(gene.pos.x/2, gene.pos.y/2, gene.pos.mag())
    } else if (gene.type === 'root') {
      // noop
    } else {
      line(0, 0, gene.pos.x, gene.pos.y)
    }
    translate(gene.pos.x, gene.pos.y)
    for (const child of (gene.children || [])) {
      this.drawGene(child)
    }
    pop()
  }
  
  clone() {
    return new Figure(this.dna.map(gene => this.cloneGene(gene)))
  }
  
  cloneGene(gene) {
    const cloned = { ...gene, pos: gene.pos.copy() }
    if (cloned.children) {
      cloned.children = cloned.children.map(child => this.cloneGene(child))
    }
    return cloned
  }
  
  mutate() {
    this.dna.forEach(gene => this.mutateGene(gene))
    this.normalize()
  }
  
  mutateGene(gene) {
    if (gene.type !== 'root') {
      gene.pos.add(random(-5, 5), random(-5, 5))
      gene.pos.rotate(random(-1, 1) * PI * 0.1)
    }
    if (gene.type !== 'root' && random() < 0.1) {
      gene.type = random() < 0.1 ? 'circle' : undefined
    }
    if (random() < 0.05) {
      gene.children = gene.children || []
      gene.children.push({
        pos: createVector(random(20, 20), random(20, 20)),
        type: random() < 0.1 ? 'circle' : undefined,
      })
    }
    if (gene.children) {
      gene.children = gene.children.filter(() => random() < 0.99)
      for (const child of gene.children) {
        if (random() < 0.8) {
          this.mutateGene(child)
        }
      }
    }
  }
  
  normalize() {
    let base = 0
    let off = 0
    const walk = (gene) => {
      base = max(base, gene.pos.y + off)
      off += gene.pos.y
      for (const child of (gene.children || [])) walk(child)
      off -= gene.pos.y
    }
    for (const gene of this.dna) walk(gene)
    
    for (const gene of this.dna) gene.pos.y -= base
  }
}