gui.controls.js

// 1 curent, plain prop
var tree = {
  height: 1
}

console.log(tree.height)
gui.addParam('Height', tree, 'height', { min: 0, max: 10 })

// 2 prop with metadata
var tree = {
  height: {
    value: 1,
    min: 0,
    max: 10
  }
}

console.log(tree.height.value)
console.log(tree.height.min)
gui.addParam('Height', tree, 'height')

// 3 smart prop with events/signals
var tree = {
  height: {
    value: 1,
    min: 0,
    max: 10,
    change: new Signal()
  }),
  buds: {
    value: [],
    change: new Signal()
  }
}

console.log(tree.height.value)
console.log(tree.height.min)
tree.height.change.add((e) => {})
gui.addParam('Height', tree, 'height')

// 4 regl way
function createTree (opts) {
   var meta = {
      height: { min: 0, max: 10, type: 'float' },
      color: { min: 0, max: 10, type: 'color' }
   }
   function tree (optsOrString) {
   }
   return tree
}

var tree = createTree({
  height: 1
})
tree({height: 5})
console.log(Object.keys(tree))
console.log(tree('height')) //=> {min: 0, max: 10}
gui.addParam('Height', tree, 'height')

// 5 Object.defineProperty

var tree = {
  height: {
    min: 0,
    max: 10
  }
}
Object.defineProperty(tree.height, 'value', {
  get: () => {}
  set: () => {} // this shoud fire event
})

tree.height.value = 5 // this should fire change event on tree or height?


// CES
spaceColonizationSystem = {
  update: () {
    allEntities.getComponents('spaceColonization').forEach((component) {
       // build treee
       spaceColonization(component.height, component.numPoints)
    })
  }
}

//vs 

var spaceColonizationComponent = {
  height: 1,
  numPoints: 100,
  update: function() {
    spaceColonization(this.height, this.numPoints)
  }
}

allEntities.forEach((entity) => {
  entity.getComponents().forEach(component => component.update())
})