<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cindy JS</title>
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<link rel="stylesheet" href="../css/cindy.css" />
</head>
<body style="font-family: Arial">
<h1>CindyJS: imagergb3</h1>
<script id="csmove" type="text/x-cindyscript">
drawimage(A, B, "rost");
dim=imagesize("rost");
p = linereflect(line([0,-2, dim_2]))*map(A, B, (0, 0), (dim_1, 0))*C.homog; //pixel-coordinates starting from upper left corner
col = imagergb("rost", p_1/p_3, p_2/p_3);
C.color = (col_1, col_2, col_3)/255;
C.alpha = .5*col_4+.5;
forall((0..dim_1/20)*20,i,
forall((0..dim_2/20)*20,j,
col = imagergb("rost",i,j);
draw((i,-j)*.03, color->(col_1,col_2,col_3)/255,
alpha->col_4) // border->false not supported yet
)
);
createimage("testcanvas", 100, 100);
canvas(A, B, "testcanvas", fillcircle(A, |A,B|/2, alpha->0.5, color->(1,0,0)));
drawimage(A, B, "testcanvas");
p = linereflect(line([0,-2, 100]))*map(A, B, (0, 0), (100, 0))*D.homog; //pixel-coordinates starting from upper left corner
col = imagergb("testcanvas", p_1/p_3, p_2/p_3);
D.color = (col_1, col_2, col_3)/255;
D.alpha = .5*col_4+.5;
</script>
<div id="CSCanvas" style="width: 500px; height: 500px; border: 2px solid #000000"></div>
<script type="text/javascript">
var gslp = [
{ name: "A", kind: "P", type: "Free", pos: [-4, -8, 1] },
{ name: "B", kind: "P", type: "Free", pos: [4, -8, 1] },
{ name: "C", kind: "P", type: "Free", pos: [0, 3, 1], size: 10 },
{ name: "D", kind: "P", type: "Free", pos: [-3, -7, 1], size: 10 },
];
CindyJS({ canvasname: "CSCanvas", movescript: "csmove", geometry: gslp, images: { rost: "rost.png" } });
</script>
</body>
</html>