Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Jun 2, 2021
21 stars
twitch("1042542014")
viewof smoothness = Inputs.range([1, 1000], {
label: "Smoothness",
step: 1,
value: 30
})
viewof power = Inputs.range([1, 10], {
label: "power",
step: 1,
value: 2
})
<svg width=${width}>
${_.range(width).map(d => {
//return svg`<circle cx=${d} cy=${simplex.noise2D(d / smoothness, 1) * 25 + 25} r=1></circle>`
return svg`<circle cx=${d} cy=${prng.rand(0, 150)} r=1></circle>`
})}
</svg>
seed = Date.now()
prng = new PRNG(seed)
import {random, randInt, expRand, PRNG} from '@makio135/utilities'
easings = require('d3-ease')
funplot(easings[easing], { xdomain: [0, 1], ydomain: [0, 1] })
funplot(x => easings[easing](linearstepUpDown(x, .2, .5, .8, 1)), { xdomain: [0, 1], ydomain: [0, 1] })
import {step, smoothstep, linearstep, linearstepUpDown} from '@makio135/utilities'
// Goes from 0 to 1: "%" is the "modulo" operator, which gives you the remainder
time = Math.floor((now / 30) % 100) / 100
easings[easing](linearstepUpDown(time, 0.2, 0.5, 0.8, 1))
<svg width=${width}>
<circle cx=${width/2} cy=${easings[easing](linearstepUpDown(time, 0.2, 0.5, 0.8, 1))*100} r=50 fill="#BADA55"></circle>
</svg>
import {bnb} from '@makio135/bnb'
bnb({
w: 540,
h: 540,
numFrames: 60,
fps: 20,
record: true,
//video: true,
chromaticAberration: .5,
shutterAngle: .6,
samplesPerFrame: 16,
shaderPass: `
precision mediump float;
uniform vec2 u_resolution;
uniform sampler2D u_texture;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution;
uv.y = 1. - uv.y;
vec3 c = texture2D(u_texture, uv).rgb;
if(uv.x > uv.y) c = vec3(1) - c;
gl_FragColor = vec4(c, 1.);
}
`,
setup: (s, g) => {
g.n = 150;
g.offset = _.range(g.n).map((d) => Math.random());
g.offsetX = _.range(g.n).map((d) => random(-50, 50));
g.offsetY = _.range(g.n).map((d) => random(-50, 50));
},
draw: (s, t, g) => {
s.background(0);
_.range(g.n).map((d, i) => {
const cx =
150 + g.offsetX[i] +
easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.1, 0.5)) *
240;
const cy =
150 + g.offsetY[i] +
easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.6, 1.0)) *
240;
const r = 40;
s.circle(cx, cy, r);
s.circle(
s.width + g.offsetX[i] -
(150 +
easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.1, 0.5)) *
240),
s.height + g.offsetY[i] -
(150 +
easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.6, 1.0)) *
240),
r
);
});
// s.circle(
// 150 + easings.easeQuadInOut(linearstep(t, 0.1, 0.5)) * 200,
// 150 + easings.easeQuadInOut(linearstep(t, 0.6, 1.0)) * 200,
// 150
// );
// s.fill(255, 204, 0);
// s.circle(
// s.width - (150 + easings.easeQuadInOut(linearstep(t, 0.1, 0.5)) * 200),
// s.height - (150 + easings.easeQuadInOut(linearstep(t, 0.6, 1.0)) * 200),
// 150
// );
}
})
// Require a library for generating simplex noise
SimplexNoise = require("simplex-noise@2.4")
// Create a new instance of our simplex noise object
simplex = new SimplexNoise()
<style>
.node text {
fill:#b42be0;
font-family:sans-serif;
font-weight:100;
}
.node ellipse, .edge {
opacity:.3;
}
</style>
// This is Lionel's work, forked so that it could be imported as a named import
import { output } from "@mkfreeman/generating_svgs"
import { swivelBlocks } from "@mattdzugan/cube-swivel-loop"
import { funplot } from "@mbostock/funplot"
import { twitch } from "@codingwithfire/twitch"
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.
