/
15_lic3.html
114 lines (89 loc) · 3.7 KB
/
15_lic3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cindy JS</title>
<script type="text/javascript" src="../../build/js/Cindy.js"></script>
<script type="text/javascript" src="../../build/js/CindyGL.js"></script>
<link rel="stylesheet" href="../../css/cindy.css">
</head>
<body style="font-family:Arial;">
<h1>CindyJS: Lagrangian-Eulerian Advection of Noise</h1>
<p>
Implementation of Jobard, Bruno; Erlebacher, Gordon; Hussaini, M. Yousuff (2002). "Lagrangian-Eulerian Advection of Noise and Dye Textures for Unsteady Flow Visualization"
</p>
<script id="csinit" type="text/x-cindyscript">
use("CindyGL");
L = [0, 0]; //bottom left corner
R = [512, 0]; //bottom right corner
createimage("Cfract", 512, 512);
createimage("N", 512, 512);
createimage("Nb", 512, 512);
colorplot(L, R, "Cfract", (random(), random(), 0)); //the fractional parts of the coordinates (Cx, Cy) (see paper)
colorplot(L, R, "N", round(random()));
v(x) := (
f1=(x-A)/abs(x-A)^3;
f2=(x-B)/abs(x-B)^3;
res=f1-f2;
//r = min(1, max(.2, abs(res)));
res/abs(res)//*r
); //vector field
h = 1;
getNewC(pc) := (
col = imagergb(L, R, "Cfract", pc);
curC = (floor(pc.x)+col.x, floor(pc.y)+col.y);
curC - h*v(pixel2coord(curC)); //euler step in the past
)
</script>
<script id="csdraw" type="text/x-cindyscript">
pixel2coord(x) := x/512*4+(-2,-2);
color(x) := (
z = v(pixel2coord(x));
hue(arctan2(z.y, z.x)/2/pi)+gray(.5)
);
colorplot(L, R, "N",
newC = getNewC(#);
newval = if(newC.x > 0 & newC.y > 0 & newC.x<512 & newC.y < 512,
imagergb(L, R, "N", (floor(newC.x)+.5, floor(newC.y)+.5)), //NEAREST interpolation.
round(random())*color(newC)
);
//newval = if(abs(mouse().xy - pixel2coord(#)) < 0.1, (0,0,0), newval);
newval = if(abs(A.xy - pixel2coord(#)) < 0.05, round(random())*color(#), newval);
newval = if(abs(B.xy - pixel2coord(#)) < 0.05, round(random())*color(#), newval);
if(random()>.01, newval, round(random())*color(#)) //sometimes flip (noise injection to "counteract duplication effect")
);
alpha = 0.02;
colorplot(L, R, "Nb", //exponentially blended images of linearly interpolated noise images
// newC = getNewC(#);
// Na = if(newC.x > 0 & newC.y > 0 & newC.x<512 & newC.y < 512,
// imagergb(L, R, "N", (newC.x, newC.y)), //linear interpolation
// random()
// );
Na = imagergb(L, R, "N", #);
alpha*Na + (1-alpha)*imagergb(L, R, "Nb", #)
);
colorplot(L, R, "Cfract",
newC = getNewC(#);
(newC.x-floor(newC.x), newC.y-floor(newC.y), 0)
);
drawimage([-2, -2], [2, -2], "Nb");
</script>
<div id="CSCanvas" style="position:relative; top:10px;"></div>
<script type="text/javascript">
cdy = CindyJS({canvasname:"CSCanvas",
scripts: "cs*",
geometry:[
{name:"A", kind:"P", type:"Free", pos:[.5 ,.5],size:3},
{name:"B", kind:"P", type:"Free", pos:[-.5 ,-.5],size:3}
],
animation: {autoplay: true},
ports: [{
id: "CSCanvas",
width: 512,
height: 512,
transform: [ { visibleRect: [-2, -2, 2, 2] } ]
}]
});
</script>
</body>
</html>