Hello q5.js / Radamés Ajna

Radamés Ajna

Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.

Workspace

Published

Edited

Sep 14, 2020

7 stars

Experiments

Audio Worklet - Volume Monitoring RMS CSS Radial Gradient Generator Fast Video Seeking - Encoding Tests After Effects Motion Tracking Data Sorted Named Colors For Humans Diamond Theory: Symmetry in Binary Spaces Rough.js make your own text GT Flexa Variable Font Experiment background-position Scrubber Hello OGL - Minimal WebGL library

Hello q5.js

Hello Crank.js Scrubbing Youtube Video Experiment

Also listed in…

Libs

viewof canvasGrid = {

const q5 = new Q5();

q5.createCanvas(width, height);

const el = html`${q5.canvas}`;

el.value = q5;

yield el;

q5.colorMode(q5.HSB, 100);

q5.noStroke();

while (true) {

const osc = 0.5 + 0.5 * Math.sin(Date.now() / 1000);

q5.background(100 * osc, 10, 100);

q5.fill(0, 100, 0);

q5.textSize(Math.sin(osc * Math.PI) * 200);

q5.textAlign(q5.CENTER, q5.CENTER);

q5.text("q5.js", width / 2, height / 2);

q5.rect((width - w) * osc, 0, w, height);

q5.rect((width - w) * (1 - osc), 0, w, height);

q5.rect(0, osc * (height - w), width, w);

q5.rect(0, (1 - osc) * (height - w), width, w);

yield el;

}

viewof canvasNoise = {

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);

invalidation.then(() => q5.background(255));

let x = width / 2;

let y = height / 2;

let px = x;

let py = y;

while (true) {

for (let i = 0; i < speed; i++) {

x += q5.randomGaussian(0, step);

y += q5.randomGaussian(0, step);

x = x > width ? width : x < 0 ? 0 : x;

y = y > height ? height : y < 0 ? 0 : y;

q5.line(px, py, x, y);

px = x;

py = y;

}

yield el;

}

height = width > 600 ? (2 * width) / 3 : width

Q5 = require("q5xjs/q5.js").catch(() => window.Q5)

import { slider } from "@jashkenas/inputs"

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.

Learn more