height = width
p5((s) => {
let speed = 0.01;
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.translate(width / 2, height / 2);
s.background(0);
s.stroke(255);
s.strokeCap(s.SQUARE);
s.strokeWeight(1);
s.noFill();
s.stroke(0, 255, 255);
for (let index = 0; index < 300; ++index) {
s.translate(0, 1);
s.shearX((s.PI * 2) / 300);
s.beginShape();
s.vertex(
s.cos(s.frameCount * speed) * 100,
-100 - s.sin(s.frameCount * speed) * 100
);
s.vertex(
100 + s.sin(s.frameCount * speed) * 100,
s.cos(s.frameCount * speed) * 100
);
s.vertex(
-100 - s.sin(s.frameCount * speed) * 100,
-s.cos(s.frameCount * speed) * 100
);
s.vertex(
-s.cos(s.frameCount * speed) * 100,
100 + s.sin(s.frameCount * speed) * 100
);
s.endShape(s.CLOSE);
}
s.resetMatrix();
s.stroke(255, 255, 0);
for (let index = 0; index < 300; ++index) {
s.translate(0, 1);
s.shearX((s.PI * 2) / 300);
s.beginShape();
s.vertex(
100 + s.sin(s.frameCount * speed) * 100,
s.cos(s.frameCount * speed) * 100
);
s.vertex(
s.cos(s.frameCount * speed) * 100,
-100 - s.sin(s.frameCount * speed) * 100
);
s.vertex(
-100 - s.sin(s.frameCount * speed) * 100,
-s.cos(s.frameCount * speed) * 100
);
s.vertex(
-s.cos(s.frameCount * speed) * 100,
100 + s.sin(s.frameCount * speed) * 100
);
s.endShape(s.CLOSE);
}
//
// s.strokeWeight(2);
// s.stroke(255, 255, 0);
// for (let x = -100; x <= 100; x += 4) {
// s.shearX(s.frameCount * 0.001);
// s.line(x, -100, x, 100);
// }
// s.stroke(0, 255, 255);
// s.rotate(s.frameCount * 0.001);
// for (let x = -100; x <= 100; x += 4) {
// s.shearY(s.frameCount * 0.001);
// s.line(x, -100, x, 100);
// }
};
})
p5((s) => {
let speed = 0.01;
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
// s.translate(width / 2, height / 2);
s.background(0);
s.stroke(255);
s.strokeCap(s.SQUARE);
s.strokeWeight(1);
s.noFill();
s.stroke(0, 255, 255);
for (let index = 0; index < 300; ++index) {
s.translate(0, 1);
s.shearX((s.PI * 2) / 300);
s.line(s.mouseX, s.mouseY, width - s.mouseX, height - s.mouseY);
}
// s.resetMatrix();
// s.stroke(255, 255, 0);
// for (let index = 0; index < 300; ++index) {
// s.shearY(0.01);
// s.line(s.mouseX, s.mouseY, width - s.mouseX, height - s.mouseY);
// }
// s.resetMatrix();
// s.stroke(255, 0, 255);
// // s.translate(width / 2, height / 2);
// for (let index = 0; index < 300; ++index) {
// s.shearY(0.01);
// s.shearX(0.01);
// s.line(s.mouseX, s.mouseY, width - s.mouseX, height - s.mouseY);
// }
//
// s.strokeWeight(2);
// s.stroke(255, 255, 0);
// for (let x = -100; x <= 100; x += 4) {
// s.shearX(s.frameCount * 0.001);
// s.line(x, -100, x, 100);
// }
// s.stroke(0, 255, 255);
// s.rotate(s.frameCount * 0.001);
// for (let x = -100; x <= 100; x += 4) {
// s.shearY(s.frameCount * 0.001);
// s.line(x, -100, x, 100);
// }
};
})
p5((s) => {
let speed = 0.01;
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.translate(width / 2, height / 2);
s.background(0);
s.stroke(255);
s.strokeCap(s.SQUARE);
s.strokeWeight(1);
s.noFill();
s.stroke(0, 255, 255);
for (let index = 0; index < 300; index++) {
s.translate(index * s.mouseX * 0.1, 0);
s.ellipse(0, 0, 400, 400);
}
//
// s.strokeWeight(2);
// s.stroke(255, 255, 0);
// for (let x = -100; x <= 100; x += 4) {
// s.shearX(s.frameCount * 0.001);
// s.line(x, -100, x, 100);
// }
// s.stroke(0, 255, 255);
// s.rotate(s.frameCount * 0.001);
// for (let x = -100; x <= 100; x += 4) {
// s.shearY(s.frameCount * 0.001);
// s.line(x, -100, x, 100);
// }
};
})
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.
