This repository was archived by the owner on Oct 25, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathpattern.html
More file actions
186 lines (186 loc) · 15.3 KB
/
pattern.html
File metadata and controls
186 lines (186 loc) · 15.3 KB
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function closeWindow() {
window.open('','_parent','');
window.close();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Aleksandar Rodić - Renderman Portfolio - ST Coloration - Winter Quarter @ SCAD 2009 - Prof. Malcolm Kesson</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<meta content="Aleksandar, Rodic, renderman, portfolio, 3d, design, modeling, programing, Savannah, collage, art, malcolm, kesson, rendering, render, model, texture, procedure, script, maya, image," name="keywords" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-258449-38");
pageTracker._trackPageview();
} catch(err) {}</script>
</head>
<body>
<div id="header">
<a href="index.html" target="_self">WorldBegin</a>
<a href="matrix.html" target="_self">MatrixComp</a>
<a href="lod.html" target="_self">LevelOfDetail</a>
<a href="st.html" target="_self">StColoration</a>
<a href="pattern.html" target="_self">PatternAnim</a>
<a href="fire.html" target="_self">Fire</a>
</div>
<div id="wrapper">
<div id="scroll">
<a href="matrix.html" target="_self">
<h1>Pattern Animation</h1>
</a>
<embed src="videos/Pong_final.mov" width="750" height="436" autoplay="false" controller="true" loop="False" style="margin:0 15px;" > </embed>
<div class="container">
<p>
<embed src="videos/pong_simulation.mov" width="240" height="254" AUTOPLAY=false CONTROLLER=true LOOP=true class="left" style=" margin-right:8px;"> </embed>
<img src="images/rigid_settings.jpg" alt="rigid body dynamics settings" width="324" height="112" class="right" style="margin-left:8px;" />The animation and notes on this page explain how custom shaders written in the RenderMan Shading Language can be animated using Maya. As I mentioned on <a href="st.html"><u>StColoration page</u></a>, I wanted to animate shader with data from dynamic simulation in Maya. Simulation includes 4 passive and one active rigid body. There is no friction between them and they have bounciness value of 1. With these settings, the initial speed of the ball is constant and the simulation can run indefinitely. The crucial part of the simulation is behavior of the players. For this purpose I made a simple algorithm in a single line of MEL code. The behavior is controlled by the position of the ball and a noise function.
As shown in the following code, the player's position is driven by Y position of the ball when the ball is closest to the player. When the ball is furthest, on the other hand, position of the player is function of noise and time.</p>
<div class="code" style="width:730px; margin:4px; margin-left:0;">
<p><strong>player2_move.translateY=</strong><br />
ball.translateY*(-(ball.translateZ-4.8)/10)+(noise(time)/2)*(ball.translateZ-4.8);</p>
<p><strong>player1_move.translateY=</strong><br />
ball.translateY*(-(-ball.translateZ-4.8)/10)+(noise(time+1000)/2)*(-4.8+ball.translateZ</p>
</div>
<p><br />
</p>
<p> To make the transition from one behavior to another gradual, I multiplied each behavior with opposite value of the ball's Z position relative to the distance between the players. To make behaviors of the two players off-sync I added 1000 to player's one time in noise function.</p>
</div>
<div class="container">
<p>
<embed src="videos/Pong_preview.mov" autoplay="false" controller="true" loop="True" width="320" height="194" class="left" style="margin-right:8px;"> </embed>
This video shows the development of the shader. At the beginning, there was only constant value output. Then, I added diffuse and specular component. And lastly, I made the white pixels constant because I wanted them to appear like light emitters. Also, at the end of this video you can see the results of the first experiments with the raster and analog video interference effect.<a href="code/pong.sl"> You can <u>download the shader here</u>.</a> <a href="code/pong.sl">Detailed explanation of the "pong screen shader" fallows.</a> parts of the shader explined in the StColoration page are grayed ot.</p>
</div>
<div class="container" style=" text-align:left;">
<p class="comment">//Basic Shader Declarations</p>
<p>surface pong( <span class="grey">float Kd = 0.6, /* [0 10]*/<br />
Ks = 0.8, /* [0 10]*/<br />
roughness = 0.1,</span><br />
<span class="grey"> player1 = 0.5, /* [0 1]*/<br />
player2 = 0.2, /* [0 1]*/<br />
ballY = 0.5, /* [0 1]*/<br />
ballX = 0.2, /* [0 1]*/</span><br />
offset = 0, /* [-1 1]*/ <span class="comment">/* shifts the entire image up and down */</span><br />
freq1 = 0, /* [0 1000 1]*/ <span class="comment">/* freq1 for sine interference */</span><br />
freq2 = 0, /* [0 1000 1]*/ <span class="comment">/* freq2 for sine interference */</span><br />
freq3 = 0, /* [0 1000 1]*/ <span class="comment">/* freq3 for sine interference */</span><br />
amplitude = 0, /* [0 100]*/ <span class="comment">/* amp for sine interference */</span><br />
separation = 1, /* [0 1] */ <span class="comment">/* rgb raster/constant white blending*/</span><br />
noiselevel = 1, /* [0 1] */ <span class="comment">/* the ammount of noise */</span><br />
frame = 0; <span class="comment">/* used for noise animation */</span><br />
<span class="grey"> color hiliteColor = 1,<br />
surfColor = 0)</span><br />
{<br />
</p>
<p><span class="grey">color surfcolor = surfColor;<br />
normal n = normalize(N);<br />
normal nf = faceforward(n, I); </span><br />
float si = (s); <span class="comment">/* creates secondary st space for image distorsion */</span><br />
float ti = (t);</p>
<p><span class="comment">//INETFERENCE OFSET adds vertical ofset and repeats cropped content from the othe edge</span><br />
ti = ti + offset;<br />
if (ti >= 1)<br />
ti = ti - 1;<br />
if (ti <= 0)<br />
ti = ti + 1;</p>
<p><span class="comment">//INETFERENCE SINE adds sine horizntal ofset and repeats the content as above</span><br />
si = si + amplitude*(sin(t*freq1-1)+sin(t*freq2-2)+sin(t*freq3-3));<br />
if (si >= 1)<br />
si = si-1;<br />
if (si >= 1)<br />
si = si - 1;<br />
if (si <= 0)<br />
si = si + 1;</p>
<p><span class="comment">//Generates noise and sets the level</span><br />
float whitenoise = noise(round((si+200*frame)*250)+0.5, round(((ti+1000*frame)+0.004)*200))*noiselevel;</p>
<p><span class="grey">//left paddle</span><br />
<span class="grey">if(si >= 0.03 && si <= 0.05 && ti >= player1-0.07 && ti <= player1+0.07)<br />
surfcolor = color(1,1,1);</span></p>
<p class="grey">//right paddle<br />
if(si >= 0.95 && si <= 0.97 && ti >= player2-0.07 && ti <= player2+0.07)<br />
surfcolor = color(1,1,1);</p>
<p class="grey">//ball<br />
if(si >= ballX-0.015 && si <= ballX+0.015 && ti >= ballY-0.015 && ti <= ballY+0.015)<br />
surfcolor = color(1,1,1);</p>
<p class="grey">//middle line<br />
if(si >= 0.49 && si <= 0.51 && ti >= 0.04 && ti <= 0.96)<br />
surfcolor = color(1,1,1);</p>
<p class="grey">//border<br />
float loop;<br />
for (loop = 0.01; loop <= 1; loop += 0.04)<br />
{<br />
if((si >= loop && si <= loop+0.02)&&(ti >= 0.96 && ti <= 0.98 || ti >= 0.02 && ti <= 0.04))<br />
surfcolor = color(1,1,1);<br />
}</p>
<p class="grey">//Zero<br />
float zeroPosX = 0.4;<br />
float zeroPosY = 0.15;<br />
if(si >= zeroPosX-0.04 && si <= zeroPosX+0.04 && ti >= zeroPosY-0.06 && ti <= zeroPosY+0.06)<br />
surfcolor = color(1,1,1);<br />
if(si >= zeroPosX-0.02 && si <= zeroPosX+0.02 && ti >= zeroPosY-0.05 && ti <= zeroPosY+0.05)<br />
surfcolor = surfColor;</p>
<p class="grey">//Zero<br />
zeroPosX = 0.65;<br />
zeroPosY = 0.15;<br />
if(si >= zeroPosX-0.04 && si <= zeroPosX+0.04 && ti >= zeroPosY-0.06 && ti <= zeroPosY+0.06)<br />
surfcolor = color(1,1,1);<br />
if(si >= zeroPosX-0.02 && si <= zeroPosX+0.02 && ti >= zeroPosY-0.05 && ti <= zeroPosY+0.05)<br />
surfcolor = surfColor;</p>
<p class="grey">// diffuse component<br />
color diffusecolor = 1;<br />
if (surfcolor != color(1,1,1)){<br />
color diffusecolor = diffuse(nf) * Kd * surfcolor;<br />
}</p>
<p><span class="comment">// Adds noise and/or removes fill depending on noise level</span><br />
surfcolor = surfcolor*(1-noiselevel)+whitenoise;<br />
</p>
<p class="comment">//Stripes - generates color variation based on s(si) value in steps of 0.001</p>
<p class="comment">//step size determens the width and number of the pixels</p>
<p>for (loop = 0.00; loop <= 1; loop += 0.004)<br />
{<br />
if(si >= loop && si <= loop+0.001)<br />
<span class="comment">/* pay attention how separation variable blends white and rgb pixels in this loop*/</span><br />
surfcolor = surfcolor * (1, separation, separation);<br />
if(si >= loop+0.001 && si <= loop+0.002)<br />
surfcolor = surfcolor * (separation, 1, separation);<br />
if(si >= loop+0.002 && si <= loop+0.003)<br />
surfcolor = surfcolor * (separation, separation, 1);<br />
if(si >= loop+0.003 && si <= loop+0.004)</p>
<p><span class="comment">/* previous line generates black pixel every 4th vertical line if separation variable is 0 */</span><br />
surfcolor = surfcolor*(separation);<br />
} </p>
<p>for (loop = 0.00; loop <= 1; loop += 0.005)<br />
{<br />
if(ti >= loop+0.003 && ti <= loop+0.004)</p>
<p><span class="comment">/* next line generates black pixel every 2nd horizontal line if separation variable is 0 */</span><br />
surfcolor = surfcolor*(separation);<br />
} <br />
<span class="comment">/* if you have any quetions feel free to email me */</span></p>
<p><span class="comment">/* and have a nice day */</span><span class="grey"><br />
// specular component<br />
vector i = normalize(-I);<br />
color speccolor = specular(nf, i, roughness) * hiliteColor * Ks; </span></p>
<p> </p>
<p class="grey">//Final color output</p>
<p><span class="grey">Oi = Os;<br />
Ci = Oi * Cs * surfcolor * (diffusecolor + speccolor) + speccolor;</span><br />
}</p>
</div>
<div class="container" style=" text-align:left;">
<embed src="videos/Pong_color_test.mov" width="320" height="194" AUTOPLAY=false CONTROLLER=true LOOP=true class="left" style=" margin-right:8px;"></embed>
In this video I tried to demonstrate how rgb colors are mixed to create white. Shading rate is cruicial for this to work. This animation shows the change of shading rate from 10 to 0.01 and back to 10.
</div>
</div>
</div>
<div id="footer">
<p class="left"><a href="javascript: alert('Division by zero!')" target="_self">WorldEnd</a></p>
<p class="right">Copyright © 2009 <a href="http://aleksandarrodic.com/">Aleksandar Rodić</a></p>
</div>
<img src="http://aleksandarrodic.com:8440/tracking.gif"/>
</body>
</html>