EJ Fox & Ian Johnson
streaming data, code, acid, design
sketch = p5(sketch => {
let canvas;
let div;
sketch.setup = function() {
canvas = sketch.createCanvas(width, height);
sketch.noLoop();
sketch.pixelDensity(2);
};
function drawElements(points) {
points.forEach(d => {
if (d.r) {
// reset the stroke
sketch.strokeWeight(0);
sketch.fill(d.fill);
sketch.ellipse(Math.round(d.x), Math.round(d.y), d.r, d.r);
}
if (d.x0) {
sketch.stroke(d.fill);
sketch.strokeWeight(d.lineWidth);
sketch.line(d.x0, d.y, d.x1, d.y);
}
});
}
sketch.draw = function() {
// sketch.background('#F7F7F7');
sketch.background(colors[0]);
sketch.noStroke();
// drawPoints(testPoints);
patterns.forEach(points => {
drawElements(points);
});
// qr.toCanvas(`${document.baseURI}${hashPath}`);
var img = new Image();
let ctx = canvas.canvas.getContext("2d");
img.onload = function() {
ctx.drawImage(img, 10, height - 250); // Or at whatever offset you like
};
let datauri = qrcode;
img.src = datauri;
};
})
// qr.toCanvas(`${document.baseURI}${hashPath}`)
patterns = {
let chance = new Chance(seed);
function pattern1(i) {
let rndx0 = chance.floating({ min: 0, max: width / 2 });
let rndx1 = chance.floating({ min: rndx0, max: width });
let rndy0 = chance.floating({ min: height / 2, max: height });
let rndy1 = chance.floating({ min: rndy0, max: height });
// let r = chance.floating({ min: 0.25, max: height * 0.02 });
let r = chance.floating({ min: radiusRange[0], max: radiusRange[1] });
let offset = r * chance.floating({ min: 0.95, max: 3.5 });
let fill = chance.pick(colors);
if (i !== 0 && chance.bool({ likelihood: 33 })) fill = colors[0];
// drawPattern1(rndx0, rndx1, rndy0, rndy1, r, offset, fill);
return generatePattern1(
chance,
rndx0,
rndx1,
rndy0,
rndy1,
r,
offset,
fill
);
}
function pattern2(i) {
let rndx0 = chance.floating({ min: 0, max: width / 2 });
let rndx1 = chance.floating({ min: rndx0 + 25, max: width / 2 + rndx0 });
let rndy0 = chance.floating({ min: 0, max: height / 2 });
let rndy1 = chance.floating({ min: rndy0 + 25, max: height / 2 + rndy0 });
let lineWidth = chance.floating({ min: 0.2, max: 2 });
let offset = lineWidth * chance.floating({ min: 0.9, max: 5 });
let fill = chance.pick(colors);
if (i !== 0 && chance.bool({ likelihood: 33 })) fill = colors[0];
// drawPattern2(rndx0, rndx1, rndy0, rndy1, offset, lineWidth, fill);
return generatePattern2(
chance,
rndx0,
rndx1,
rndy0,
rndy1,
offset,
lineWidth,
fill
);
}
let patterns = [];
let circles = Math.round(patternCount * .7);
let lines = Math.round(patternCount * .3);
for (let i = 0; i < circles; i++) {
patterns.push(pattern1(i));
}
for (let i = 0; i < lines; i++) {
patterns.push(pattern2(i));
}
return patterns;
}
generatePattern1 = function(
chance,
x0,
x1,
y0,
y1,
circleRadius = 4,
circleOffset = 10,
fill = "black",
margin = 25,
) {
let nodes = [];
let sizeChange = chance.bool({ likelihood: 20 });
let skipCircles = chance.bool({ likelihood: 10 });
let sizeChangeSmaller = chance.bool({ likelihood: 80 });
let sizeChangeAmount = chance.floating({ min: 0.001, max: 0.004 });
x0 += margin;
x1 -= margin;
y0 += margin;
y1 -= margin;
if (chance.bool({ likelihood: 10 })) x0 = margin;
if (chance.bool({ likelihood: 10 })) x1 = width - margin;
if (chance.bool({ likelihood: 10 })) y0 = margin;
if (chance.bool({ likelihood: 10 })) y1 = height - margin;
let r = circleRadius;
for (let x = x0; x <= x1; x += circleOffset) {
for (let y = y0; y <= y1; y += circleOffset) {
if (chance.bool({ likelihood: 25 }) && sizeChange && sizeChangeSmaller)
r -= r * sizeChangeAmount;
else if (chance.bool({ likelihood: 25 }) && sizeChange) {
r += r * sizeChangeAmount;
if (chance.bool({ likelihood: 25 }))
circleOffset += r * sizeChangeAmount;
}
nodes.push({
x: x,
y: y,
r: r,
fill: fill
});
// sketch.fill(fill);
// if (!skipCircles) {
// sketch.ellipse(Math.round(x), Math.round(y), r, r);
// } else if (chance.bool({ likelihood: 99 }) && skipCircles) {
// sketch.ellipse(Math.round(x), Math.round(y), r, r);
// }
}
}
return nodes;
}
generatePattern2 = function(
chance,
x0,
x1,
y0,
y1,
lineOffset = 10,
lineWidth = 0.5,
fill = "black",
margin = 10
) {
let nodes = [];
x0 += margin;
x1 -= margin;
y0 += margin;
y1 -= margin;
let lineStretch = chance.bool({ likelihood: 10 });
for (let y = y0; y <= y1; y += lineOffset + lineWidth) {
if (lineStretch)
lineOffset += lineWidth * chance.floating({ min: 0.1, max: 1.2 });
nodes.push({
x0: x0,
x1: x1,
y: y,
fill: fill,
lineWidth: lineWidth,
lineOffset: lineOffset
});
}
return nodes;
}
testPoints = generatePattern1(new Chance(seed), 100, 500, 100, 700)
seed = urlVariables["seed"] || 42
import { colors } from '@codingwithfire/coding-with-doom-fire'
qr = require('https://unpkg.com/qrcode@1.4.4/build/qrcode.min.js')
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.
