Programming Concepts and Applications
for Artists and Designers
instructor:
Peter Gerstmann
student:
Yuegu Hu
task03 :Tides
My Favorite
task03_A (click on the image to view)
.fla   .swf  code
task03_B (click on the image to view)
.fla   .swf   code

 

Code for task03_A
on frame one:
#include "Canvas.as"
var V = new Canvas();
//light blue background, to mimic the color of sky
V.setBackgroundColor(.8, .9, 1);
//initiate the number of rows of waves will be drawn in one canvas
var waveRowNum = 0;
//how many waves will be drawn in one row
var waveNum = 12;
//generate random value for wave displacement on Y axis, range: (0,.6), will be used in the next frame
var waveYDisp = .1 + Math.random() * .5;
 
 
on frame two: if (waveRowNum<=7) {
//generate random value for wave height, range: (0,.1)
var waveHeight = Math.random()*.045+.005;
//generate random value for wave displacement on X axis, range: (0,1)
var waveXDisp = Math.random();
//calculate R, G, B values for each wave, essentially the color of wave gets bluer and darker
var j = waveRowNum * .02;
var waveR = .68-2*j;
var waveG = .75-j;
var waveB = .88;
//calculate the opacity value for each wave, essentially it gets more and more opaque
var waveShade = 3*j+.4;
//the main part that draws several hundred of lines to form each wave
for (i=0.002; i<=1; i=i+.006) {
var x = i;
//the wavy shape comes from the following line, essentially: y = sine (x)
var y = Math.sin((x+waveXDisp)*waveNum*2*3.14)*waveHeight+waveYDisp;
//draw the wave body, the blue part
V.setPenColor(waveR, waveG, waveB);
V.setPenWeight(.012);
V.setOpacity(waveShade);
V.drawLine(x-.001, y+.006, x-.001, 1);
//draw the wave edge, the black wavy line
V.setPenColor(0, 0, 0);
V.setPenWeight(j/20+.004);
V.drawLine(x-.001, y, x, y-.003);
//the following makes sure the dots which form the black line are dense enough
if (i-.004>=0 ) {
var x = i-.002;
var y = Math.sin((x+waveXDisp)*waveNum*2*3.14)*waveHeight+waveYDisp;
V.drawLine(x-.001, y, x, y-.003);
var x = i-.004;
var y = Math.sin((x+waveXDisp)*waveNum*2*3.14)*waveHeight+waveYDisp;
V.drawLine(x-.001, y, x, y-.003);
}
}
waveRowNum = waveRowNum+1;
//the closer the wave comes towards the audience, the lesser waves in one row
waveNum = waveNum-1.8;
//the closer the wave comes towards the audience, the lower the waves appear
waveYDisp = waveYDisp+.03;
} else {
gotoAndPlay(1);
}
 
on frame three:
//make sure it doesn't draw faster than 12 fps
gotoAndPlay(2);

 

Code for task03_B
on frame one:
#include "Canvas.as"
var V = new Canvas();
//light blue background, to mimic the color of sky
V.setBackgroundColor(.8, .9, 1);
//initiate the number of rows of waves will be drawn in one canvas
var waveRowNum = 0;
//how many waves will be drawn in one row
var waveNum = 12;
//generate random value for wave displacement on Y axis, range: (0,.6), will be used in the next frame
var waveYDisp = .1 + Math.random() * .5;
//generate random value for wave displacement on X axis, range: (0,1), will be used in the next frame
var waveXDisp = Math.random();
//generate random value for wave height, range: (0,.05),
var waveHeight = Math.random()*.045+.005;
 
 
on frame two:
if (waveRowNum<=7) {
//calculate R, G, B values for each wave, essentially the color of wave gets bluer and darker
var j = waveRowNum *.02;
var waveR = .68-2*j;
var waveG = .75-j;
var waveB = .88;
//calculate the opacity value for each wave, essentially it gets more and more opaque
var waveShade = 3*j+.4;
//the main part that draws several hundred of lines to form each wave
for (i=0.002; i<=1; i=i+.006) {
var x = i;
//the wavy shape comes from the following line, essentially: y = sine (x)
var y = Math.sin((x+waveXDisp)*waveNum*2*3.14)*waveHeight+waveYDisp;
//draw the wave body, the blue part
V.setPenColor(waveR, waveG, waveB);
V.setPenWeight(.012);
V.setOpacity(waveShade);
V.drawLine(x-.001, y+.006, x-.001, 1);
//draw the wave edge, the black wavy line
V.setPenColor(0, 0, 0);
V.setPenWeight(j/20+.004);
V.drawLine(x-.001, y, x, y-.003);
//the following makes sure the dots which form the black line are dense enough
if (i-.004>=0 ) {
var x = i-.002;
var y = Math.sin((x+waveXDisp)*waveNum*2*3.14)*waveHeight+waveYDisp;
V.drawLine(x-.001, y, x, y-.003);
var x = i-.004;
var y = Math.sin((x+waveXDisp)*waveNum*2*3.14)*waveHeight+waveYDisp;
V.drawLine(x-.001, y, x, y-.003);
}
}
waveRowNum = waveRowNum+1;
//the closer the wave comes towards the audience, the lesser waves in one row
waveNum = waveNum-1.6;
} else {
gotoAndPlay(1);
}
 
 
on frame three:
//make sure it doesn't draw faster than 12 fps
gotoAndPlay(2);

 

My Favorites    
from task03_A :
from task03_B :