I mix two fundamental disciplines, Graphic Design and Computer Programming, to make stuff.
Public
Edited
Oct 14, 2022
1 fork
1 star
{
const two = new Two({
type: Two.Types.canvas,
width: 200,
height: 200,
autostart: true
});
two.renderer.domElement.style.background = '#ccc';
const image = SpriteSheet.toDataURL('image/png');
const rows = 4;
const cols = 4;
const frameRate = 20;
const sprite = new Two.Sprite(image, two.width / 2, two.height / 2, cols, rows, frameRate);
two.add(sprite);
sprite.play();
return two.renderer.domElement;
}
SpriteSheet = {
var cols = 4;
var rows = 4;
var amount = cols * rows;
var canvas = document.createElement('canvas')
canvas.width = width;
canvas.height = width;
canvas.style.background = '#ccc';
var ctx = canvas.getContext('2d');
var two = new Two({
type: Two.Types.canvas,
width: width / cols,
height: width / rows,
ratio: 1
});
two.scene.translation.set(two.width / 2, two.height / 2);
for (var i = 0; i < amount; i++) {
generate();
var col = i % cols;
var row = Math.floor(i / cols);
var x = canvas.width * col / cols;
var y = canvas.height * row / rows;
ctx.drawImage(two.renderer.domElement, x, y);
}
function generate() {
var circle = two.scene.children[0];
if (!circle) {
circle = two.makeCircle(0, 0, two.width / 3);
circle.noStroke();
circle.fill = '#fff';
two.update();
}
var width = (Math.random() * 0.5 + 0.5) * two.width / 2;
var height = (Math.random() * 0.5 + 0.5) * two.height / 2;
for (var i = 0; i < circle.vertices.length; i++) {
var v = circle.vertices[i];
var pct = i / (circle.vertices.length - 1);
var theta = pct * Math.PI * 2;
v.x = width * Math.cos(theta);
v.y = height * Math.sin(theta);
}
circle.rotation = Math.random() * Math.PI * 2;
circle.scale = new Two.Vector(
(Math.random() * 0.75 + 0.25),
(Math.random() * 0.75 + 0.25)
);
circle._matrix.manual = true;
circle._matrix.identity()
.translate(circle.translation.x, circle.translation.y)
.rotate(circle.rotation)
.scale(circle.scale.x, circle.scale.y);
two.update();
}
return canvas;
}
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.
