Remix.run Logo
utopiah 2 days ago

Neat, inspired me to make an immersive version (in WebXR) limited to named colors in HTML (140) so here is a 18s video https://video.benetou.fr/w/rugsEB2sSbqgixNm2QjumH

11 lines of JavaScript thanks to AFrame, threejs and some of my own tinkering :

  fetch('colors.json').then( res => res.json() ).then( colors => {
  colors.map( c => {
  let boxEl = document.createElement("a-box")
  boxEl.id = 'color_'+c.name
  let [r,g,b] = c.rgb.replace('RGB(','').replace(')','').split(',').map( n => Number(n)/100 )
  let pos = `${1-r} ${0.5+g} ${-0.5-b}`
  boxEl.setAttribute("position", pos)
  boxEl.initialPosition = pos
  boxEl.setAttribute("scale", ".1 .1 .1")
  boxEl.setAttribute("color", c.name)
  boxEl.setAttribute("target", "")
  boxEl.setAttribute("onpicked", "setFeedbackHUD('color'+selectedElements.at(-1).element.getAttribute('color'))" )
  boxEl.setAttribute("onreleased", "let el = selectedElements.at(-1).element; el.setAttribute('position',el.initialPosition)" )
  AFRAME.scenes[0].appendChild(boxEl)
  }) // end of fetch()