Generative artist, sharing my journey in visual experiments.
colors = [
// 'white', 'black', 'red'
'black', 'white', 'red'
//'white', 'black', 'white'
]
generate = () => svg`<svg height="700" viewBox="${-margin} ${-margin} ${w + margin*2} ${h + margin*2}" style="background: ${colors[0]};">
${style()}
${array(ny).map(y => array(nx).map(x => {
let p = random() < smoothstep(y, 3, ny-4)
let n = p ? randInt(5) : x % 5
let diff = n != x%5
return `<g transform="translate(${x*10},${y*10})">
${symbols[n + (y%2 || (diff && randInt(2)) ? 5 : 0)]} fill="${diff ? colors[2] : colors[1]}" />
</g>`
}).join('')).join('')}
</svg>`
palette = ['#FFED00', '#E6007E', '#009FE3']
generate2 = () => {
const gen = () => `${array(ny).map(y => array(nx).map(x => {
let p = random() < smoothstep(y, 3, ny-4)
let n = p ? randInt(5) : x % 5
let diff = n != x%5
return `<g transform="translate(${x*10},${y*10})">
${symbols[n + (y%2 || (diff && randInt(2)) ? 5 : 0)]} fill="${diff ? palette[randInt(3)] : colors[1]}" />
</g>`
}).join('')).join('')}`
const el = svg`<svg id="res" height="700" viewBox="${-margin} ${-margin} ${w + margin*2} ${h + margin*2}" style="background: black;">
${style()}
<g id="main">${gen()}</g>
</svg>`
el.addEventListener('click', e => document.querySelector('#main').innerHTML = gen())
return el
}
symbols = [
'<path d="M1,4 h8 v2 h-8 Z" ',
'<path d="M3.661,4.194C3.938,3.72,4.452,3.4,5.041,3.4c0.589,0,1.104,0.32,1.381,0.794H8.96 C8.587,2.371,6.975,1,5.041,1C3.107,1,1.495,2.371,1.122,4.194H3.661z M6.422,5.807C6.145,6.281,5.63,6.601,5.041,6.601c-0.589,0-1.103-0.319-1.38-0.794H1.122 C1.495,7.629,3.107,9,5.041,9S8.587,7.629,8.96,5.807H6.422z" ',
'<path d="M1,1 h8 v2 h-1 v1 h-2 v-1 h-2 v1 h-2 v-1 h-1 Z M1,7 h1 v-1 h2 v1 h2 v-1 h2 v1 h1 v2 h-8 Z" ',
'<path d="M1,2 h3 v-1 h2 v1 h3 v2 h-8 Z M1,6 h8 v2 h-3 v1 h-2 v-1 h-3 Z" ',
'<path d="M1,1 h8 v2 h-6 v2 h-2 Z M1,7 h6 v-2 h2 v4 h-8 Z" ',
'<path d="M4,1 v8 h2 v-8 Z" ',
'<path d="M5.806,3.66C6.28,3.938,6.601,4.452,6.601,5.041S6.28,6.145,5.806,6.422V8.96C7.629,8.587,9,6.975,9,5.041 c0-1.933-1.371-3.546-3.193-3.919L5.806,3.66z M4.193,6.422C3.719,6.145,3.399,5.63,3.399,5.041S3.719,3.938,4.193,3.66V1.122C2.371,1.494,1,3.107,1,5.04 c0,1.934,1.371,3.547,3.193,3.92V6.422z" ',
'<path d="M1,1 v8 h2 v-1 h1 v-2 h-1 v-2 h1 v-2 h-1 v-1 Z M7,1 v1 h-1 v2 h1 v2 h-1 v2 h1 v1 h2 v-8 Z" ',
'<path d="M2,1 v3 h-1 v2 h1 v3 h2 v-8 Z M6,1 v8 h2 v-3 h1 v-2 h-1 v-3 Z" ',
'<path d="M1,1 v8 h2 v-6 h2 v-2 Z M7,1 v6 h-2 v2 h4 v-8 Z" ',
]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
