# 期末報告

---

## 期中報告

### 目標
* 畫一個自畫像，隨著滑鼠游標移動中
* 按一下可以跳動，跟自由落體一樣的往下跳

---

滑鼠上下移動，右眼會跟著放大縮小
按一下，人物的右眼會像自由落體一樣的掉下來


https://openprocessing.org/sketch/1350481

function setup() {
 createCanvas(windowWidth, windowHeight);
 background(0);
}

var mode=1
function mousePressed(){
  mode++
	if(mode>3){
		mode =1
  }
}
  var v=612
  var t=315
  var v_x=3
  var v_y=3
  var count=0
function draw() {
	if(mode==1){
	  background(0);
   for (var x = 0;x<width;x+=50){
     for (var y =0;y<height;y+=50){
        count =count+1
        stroke(random(256),random(100),random(100))    
        strokeWeight(3) 
      if(count){
          fill(random(256),random(100),random(100))
          ellipse(x,y,40)
	if (random()<0.5){
             fill(0)
             ellipse(x,y,20)
        if (random()<0.5){
	    fill(random(256),random(100),random(100))
            ellipse(x,y,10)
            }
          }
 	 }
      }
    }
	  stroke(0)  //外誆線
		strokeWeight(1)  //外誆線粗度
		fill(139,69,19)  //髮色
		arc(635, 325+30, 150, 200, 180, PI + QUARTER_PI, CHORD);  //頭髮
		fill(255,228,181)  //膚色
		rect(620, 355, 30,50)  //脖子
	  ellipse(635, 325, 100);  //臉
		beginShape()  //嘴巴
      vertex(610,350)
	    vertex(635,355)
	    vertex(660,350)
		  vertex(610,350)
	  endShape()
		fill(0)  //眼瞳顏色
		strokeWeight(6)  //用線條畫出眼白
		stroke(255)  //眼白顏色
		ellipse(612,315,20+mouseY/10);  //右眼
	  ellipse(658,315,20+mouseX/10)  //左眼
	}
	
	if(mode==2){
    background(0);
		fill(0)  //眼瞳顏色
		strokeWeight(6)  //用線條畫出眼白
		stroke(255)  //眼白顏色
		ellipse(v,t,20,20);  //左眼
	  v =v+v_x
	  t =t+v_y
	  v_y =v_y+0.5
	  if(t>height){
	  v_y=-v_y*0.8
	  t=height
		}
	}
}

### 背景

function draw() {
  if(mode==1){
    background(0);
    for (var x = 0;x<width;x+=50){
      for (var y = 0;y<height;y+=50){
       count =count+1
       stroke(random(256),random(100),random(100))    
       strokeWeight(3) 
     if(count){
       fill(random(256),random(100),random(100))
       ellipse(x,y,40)
       if (random()<0.5){
        fill(0)
        ellipse(x,y,20)
        if (random()<0.5){
         fill(random(256),random(100),random(100))
         ellipse(x,y,10)
    }
   }
  }
 }
}

### 臉

stroke(0)  //外誆線
strokeWeight(1)  //外誆線粗度
fill(139,69,19)  //髮色
arc(635, 355, 150, 200, 180, PI + QUARTER_PI, CHORD);  //頭髮
fill(255,228,181)  //膚色
rect(620, 355, 30,50)  //脖子
ellipse(635, 325, 100);  //臉 
beginShape()  //嘴巴
   vertex(610,350)
   vertex(635,355)
   vertex(660,350)
   vertex(610,350)
endShape()
fill(0)  //眼瞳顏色
strokeWeight(6)  //用線條畫出眼白
stroke(255)  //眼白顏色
ellipse(612,315,20+mouseY/10);  //右眼
ellipse(658,315,20)  //左眼

### 點一下自由落體

右眼會像自由落體一樣的掉落

if(mode==2){
    background(0);
		fill(0)  //眼瞳顏色
		strokeWeight(6)  //用線條畫出眼白
		stroke(255)  //眼白顏色
		ellipse(v,t,20,20);  //右眼
	  v =v+v_x
	  t =t+v_y
	  v_y =v_y+0.5
	  if(t>height){
	  v_y=-v_y*0.8
	  t=height
		}
	}

---

## 期末報告

### 目標
* 利用期中自畫像或花朵為副程式程式碼產生，與身體肢體作互動

---


https://openprocessing.org/sketch/1427341

let video;
let poseNet;
let pose;
let skeleton;

var rightEar,rightShoulder,leftWrist
function preload(){
	rightEarImg= loadImage("rightEar.png")
	rightShoulderImg =loadImage("ob.png")
	leftWristImg =loadImage("fire.png")
}

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelLoaded); //呼叫在ml5.js上的net函數，用此函數來判斷各位置，呼叫成功即執行function modelLoaded 
  poseNet.on('pose', gotPoses);
}

