w =540
p = getRandomPalette()
palette = shuffle(p)
bnb({
w, h,
webgl: true,
numFrames: 25,
fps: 25,
// record: true,
shutterAngle: 0.1,
samplesPerFrame: 1,
// video: true,
antiAliasing: 1,
globals: {
rows: null,
cols: null,
w: 1400,
h: 1400,
scl: 20,
flying: 0,
terrain: [],
// TODO: make it accept the random palette
STROKE_COLOR: '7,212,218', // has to be a number or 'r,g,b' string for rgba logic to be simple
FILL_COLOR: 10,
BACKGROUND_COLOR: 'rgb(255,142,86)',
getStrokeColor: (color, alpha = 1) => {
if (typeof color === 'string') {
return `rgba(${color},${alpha})`
}
return `rgba(${color},${color},${color},${alpha})`
}
},
setup: (s, g) => {
s.frameRate(30)
g.cols = g.w / g.scl
g.rows = g.h / g.scl
for (var x = 0; x < g.cols; x++) {
g.terrain[x] = [];
for (var y = 0; y < g.rows; y++) {
g.terrain[x][y] = 0; //specify a default value for now
}
}
},
draw: (s, t, g) => {
// FIXME: when recording, the first frame's background is black, grey, or white, it shouldn't be
s.background(g.BACKGROUND_COLOR)
g.flying -= 0.2
var yoff = g.flying;
for (var y = 0; y < g.rows; y++) {
var xoff = 0;
for (var x = 0; x < g.cols; x++) {
g.terrain[x][y] = s.map(s.noise(xoff, yoff), 0, 1, -100, 100);
xoff += 0.2;
}
yoff += 0.2;
}
s.rotateX(s.PI / 3)
s.translate(-g.w / 2, -g.h / 2)
s.fill(g.FILL_COLOR)
for (var y = 0; y < g.rows - 1; y++) {
s.smooth();
s.beginShape(s.TRIANGLE_STRIP);
for (var x = 0; x < g.cols; x++) {
// z (height) to be lower at the start (y == 0)
//let zRegulator = y / rows;
const mapZregulators = {
0: 0.00001,
1: 0.01,
2: 0.1, 3: 0.15, 4: 0.2, 5: 0.22, 6: 0.24, 7: 0.26, 8: 0.28, 9: 0.3, 10: 0.32, 11: 0.34, 12: 0.36, 13: 0.38, 14: 0.4, 15: 0.42, 16: 0.44, 17: 0.46, 18: 0.48, 19: 0.5, 20: 0.52, 21: 0.54, 22: 0.56, 23: 0.58, 24: 0.6, 25: 0.62, 26: 0.64, 27: 0.66, 28: 0.68, 29: 0.7, 30: 0.72, 31: 0.74, 32: 0.76, 33: 0.78, 34: 0.8, 35: 0.82, 36: 0.84, 37: 0.86, 38: 0.88, 39: 0.9, 40: 0.92, 41: 0.94, 42: 0.96, 43: 0.98 };
let zRegulator0 = mapZregulators[y] || 1;
let zRegulator1 = mapZregulators[y + 1] || 1;
if (zRegulator1 === 1 && zRegulator0 === 1) {
s.stroke(g.getStrokeColor(g.STROKE_COLOR));
} else {
s.stroke(g.getStrokeColor(g.STROKE_COLOR, zRegulator0));
}
s.vertex(
x * g.scl, y * g.scl,
g.terrain[x][y] * zRegulator0
- 100 * (1 - zRegulator0)
);
s.vertex(
x * g.scl, (y + 1) * g.scl,
g.terrain[x][y + 1] * zRegulator1
- 100 * (1 - zRegulator1)
);
}
s.endShape();
}
}
})
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.
