EJ Fox & Ian Johnson
streaming data, code, acid, design
Coding With Fire - Crowd Control Color Palette
viewof userColors = {
let u = html`<div></div>`;
function onSnapshot(qs) {
let docs = qs.docs.map(d => {
let data = { id: d.id, ...d.data() };
return data;
});
console.log(docs);
// choice.value = docs[0].hex;
u.value = docs.map(d => d.hex);
d3.select(u).text(docs.map(d => d.hex));
u.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
// whenever the users db is modified this callback should get called
db.collection("colors")
// .get("background")
.onSnapshot(onSnapshot);
return u;
}
colors = [setter].concat(userColors.slice(0, 5))
// c = d3.scaleSequential(d3[scheme]).domain([steps, 0]) // create a color scale for the selected scheme and number of steps
// found interpolateRbgBasis in
c = function(n) {
return d3.interpolateRgbBasis(colors)(n/steps)
}
framedelay = 62
context = {
// initialize the canvas
let ctx;
if (this) {
ctx = this;
if (ctx.interval) clearInterval(ctx.interval);
} else {
ctx = DOM.context2d(width, height);
ctx.canvas.width = width;
ctx.canvas.height = height;
ctx.canvas.id = "canvas";
ctx.canvas.style.width = "100%";
ctx.canvas.style.imageRendering = "pixelated";
if (!ctx.canvas.style.imageRendering) {
ctx.canvas.style.imageRendering = "crisp-edges";
}
}
// animation loop
function animate() {
// BURN
pixels.forEach(spreadFire);
// get canvas image data
let color = ctx.getImageData(0, 0, width, height);
pixels.slice(width).forEach((p, i) => {
let pixel = palette[p];
let offset = i * 4;
color.data[offset + 0] = pixel.r;
color.data[offset + 1] = pixel.g;
color.data[offset + 2] = pixel.b;
color.data[offset + 3] = 255;
});
// replace canvas with updated pixel data
ctx.putImageData(color, 0, 0);
}
ctx.interval = setInterval(animate, framedelay);
return ctx;
}
spreadFire = (pixel, src) => {
// this is the core algorithm behind
// the doom fire technique
if (pixel === 0) {
pixels[src - width] = 0;
} else {
// generate a random number between 0-3
let randIdx = Math.round(Math.random() * 3);
// use the random number to offset the value
// of the current pixel
let dst = src - randIdx + 1;
// grab the value of the index in the row
// beneath the current row?
pixels[dst - width] = pixel - (randIdx & 1);
}
}
firebaseConfig = ({
apiKey: "AIzaSyCXVpNv-wY1r8LIfvZjFsnB-rxo7wK7Csc",
authDomain: "cwf-ej-enj.firebaseapp.com",
databaseURL: "https://cwf-ej-enj.firebaseio.com",
projectId: "cwf-ej-enj",
storageBucket: "cwf-ej-enj.appspot.com",
messagingSenderId: "824648798292",
appId: "1:824648798292:web:70197a68c08e6f923dddc1",
measurementId: "G-0YF53DB757"
})
app = {
let app = firebase.initializeApp(firebaseConfig);
// firebase.analytics();
// firebase.auth().useDeviceLanguage();
return app;
}
firebase = require.alias({
"@firebase/app": "https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js",
// "@firebase/auth": "https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js",
// "@firebase/analytics":
// "https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js",
"@firebase/firestore":
"https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"
})(
"@firebase/app",
// "@firebase/auth",
// "@firebase/analytics",
"@firebase/firestore"
)
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.
