Open
Description
Hello! Excelente work @zenozeng!
I think the title is very straight to the point, but I was wondering if would be possible to interact with my sketch using canvas to take advantage of the performance, and when I find a good enough result "convert" it to SVG in order to use it outside p5.js.
The result, in my case, is just an array of objects, so I think that would be possible, but I don't know-how.
Here is my sketch:
const size = 50;
const columns = size;
const lines = size;
let side;
let segments = []
function setup() {
createCanvas(720, 1200, SVG);
noStroke();
for (let y = 1; y < lines; y++) {
for (let x = 1; x < columns; x++) {
segments.push(new Segment((x * width) / columns, (y * height) / columns, 8))
}
}
}
function draw() {
clear()
background(0,72,217);
for(let i = 0; i <segments.length; i++){
if(dist( segments[i].x, segments[i].y,mouseX,mouseY) < 200){
segments[i].update(mouseX, mouseY);
}
segments[i].display(mouseX, mouseY);
}
}
function Segment(tx, ty, ts) {
this.x = tx;
this.y = ty;
this.size = ts;
this.angle = 0;
this.update = function(mx, my) {
this.angle = atan2(my - this.y, mx - this.x);
};
this.display = function() {
push();
translate(this.x, this.y);
rotate(this.angle - radians(45));
stroke(255)
line(0,0,this.size, this.size)
pop();
};
}Thanks!
Metadata
Metadata
Assignees
Labels
No labels