Creative coder based in Paris
Published
Edited
Jan 9, 2022
1 star
w = 1024
h = 1024
p = getRandomPalette()
//p = ["#a6a4a5", "#d9d9d9", "#594f56", "#262626", "#0d0d0d"]
palette = shuffle(p)
displayPalettes(palette)
bnb({
w, h,
numFrames: 120,
fps: 30,
//record: true,
// video: true,
setup: (s, g) => {
g.buildingCount = 10;
g.buildingHeights = array(g.buildingCount).map(d => s.random(h*0.1, h));
g.buildingColors = array(g.buildingCount).map(d => s.color(palette[randInt(1, palette.length)]));
g.buildingFloorHeights = array(g.buildingCount).map(d => s.random(10, 20));
g.divisionCount = 7
g.grid = [];
divideRect4(0, 0, w, h, g.divisionCount, g.grid, 0.7);
g.grid.sort((a, b) => a.w - b.w)
g.grid2 = [];
let cellSize = w/40;
for (let x = 0; x < w; x+=cellSize) {
for (let y = 0; y < h; y+=cellSize) {
let item = {
x,
y,
w: cellSize,
h: cellSize
}
g.grid2.push()
}
}
g.fillColors = array(g.grid.length).map(d => s.color(palette[randInt(0, 4)]));
},
draw: (s, t, g) => {
s.background(100);
//s.noStroke();
s.push()
s.translate(w*0.1, h*0.1);
s.scale(0.8, 0.8);
for (let i = 0; i < g.grid.length; ++i) {
let item = g.grid[i];
let col = s.map(item.w, 0, w*0.25, 255, 0)
let isBig = item.w > 50;
let colFill = isBig ? g.fillColors[i] : col;
let colStroke = isBig ? 0 : 200;
let strokeWeight = isBig ? 2 : 1;
s.fill(colFill);
s.stroke(colStroke);
s.strokeWeight(strokeWeight);
if(item.x > 50 && item.x < 70) {
//s.strokeWeight = 10;
//s.fill(0)
}
let tt = t + (i*0.1) % 1;
//if(item.w > w*0.05) {
let scale = tt;
s.rect(item.x, item.y, item.w, item.h);
//}
let isMid = item.w < 50 && item.w > 20;
if(isMid) {
s.circle(item.x + item.w/2, item.y + item.h/2, item.w/2);
}
}
s.translate(-w*0.1, -h*0.1);
s.pop()
/*for (let i = 0; i < g.buildingCount; ++i) {
let x = s.map(i, 0, g.buildingCount, 0, w);
let height = g.buildingHeights[i];
let width = w / g.buildingCount;
s.fill(g.buildingColors[i]);
s.rect(x, h, width, -height);
for (let j = 0; j < length; ++j) {
}
}*/
}
})
import {bnb} from '@makio135/bnb'
import {random, randInt, array, shuffle, linearstep, linearstepUpDown, divideRect, divideRect4} from '@makio135/utilities'
import {getRandomPalette, displayPalettes, scales, ramp} from '@makio135/give-me-colors'
easing = require('d3-ease')
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.
