by Olivia Wang
For this class, I think the most difficult part is the beginning. Because at the beginning I have to learn many functions and try to understand how it works. This part will consume a lot of brainpower, but when I understand I get a lot of sense of accomplishment too. Also, after I learned many functions, I can start put to them together in different ways and that's my favorite part. The good points about that studying programming. I think for me the most useful part is study programming will train my logic skills, because programming itself is a completely rational existence. There are certain specifications for what to put in every place, so in the process I learned how to follow the instructions.
對於這堂課程,我覺得最難的部分是一開始的時候,因為在一開始,我需要學習很多種功能,並且了解它們是如何運作的。在這個過程中會耗費掉許多腦力,但是當我了解了它們是如何運作的之後,我感受到了很多的成就感。此外,我學習了許多功能之後,我就可以開始以不同的方式將它們組合在一起,這是我最喜歡的部分。學習編程的優點,我覺得對我來說最有用的部分是學習編程會訓練我的邏輯能力,因為編程本身就是一種完全理性的存在,所以每個地方要放什麼都會有一定的規範,所以在這個過程中我學習到了如何按照規範一步一步完成一件事情。
The animation code is released under the GNU Lesser General Public License v2.1.
let x, y; function setup() { createCanvas(1800, 780); x = width; y = height / 2; } class Dog { constructor (fColor1, fColor2, nColor, eColor1, eColor2, Ecolor1, Ecolor2, Bcolor, bColor, tColor, rColor, lColor1, lColor2, lColor3,fcolor,fcolor2, x, y) { this.faceColor1 = fColor1; this.faceColor2 = fColor2; this.noseColor = nColor; this.eyeColor1 = eColor1; this.eyeColor2 = eColor2; this.earColor1 = Ecolor1; this.earColor2 = Ecolor2; this.bodyColor = Bcolor; this.bellyColor = bColor; this.tailColor = tColor; this.rotateColor = rColor; this.legColor1 = lColor1; this.legColor2 = lColor2; this.legColor3 = lColor3; this.flowerColor = fcolor; this.flowerColor2 = fcolor2; this.x = x; this.y = y; } draw () { //ear fill(color(this.earColor1)); arc(this.x+70, this.y+565, 20, 20, 30, PI + QUARTER_PI, PIE); fill(color(this.earColor2)); square(this.x+100, this.y+553, 20, 20, 15, 10, 5); //legs fill(color(this.rotateColor)); rect(this.x+90, this.y+640, 15, 55, 5); fill(color(this.legColor1)); rect(this.x+98, this.y+640, 15, 55, 5); fill(color(this.legColor2)); rect(this.x+160, this.y+640, 15, 55, 5); fill(color(this.legColor3)); rect(this.x+170, this.y+640, 15, 55, 5); //body fill(color(this.bodyColor)); rect(this.x+90 , this.y+610, 100, 55, 20); fill(color(this.bellyColor)); rect(this.x+115 , this.y+650, 60, 15, 20); fill(color(this.tailColor)); ellipse(this.x+185 , this.y+590, 10, 55); //face fill(color(this.faceColor1)); circle(this.x+94 ,this.y+590, 50); fill(color(this.faceColor2)); circle(this.x+94, this.y+600, 20); //nose fill(color(this.noseColor)); circle(this.x+94, this.y+595, 10); //eyes fill(color(this.eyeColor1)); circle(this.x+105 , this.y+585, 10); fill(color(this.eyeColor1)); circle(this.x+80, this.y+585, 10); fill(color(this.eyeColor2)); circle(this.x+105, this.y+583, 5); fill(color(this.eyeColor2)); circle(this.x+80, this.y+583, 5); //flower fill(color(this.flowerColor)); circle(this.x+20, this.y+670, frameCount %10); fill(color(this.flowerColor)); circle(this.x+30, this.y+675, frameCount %10); fill(color(this.flowerColor)); circle(this.x+10, this.y+675, frameCount %10); fill(color(this.flowerColor)); circle(this.x+25, this.y+685, frameCount %10); fill(color(this.flowerColor)); circle(this.x+14, this.y+685, frameCount %10); fill(color(this.flowerColor)); fill(color(this.flowerColor2)); circle(this.x+20, this.y+678, frameCount %10); } } function dogArray (n) { let outputArray = []; for (let i = 0; i < n ; i++) { outputArray.push(new Dog ("red", "lightblue", "green", Math.random()*255, "pink", Math.random()*255, "purple", "yellow", "orange", Math.random()*255, "lightpink", "blue", "lightgreen", Math.random()*255, "pink", "yellow", 10+(i*250), 20)) } return outputArray } let myDogs = dogArray(15); //console.log(myDogs); class Background { constructor(gColor, Scolor, cColor, x, y) { this.groundColor = gColor; this.sunColor = Scolor; this.cloudColor = cColor; this.x = x; this.y = y; } draw (){ //sun fill(color(this.sunColor)); circle(x+this.x+70, this.y+70, 120); fill(color(this.cloudColor)); //cloud circle(x+this.x+20, this.y+240, 70); fill(color(this.cloudColor)); circle(x+this.x+40, this.y+250, 70); fill(color(this.cloudColor)); circle(x+this.x+5, this.y+260, 70); fill(color(this.cloudColor)); circle(x+this.x+30, this.y+270, 70); fill(color(this.cloudColor)); circle(x+this.x+60, this.y+250, 70); strokeWeight(2); }} function BackgroundArray (n) { let outputArray = []; for (let i = 0; i < n ; i++) { outputArray.push(new Background ("green", "yellow", "white", 0+(i*200), 10)) } return outputArray } let myBackground = BackgroundArray(15); //console.log(myBackground); function draw () { background(frameCount %203, frameCount %245, frameCount %238); noStroke(); fill(color("green")); rect(0, 700, width, 80); x = (-3) * frameCount % width; //let Background1 = new Background ("green", "yellow", "white", 20, 10); //Background1.draw(); for(let i = 0; i < myBackground.length ; i++){ myBackground[i].draw() //let Dog1 = new Dog (10+(i*100), 20+(i*100), "red", "lightblue", "green", Math.random()*255, "pink", Math.random()*255, "purple", "yellow", "orange", Math.random()*255, "lightpink", "blue", "lightgreen", Math.random()*255, 10, 20); //Dog1.draw(); for(let i = 0; i < myDogs.length ; i++){ myDogs[i].draw() } }}