utopiah_channel

Immersive color picker


Listen Later

Live testing https://companion.benetou.fr/index.html?username=q4_named_color_picker

11 lines of JavaScript :

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)

Inspired by https://news.ycombinator.com/item?id=45748816

Dataset https://gist.github.com/jennyknuth/e2d9ee930303d5a5fe8862c6e31819c5

...more
View all episodesView all episodes
Download on the App Store

utopiah_channelBy