function gotPoses(poses) {
  if (poses.length > 0) {
    pose = poses[0].pose;  //把抓到的幾個點，都放置pose變數內
    skeleton = poses[0].skeleton; //把相關於骨架的點都放到skeleton變數內
  }
}

function modelLoaded() {   //顯示pose model已經準備就緒
  console.log('poseNet ready');
}

function draw() {
    background(0);
    translate(video.width,0)  //因為攝影機顯示的是反像的畫面，需要透過這兩條指令來做反轉
    scale(-1,1)    //因為攝影機顯示的是反像的畫面，需要透過這兩條指令來做反轉
    image(video, 0, 0);  //顯示你的畫面在螢幕上
    if (pose) {
        let eyeR = pose.rightEye;  //抓到右眼資訊，放到eyeR	
        let eyeL = pose.leftEye;   //抓到左眼資訊，放到eyeL
        let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y); //算出左右眼的距離，當作鼻子顯示圓的直徑	  
        fill(255, 0, 0);  
        push() //右角     
        	translate(pose.rightEar.x, pose.rightEar.y-120)	    
        	imageMode(CENTER);	    
        	scale(-1,1)   
        	scale(0.5)	    
        	image(rightEarImg,0,0)    
        pop()    
        push() //左角
        	translate(pose.leftEar.x, pose.leftEar.y-120)    
        	imageMode(CENTER);   
        	scale(0.5)    
        	image(rightEarImg,0,0)
        pop()	  
        push() //期中自畫像     
        	translate(pose.nose.x, pose.nose.y-150,d)    
        	imageMode(CENTER);    
        	scale(0.5)		
        	stroke(0)  //外誆線
        	strokeWeight(1)  //外誆線粗度			
        	fill(139,69,19)  //髮色		
        	arc(635, 325+30, 150, 200, 180, PI + QUARTER_PI, CHORD);  //頭髮
			fill(255,228,181)  //膚色
			rect(620, 355, 30,50)  //脖子
			ellipse(635, 325, 100);  //臉
			beginShape()  //嘴巴
				vertex(610,350)
				vertex(635,355)
				vertex(660,350)
				vertex(610,350)
			endShape()
			fill(0)  //眼瞳顏色
			strokeWeight(6)  //用線條畫出眼白
			stroke(255)  //眼白顏色
			ellipse(612,315,20);  //右眼
			ellipse(658,315,20)  //左眼
        pop()
        push() //右肩尾巴   
        	translate(pose.rightShoulder.x, pose.rightShoulder.y-140)    
        	imageMode(CENTER);	   
        	scale(-1,1)    
        	scale(1)
        	image(rightShoulderImg,0,0)  
        pop()	 
        push() //火
        	translate(pose.leftWrist.x, pose.leftWrist.y-200)   
        	imageMode(CENTER);   
        	scale(-1,1)
        	scale(0.5)
        	image(leftWristImg,0,0)
        pop()
        fill(0);	  
        rect(pose.rightWrist.x, pose.rightWrist.y, 10); //右手腕

        drawSkeleton()  //畫出骨骼線
		}
}

function drawSkeleton()  {
    for (let i = 0; i < skeleton.length; i++) {
      let a = skeleton[i][0];
      let b = skeleton[i][1];			
      strokeWeight(4);
      stroke(255,0,0);
      line(a.position.x, a.position.y,b.position.x,b.position.y);			
    }
}

---

### 宣告角、尾巴和火焰的位置

var rightEar,rightShoulder,leftWrist
function preload(){
	rightEarImg= loadImage("rightEar.png") //惡魔角
	rightShoulderImg =loadImage("ob.png") //尾巴
	leftWristImg =loadImage("fire.png") //火
}

惡魔角放在耳朵上方接近頭頂的位置
尾巴放在右邊肩膀，讓他像是從後面出現的一樣
火焰擺在左手腕的上方，這樣舉起手的時候就會像是在手掌出現火焰

        push() //右角     
        	translate(pose.rightEar.x, pose.rightEar.y-120)	    
        	imageMode(CENTER);	    
        	scale(-1,1)   
        	scale(0.5)	    
        	image(rightEarImg,0,0)    
        pop()    
        push() //左角
        	translate(pose.leftEar.x, pose.leftEar.y-120)    
        	imageMode(CENTER);   
        	scale(0.5)    
        	image(rightEarImg,0,0)
        pop()
        push() //右肩尾巴   
        	translate(pose.rightShoulder.x, pose.rightShoulder.y-140)    
        	imageMode(CENTER);	   
        	scale(-1,1)    
        	scale(1)
        	image(rightShoulderImg,0,0)  
        pop()	 
        push() //火
        	translate(pose.leftWrist.x, pose.leftWrist.y-200)   
        	imageMode(CENTER);   
        	scale(-1,1)
        	scale(0.5)
        	image(leftWristImg,0,0)
        pop()