Published
Edited
Oct 25, 2019
2 forks
24 stars
Playing with Noise: Flow Fields and Autonomous Agents
Creating a Canvas Noise Map for Generative Art
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
agentList = []
Insert cell
getAgents = () => [...agentList]
Insert cell
getAgents()
Insert cell
Insert cell
bgColor = {
const [str, rhex, ghex, bhex] = bgHex
.replace('#', '')
.match(/(\S{2})(\S{2})(\S{2})/);
return [parseInt(rhex, 16), parseInt(ghex, 16), parseInt(bhex, 16)];
}
Insert cell
brushColor = {
const [str, rhex, ghex, bhex] = brushHex
.replace('#', '')
.match(/(\S{2})(\S{2})(\S{2})/);
return [parseInt(rhex, 16), parseInt(ghex, 16), parseInt(bhex, 16)];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
staticBrushSize
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
c2rgba = ([r,g,b,a=1]) => `rgba(${r},${g},${b},${a})`
Insert cell
Insert cell
mapPreviewDimension = 512
Insert cell
noiseDimension = 16
Insert cell
noiseDepth = 8
Insert cell
noiseMap = createNoiseMap(noiseDimension, noiseDimension, noiseDepth, seed)
Insert cell
import {
text,
button,
slider,
select,
radio,
color as colorInput
} from "@jashkenas/inputs"
Insert cell
Insert cell
Insert cell
v = require('https://bundle.run/@thi.ng/vectors@3.3.1')
Insert cell

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.
Learn more