Public
Edited
Nov 16, 2024
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(500, 500);
};
sketch.draw = function() {
sketch.push();
sketch.background(240);
sketch.translate(sketch.width/2, sketch.height/2);
//sketch.circle(100,50,10);
let p1 = A;
let p2 = B;
let p3 = C;
desenhaPonto(sketch,A);
desenhaPonto(sketch,B);
desenhaPonto(sketch,C);
sketch.line(A[0],A[1],C[0],C[1]);
sketch.line(B[0],B[1],C[0],C[1]);
let t = sketch.constrain(sketch.mouseX/sketch.mouseY,0,1);
let p4 = [(1-t)*p1[0] + t*p3[0], (1-t)*p1[1] + t*p3[1]];
let p5 = [(1-t)*p3[0] + t*p2[0], (1-t)*p3[1] + t*p2[1]];
desenhaPonto(sketch,p4);
desenhaPonto(sketch,p5);
sketch.line(p4[0],p4[1],p5[0],p5[1]);
let p6 = [(1-t)*p4[0] + t*p5[0], (1-t)*p4[1] + t*p5[1]];
desenhaPonto(sketch,p6);
sketch.fill(35,43,22);
sketch.line(p6[0],p6[1]);
sketch.lerp(p6[0],p6[1],t);
sketch.pop();
}
})
function desenhaPonto(sketch, P) {
sketch.circle(P[0],P[1],10);
}
function pontoNoSegmento(A,B,C,t) {
C[0] = A[0] + t*(B[0]-A[0]);
C[1] = A[1] + t*(B[1]-A[1]);
}
A = [ -100, 50]
B = [100, 50]
C = [10, -100]
import {p5} from "@tmcw/p5"
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.
