EJ Fox & Ian Johnson
streaming data, code, acid, design
Published
Edited
Sep 14, 2020
2 forks
1 star
//endtime = new Date("2020-09-13T19:17:50.316")
deadlines = ({
"1hr": d3.timeHour.offset(new Date(), 1),
"15m": d3.timeMinute.offset(new Date(), 15)
})
height = 300
viewof canvas1 = {
const q5 = new Q5();
q5.createCanvas(width, height);
q5.background(255);
q5.randomSeed();
const el = html`${q5.canvas}`;
el.value = q5;
yield el;
const fontSize = 100;
q5.textSize(fontSize);
// q5.text('10 seconds', 300, height - q5.textSize() / 2);
invalidation.then(() => q5.background(255));
let x = width / 2;
let y = height / 2;
let px = x;
let py = y;
while (true) {
q5.background(255);
let now = moment(new Date());
let diffSeconds = moment(userdl).diff(now, "seconds");
q5.text(`${diffSeconds} seconds left`, 25, 100);
q5.fill("black");
yield el;
}
}
md`## Firebase stuff`
setdeadline = d3.timeMinute.offset(new Date(), 25).toString()
deadline = new Date("Sun Sep 13 2020 20:20:00 GMT-0700 (Pacific Daylight Time)")
+deadline
setters = {
// updates the scales (independently from the background)
let choices = [deadline];
choices.forEach((d, i) => {
if ([i] != d)
db.collection('deadlines')
.doc(i + "")
.set({ timestamp: +d });
});
return choices;
}
viewof userDeadlines = {
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.timestamp);
d3.select(u).text(docs.map(d => d.timestamp));
u.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
// whenever the users db is modified this callback should get called
db.collection("deadlines")
// .get("background")
.onSnapshot(onSnapshot);
return u;
}
userDeadlines[0]
new Date(userDeadlines[0])
userdl = userDeadlines[0]
viewof canvas2 = {
const q5 = new Q5();
q5.createCanvas(width, height);
// q5.background(255);
q5.randomSeed();
const el = html`${q5.canvas}`;
el.value = q5;
yield el;
invalidation.then(() => q5.clear());
let x = width / 2;
let y = height / 2;
let px = x;
let py = y;
while (true) {
// q5.background(255);
q5.clear();
let now = moment(new Date());
let diffSeconds = moment(new Date(userdl)).diff(now, "seconds");
let diffMinutes = moment(new Date(userdl)).diff(now, "minutes");
let diffSecondHand = d3.max([0, diffSeconds - diffMinutes * 60]);
q5.textSize(220);
q5.fill('black');
q5.text(`${diffMinutes}:${pad(diffSecondHand, 2)}`, 100, 250);
q5.textSize(48);
q5.text("TIME LEFT", width * 0.28, 70);
// q5.text(diffSecondHand, 180, 140);
yield el;
}
}
viewof enjalot = {
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const q5 = new Q5();
let mine = q5.createCanvas(width, height);
const el = html`${q5.canvas}`;
el.value = q5;
yield el;
invalidation.then(() => q5.clear());
let x = width / 2;
let y = height / 2;
let px = x;
let py = y;
while (true) {
q5.fill(colors[0]);
q5.rect(-10, -10, width + 20, height + 20);
// q5.clear();
let now = moment(new Date());
let diffSeconds = moment(userdl).diff(now, "seconds");
let diffMinutes = moment(userdl).diff(now, "minutes");
let diffSecondHand = d3.max([0, diffSeconds - diffMinutes * 60]);
q5.textSize(220);
q5.fill(colors[2]);
q5.textSize(enjasize);
// q5.text(`${clocks[diffMinutes - 1]}`, 50, 50);
enjaminutes.forEach(d => {
q5.text(`${d.clock}`, d.x, d.y);
});
enjaseconds.forEach(d => {
q5.text(`${d.clock}`, d.x, d.y);
});
q5.textSize(20);
q5.text(`${diffMinutes}:${pad(diffSecondHand, 2)}`, 50, height - 25);
// q5.text(diffSecondHand, 180, 140);
yield el;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
}
enjasize = 40
enjaMinuteWidth = 355
enjaSecondWidth = width - enjaMinuteWidth - 50
enjaminutes = {
let diffSeconds = moment(userdl).diff(now, "seconds");
let diffMinutes = moment(userdl).diff(now, "minutes");
let diffSecondHand = d3.max([0, diffSeconds - diffMinutes * 60]);
let size = enjasize + 10;
let w = 200;
let n = Math.floor(w / size);
let mins = d3.range(diffMinutes).map(i => {
return {
clock: clocks[i % 12],
i,
x: 50 + (i % n) * size,
y: 50 + Math.floor(i / n) * size
};
});
return mins;
}
enjaseconds = {
let diffSeconds = moment(userdl).diff(now, "seconds");
let diffMinutes = moment(userdl).diff(now, "minutes");
let diffSecondHand = d3.max([0, diffSeconds - diffMinutes * 60]);
let size = enjasize + 10;
let w = enjaSecondWidth;
let n = Math.floor(w / size);
let mins = d3.range(diffSecondHand).map(i => {
return {
clock: clocks[i % 12],
i,
x: enjaMinuteWidth + 10 + (i % n) * size,
y: 50 + Math.floor(i / n) * size
};
});
return mins;
}
clocks[0]
circleStepMax = 2
circleRadius = 10
viewof ej_15minute_canvas = {
let alpha = 0.5;
const q5 = new Q5();
q5.createCanvas(width, height);
// q5.background(255);
q5.randomSeed();
const el = html`${q5.canvas}`;
el.value = q5;
yield el;
// q5.strokeWeight(1);
// q5.stroke(0, 190);
// Text here
invalidation.then(() => q5.clear());
let x = width / 2;
let y = height / 2;
let px = x;
let py = y;
let circles = [];
const addCircle = function() {
circles.push({
x: chance.floating({ min: 0, max: width }),
y: chance.floating({ min: 0, max: height })
});
};
for (let c = 0; c < 1200; c++) {
addCircle();
}
while (true) {
// q5.background(255);
q5.clear();
let now = moment(new Date());
let diffSeconds = moment(userdl).diff(now, "seconds");
let diffMinutes = moment(userdl).diff(now, "minutes");
let diffSecondHand = d3.max([0, diffSeconds - diffMinutes * 60]);
// for (let i = 0; i < diffMinutes; i++) {
// const rndX = chance.floating({ min: 0, max: width });
// const rndY = chance.floating({ min: 0, max: height });
// q5.circle(rndX, rndY, 30);
// q5.fill(colors[2]);
// }
// for (let i = 0; i < diffSecondHand; i++) {
// const rndX = chance.floating({ min: 0, max: width });
// const rndY = chance.floating({ min: 0, max: height });
// q5.circle(rndX, rndY, 10);
// q5.fill("black");
// }
// circles = circles.slice(0, +diffSecondHand);
circles = circles.slice(0, +diffSeconds);
for (let i = 0; i < circles.length; i++) {
q5.circle(circles[i].x, circles[i].y, circleRadius);
if (chance.bool()) {
circles[i].x += chance.floating({
min: -circleStepMax,
max: circleStepMax
});
}
if (chance.bool()) {
// let yMax = _.max([i / 100, height]);
// circles[i].y += chance.floating({ min: -1, max: yMax });
circles[i].y += chance.floating({
min: -circleStepMax,
max: circleStepMax
});
}
if (circles[i].y > height) {
circles[i].y -= circleRadius * 1.5;
}
if (circles[i].x > width) {
circles[i].x = 0;
}
}
q5.textSize(220);
// q5.fill(colors[0]);
// q5.text(`${diffMinutes}:${pad(diffSecondHand, 2)}`, 100, 250);
q5.textSize(48);
q5.text("TIME LEFT", width * 0.28, 70);
// q5.text(circles.length, width * 0.28, 70);
// q5.text(diffSecondHand, 180, 140);
yield el;
}
}
//
//https://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
import { colors } from '@codingwithfire/coding-with-doom-fire'
moment = require("moment")
Q5 = require("https://cdn.jsdelivr.net/gh/LingDong-/q5xjs/q5.min.js").catch(
() => window.Q5
)
d3 = require("d3@6")
_ = require("lodash")
Chance = require("chance")
chance = new Chance()
db = app.firestore()
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.
