Computer Graphics & Visualization @ufrj.br
md`# Combinação Convexa`
viewof P = {
const ctx = DOM.context2d(width, height);
const canvas = ctx.canvas;
canvas.value = {x: width/2, y: height/2 } ;
const refresh = () => {
ctx.clearRect (0,0,width,height);
drawTriangle (ctx,A,B,C);
drawPoint (ctx, canvas.value);
};
ctx.canvas.onmousedown = function(e) {
canvas.value = {x:e.offsetX, y:e.offsetY};
refresh();
canvas.dispatchEvent (new CustomEvent ("input"))
}
refresh();
return canvas;
}
A = ({ x: width/2, y: 10 })
B = ({ x: width/2-width/8, y: height-20 })
C = ({ x: width/2+width/8, y: height-20 })
drawPoint = function(ctx, p) {
ctx.beginPath();
ctx.arc(p.x, p.y, 5, 0, 2*Math.PI);
ctx.fill();
}
drawTriangle = function(ctx, p1, p2, p3) {
ctx.beginPath();
ctx.moveTo(p1.x,p1.y);
ctx.lineTo(p2.x,p2.y);
ctx.lineTo(p3.x,p3.y);
ctx.closePath();
ctx.stroke();
drawPoint(ctx,p1);
drawPoint(ctx,p2);
drawPoint(ctx,p3);
}
tex.block`
\begin{cases}
\alpha_1 + \alpha_2 + \alpha_3 &= 1 \\
\alpha_1 A_x + \alpha_2 B_x + \alpha_3 C_x &= P_x \\
\alpha_1 A_y + \alpha_2 B_y + \alpha_3 C_y &= P_y \\
\end{cases}
`
tex.block`
\alpha_3 = \frac{(B_x-A_x)(P_y-A_y)-(B_y-A_y)(P_x-A_x)}{(B_x-A_x)(C_y-A_y)-(B_y-A_y)(C_x-A_x)}
`
alfa3 = ((B.x-A.x)*(P.y-A.y)-(B.y-A.y)*(P.x-A.x))/((B.x-A.x)*(C.y-A.y)-(B.y-A.y)*(C.x-A.x))
tex.block`
\alpha_2 = \frac{(P_x-A_x)}{(B_x-A_x)}-\alpha_3\frac{(C_x-A_x)}{(B_x-A_x)}
`
alfa2 = ((P.x-A.x)/(B.x-A.x))-alfa3*((C.x-A.x)/(B.x-A.x))
tex.block`
\alpha_1 = 1-(\alpha_2+\alpha_3)
`
alfa1 = 1 - (alfa2+alfa3)
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.
