--- tags: 程式設計,期中作業 --- # 2021-11-28 程式設計期中報告 #### 教科一A 許軒豪 410730013 --- ## 程式介紹 ### 大綱 * 畫出 臉、眼睛、鏡框 跟著移動 * 利用 ARC 寫出嘴巴笑容上揚 * 使用 var 宣告自由落體的變動數值 * 利用 if(mouseIsPressed) 做出變化 --- ## 第一段 ### 畫出臉、左右眼睛和耳朵並跟滑鼠移動 ![](https://i.imgur.com/SqqSg7Z.png) --- ```javascript= function draw() { background(255); noStroke(); var r1=mouseX //定義 var r2=mouseY //定義 var Color_R= r1/2+30 //定義 var Color_G= r1/2+50+r2 //定義 var Color_B= r1/2+10 //定義 fill(Color_R, Color_G, Color_B) noStroke(); ellipse(mouseX - 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX - 120, mouseY - 170, 100, 100); fill(255) noStroke(); ellipse(mouseX + 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX + 120, mouseY - 170, 100, 100); // ------ 臉部(黃色) ------ // fill(255, 225, 0); ellipse(mouseX, mouseY, 400, 400); // ------ 眼睛左邊 ------ // fill(0) noStroke(); ellipse(mouseX - 80, mouseY - 60, 100, 100); // ------ 眼睛右邊 ------ // fill(0) noStroke(); ellipse(mouseX + 80, mouseY - 60, 100, 100); ``` --- ### 把眼睛加上超大眼白 ![](https://i.imgur.com/ziIHTuc.png) --- ```javascript= function draw() { background(100); //背景覆蓋 noFill(); //請勿填滿 stroke(255) //邊框白色 strokeWeight(50); //邊框粗細 ellipse(mouseX - 80, mouseY - 60, 130, 130); //繪製兩個圓 ellipse(mouseX + 80, mouseY - 60, 130, 130); //繪製兩個圓 } ``` --- ### 畫出微笑曲線 ![](https://i.imgur.com/6Qlg4JY.png) --- ```javascript= function draw() { // ------ 微笑 ------ // stroke(0); strokeWeight(8); noFill(); arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的 } ``` --- ### 整個臉都組合起來跟著滑鼠移動 ![](https://i.imgur.com/tJqH5CG.gif) --- ```javascript= function setup() { createCanvas(windowWidth, windowHeight); background(255); } function draw() { background(255); var r1=mouseX //定義 var r2=mouseY //定義 var Color_R= r1/2+30 //定義 var Color_G= r1/2+50+r2 //定義 var Color_B= r1/2+10 //定義 fill(Color_R, Color_G, Color_B) noStroke(); ellipse(mouseX - 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX - 120, mouseY - 170, 100, 100); fill(255) noStroke(); ellipse(mouseX + 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX + 120, mouseY - 170, 100, 100); // ------ 臉部 ------ // fill(255, 225, 0); ellipse(mouseX, mouseY, 400, 400); // ------ 眼睛左邊 ------ // fill(0) noStroke(); ellipse(mouseX - 80, mouseY - 60, 100, 100); // ------ 眼睛右邊 ------ // fill(0) noStroke(); ellipse(mouseX + 80, mouseY - 60, 100, 100); // ------ 超大眼白 ------ // noFill(); stroke(255) strokeWeight(50); ellipse(mouseX - 80, mouseY - 60, 130, 130); ellipse(mouseX + 80, mouseY - 60, 130, 130); // ------ 微笑 ------ // stroke(0); strokeWeight(8); noFill(); arc(mouseX, mouseY, 300, 300, 0.25, PI - 0.25) //曲度width/2+ height/2 } ``` --- ## 第二段 ### 做出自由落體先 var 宣告 --- ```javascript= // ------ 宣 告 ------ // var x =100 // X座標 var y =100 // X座標 var v_x =3 // 往右的速度 var v_y =3 // 往下的速度 ``` --- ### 將程式碼內的坐標都更換為x, y, v_x, v_y --- ```javascript= // ------ 臉部 ------ // fill(255, 225, 0); ellipse(x, y, 400, 400); // ------ 眼睛左邊 ------ // fill(0) noStroke(); ellipse(x - 80, y - 60, 50, 50); // ------ 眼睛右邊 ------ // fill(0) noStroke(); ellipse(x + 80, y - 60, 50, 50); // ------ 超大眼白 ------ // noFill(); stroke(255) strokeWeight(50); ellipse(x - 80, y - 60, 130, 130); ellipse(x + 80, y - 60, 130, 130); // ------ 微笑 ------ // stroke(0); strokeWeight(8); noFill(); arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的 x=x+v_x //每次執行都加回去，x=100 y=y+v_y v_y=v_y+0.2 if(y>=height){ v_y=-v_y*0.8 ``` --- ### 滑鼠移動跟著移動，長按滑鼠自由落體 ![](https://i.imgur.com/QDKrOPY.gif) --- ```javascript= if(mouseIsPressed){ //滑鼠點擊 // ------ 臉部 ------ // fill(255, 225, 0); ellipse(x, y, 400, 400); // ------ 眼睛左邊 ------ // fill(0) noStroke(); ellipse(x - 80, y - 60, 50, 50); // ------ 眼睛右邊 ------ // fill(0) noStroke(); ellipse(x + 80, y - 60, 50, 50); // ------ 超大眼白 ------ // noFill(); stroke(255) strokeWeight(50); ellipse(x - 80, y - 60, 130, 130); ellipse(x + 80, y - 60, 130, 130); // ------ 微笑 ------ // stroke(0); strokeWeight(8); noFill(); arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的 x=x+v_x y=y+v_y v_y=v_y+0.2 if(y>=height){ v_y=-v_y*0.8 } } else { var r1=mouseX //定義 var r2=mouseY //定義 var Color_R= r1/2+30 //定義 var Color_G= r1/2+50+r2 //定義 var Color_B= r1/2+10 //定義 fill(Color_R, Color_G, Color_B) noStroke(); ellipse(mouseX - 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX - 120, mouseY - 170, 100, 100); fill(255) noStroke(); ellipse(mouseX + 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX + 120, mouseY - 170, 100, 100); // ------ 臉部 ------ // fill(255, 225, 0); ellipse(mouseX, mouseY, 400, 400); // ------ 眼睛左邊 ------ // fill(0) noStroke(); ellipse(mouseX - 80, mouseY - 60, 100, 100); // ------ 眼睛右邊 ------ // fill(0) noStroke(); ellipse(mouseX + 80, mouseY - 60, 100, 100); // ------ 超大眼白 ------ // noFill(); stroke(255) strokeWeight(50); ellipse(mouseX - 80, mouseY - 60, 130, 130); ellipse(mouseX + 80, mouseY - 60, 130, 130); // ------ 微笑 ------ // stroke(0); strokeWeight(8); noFill(); arc(mouseX, mouseY, 300, 300, 0.25, PI - 0.25) //曲度width/2+ height/2 } } ``` --- ### 加上座標顯示、姓名 ![](https://i.imgur.com/odJFhoR.gif) --- ```javascript= // 我是座標顯示 fill(0) background(50,90,50); stroke(255) strokeWeight(10); textSize(40) text("X:"+int(mouseX)+"Y:"+int(mouseY),50,50) // 我是name顯示 stroke(255) strokeWeight(5); textSize(20) text("410730013 許軒豪",1690,40) // 我是name顯示 noStroke(); textSize(200) text("TKUET",width/2,height/2) ``` --- ### 完整程式碼 ```javascript= function setup() { createCanvas(windowWidth, windowHeight); background(255); } // [ 宣 告 ] // var x =100 // X座標 var y =100 // X座標 var v_x =3 // 往右的速度 var v_y =3 // 往下的速度 function draw() { background(50,90,50); noStroke(); // 我是座標顯示 fill(0) background(50,90,50); stroke(255) strokeWeight(10); textSize(40) text("X:"+int(mouseX)+"Y:"+int(mouseY),50,50) // 我是name顯示 stroke(255) strokeWeight(5); textSize(20) text("410730013 許軒豪",1690,40) // 我是name顯示 noStroke(); textSize(200) text("TKUET",width/2,height/2) if(mouseIsPressed){ //滑鼠點擊 // ------ 臉部 ------ // fill(255, 225, 0); ellipse(x, y, 400, 400); // ------ 眼睛左邊 ------ // fill(0) noStroke(); ellipse(x - 80, y - 60, 50, 50); // ------ 眼睛右邊 ------ // fill(0) noStroke(); ellipse(x + 80, y - 60, 50, 50); // ------ 超大眼白 ------ // noFill(); stroke(255) strokeWeight(50); ellipse(x - 80, y - 60, 130, 130); ellipse(x + 80, y - 60, 130, 130); // ------ 微笑 ------ // stroke(0); strokeWeight(8); noFill(); arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的 x=x+v_x y=y+v_y v_y=v_y+0.2 if(y>=height){ v_y=-v_y*0.8 } } else { var r1=mouseX //定義 var r2=mouseY //定義 var Color_R= r1/2+30 //定義 var Color_G= r1/2+50+r2 //定義 var Color_B= r1/2+10 //定義 fill(Color_R, Color_G, Color_B) noStroke(); ellipse(mouseX - 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX - 120, mouseY - 170, 100, 100); fill(255) noStroke(); ellipse(mouseX + 120, mouseY - 170, 150, 150); fill(128,42,42) noStroke(); ellipse(mouseX + 120, mouseY - 170, 100, 100); // ------ 臉部 ------ // fill(255, 225, 0); ellipse(mouseX, mouseY, 400, 400); // ------ 眼睛左邊 ------ // fill(0) noStroke(); ellipse(mouseX - 80, mouseY - 60, 100, 100); // ------ 眼睛右邊 ------ // fill(0) noStroke(); ellipse(mouseX + 80, mouseY - 60, 100, 100); // ------ 超大眼白 ------ // noFill(); stroke(255) strokeWeight(50); ellipse(mouseX - 80, mouseY - 60, 130, 130); ellipse(mouseX + 80, mouseY - 60, 130, 130); // ------ 微笑 ------ // stroke(0); strokeWeight(8); noFill(); arc(mouseX, mouseY, 300, 300, 0.25, PI - 0.25) //曲度width/2+ height/2 } } ```