Consultant Designer & Developer
Tailwind CSSUtils: ArraysRams PaletteMindfully curated color palettes by mymindCORS Proxy using CorsProxy.ioDownload HTML as ImagePrint HTML ElementSubstratumClearable StoreChange CaseWhitespace charactersPretty TablesUtils: ObjectNotebook URLSeed ButtonHelper functions: 3D Geometryμ LodashGenerate a color palettePoisson SamplingRatiosHelper functions: GeometryFit ‘N’ number of squares in a rectanglePDF ViewFeather IconsUse Tachyons CSS in ObservableGenerate a Contrasting Random Colorcanvas-sketch-utilp5.js Kit for ObservableSVG.js Wrapper
Timer
timer(240)
timer(240, 2)
/**
* Generates timing parameters based on total frame and FPS
*
* @generator
* @param {number} [totalFrames=120] The total frames
* @param {number} [fps=60] The FPS
* @yields {object} The timer object: frame, playhead, totalFrames and FPS
*/
function* timer(totalFrames = 120, fps = 60) {
const step = fps / 60;
let frame = 0;
while (true) {
frame = frame < totalFrames ? frame + step : 0;
const frameFloor = Math.floor(frame);
const playhead = frameFloor / totalFrames;
yield {
frame: frameFloor,
fps,
totalFrames,
playhead
};
}
}
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.
