Skip to content

Instantly share code, notes, and snippets.

@Raj9039852537
Last active January 7, 2019 08:13
Show Gist options
  • Save Raj9039852537/0f689e22c4a8397dc448eacad1a877a7 to your computer and use it in GitHub Desktop.
Save Raj9039852537/0f689e22c4a8397dc448eacad1a877a7 to your computer and use it in GitHub Desktop.
KbZqYM
script.
window.canvasOptions = {
autoClear: true,
autoCompensate: false,
autoPushPop: true,
canvas: true,
centered: true,
width: null,
height: null
};
// Based on: https://twitter.com/jn3008_/status/1070806655514959872
let points = [];
let weights = [];
let size = 600;
function setup() {
let weightCount = 5;
for(let i = 0; i < weightCount; i++) {
weights.push(createVector(size * 0.3, 0).rotate(i / weightCount * TAU));
}
let count = 17 * 4;
for(let y = 0; y < count; y++) {
for(let x = 0; x < count; x++) {
let p = createVector(x, y);
if(x % 2 === 1) {
p.addY(0.5);
}
if(p.y > count - 1) {
continue;
}
p.div(count - 1).sub(0.5).mult(size);
p._mag = p.mag();
if(p._mag > size * 0.5) {
continue;
}
points.push(p);
p.extraRot = p._mag / size * TAU * 2;
p.closestWeight = { w: p, dist: Infinity };
for(let w of weights) {
let d = p.dist(w);
if(d < p.closestWeight.dist) {
p.closestWeight = { w, dist: d };
}
}
p.closestWeight.dist_ = p.closestWeight.dist * 0.01;
// p.v = createVector(p.closestWeight.dist * 0.075, 0);
p.v = createVector(ease.cubic.out(p.closestWeight.dist, 10, size * 0.075 - 10, size), 0);
p.ease = ease.cubic.inOut(size - p.closestWeight.dist, 1, -2, size) * TAU * 2;
// p.lerp(p.closestWeight.w, (1 - p.closestWeight.dist / size) * 0.6);
}
}
}
function draw(e) {
// background(hsl(0, 0, 8, 0.05));
let time = e * 0.008;
let time_ = -time * 0.3;
beginPath();
for(let p of points) {
let v = p.v._.mult(sin(time_ + p.closestWeight.dist_ + p.extraRot))
.rotate(p.ease + time)
.add(p);
circle(v.x, v.y, 1.2);
// line(p, v);
}
let grad = createRadialGradient(0, 0, 0, 0, 0, size * 0.5);
grad.addColorStop(0, hsl(0, 0, 100));
// grad.addColorStop(0.3, hsl(0, 0, 100, 0.9));
// grad.addColorStop(0.8, hsl(0, 0, 100, 0.1));
// grad.addColorStop(1, hsl(0, 0, 100, 0));
// grad.addColorStop(0.8, hsl(0, 0, 100));
// grad.addColorStop(1, hsl(0, 0, 100, 0));
fill(grad);
// stroke(grad);
}
<script src="https://codepen.io/Alca/pen/XeZBab"></script>
<link href="https://codepen.io/Alca/pen/XeZBab" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment