2016教學軟體設計

2016年11月23日星期三

20161117 小楓兒筆記

銘傳學生作品介紹

1. 進擊的小小兵 https://youtu.be/YE6FHl5CmcE

2. 火柴人格鬥 https://youtu.be/sdYt732ihfs

3D畫畫過程重播

PVector pt;

ArrayList<PVector>history;

void setup(){

size(600,400);

pt=new PVector(width/2,height/2);

history=new ArrayList<PVector>(0);

}

void draw(){

for(PVector nowPt:history){

ellipse(nowPt.x,nowPt.y,3,3);

}

void mouseMoved(){

history.add(new PVector(mouseX,mouseY));

//println(mouseX);

}

PVector pt;

ArrayList<PVector>history;

void setup(){

size(600,400);

pt=new PVector(width/2,height/2);

history=new ArrayList<PVector>(0);

}

void draw(){

background(255);

for(PVector nowPt:history){

fill(255,0,0);noStroke(); ←軌跡無黑色外框

ellipse(nowPt.x,nowPt.y,3,3);

}

void mouseMoved(){

history.add(new PVector(mouseX,mouseY));

//println(mouseX);

}

PVector pt;

ArrayList<PVector>history;

void setup(){

size(600,400);

pt=new PVector(width/2,height/2);

history=new ArrayList<PVector>(0);

}

void draw(){

background(255);

for(PVector nowPt:history){

fill(255,0,0);stroke(0); ←軌跡有黑色外框

ellipse(nowPt.x,nowPt.y,3,3);

}

void mouseMoved(){

history.add(new PVector(mouseX,mouseY));

//println(mouseX);

}

加入leap motion

import de.voidplus.leapmotion.*;

LeapMotion leap;

PVector pt;

ArrayList<PVector>history;

void setup(){

size(600,400);

leap=new LeapMotion(this);

pt=new PVector(width/2,height/2);

history=new ArrayList<PVector>(0);

}

void draw(){

background(255);

for(PVector nowPt:history){

fill(255,0,0);noStroke();

ellipse(nowPt.x,nowPt.y,10,10);

}

for(Hand hand:leap.getHands()){

PVector pos=hand.getPosition();

history.add(new PVector(pos.x,pos.y));

}

//void mouseMoved(){

// history.add(new PVector(mouseX,mouseY));

//println(mouseX);

//}

import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector pt;
ArrayList<PVector>history;
ArrayList<PVector>history2;
ArrayList<PVector>history3;
ArrayList<PVector>history4;
ArrayList<PVector>history5;
void setup(){
size(600,400);
leap=new LeapMotion(this);
pt=new PVector(width/2,height/2);
history=new ArrayList<PVector>(0);
}
void draw(){
background(255);
for(PVector nowPt:history){
fill(255,0,0);noStroke();
ellipse(nowPt.x,nowPt.y,10,10);
}
for(Hand hand:leap.getHands()){
hand.draw();
Finger finger=hand.getThumb();
Finger finger2=hand.getIndexFinger();
Finger finger3=hand.getMiddleFinger();
Finger finger4=hand.getRingFinger();
Finger finger5=hand.getPinkyFinger();
PVector pos;
pos=finger.getPosition();
history.add(new PVector(pos.x,pos.y));
pos=finger2.getPosition();
history.add(new PVector(pos.x,pos.y));
pos=finger3.getPosition();
history.add(new PVector(pos.x,pos.y));
pos=finger4.getPosition();
history.add(new PVector(pos.x,pos.y));
pos=finger5.getPosition();
history.add(new PVector(pos.x,pos.y));
}
}
//void mouseMoved(){
// history.add(new PVector(mouseX,mouseY));
//println(mouseX);
//}

import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector pt;
ArrayList<PVector> history;
ArrayList<PVector> history2;
ArrayList<PVector> history3;
ArrayList<PVector> history4;
ArrayList<PVector> history5;
void setup(){
size(640,480,P3D);//Need P3D 3D function (ball, translate, rotate, pushMatrix,popMatrix)
leap=new LeapMotion(this);
pt=new PVector(width/2, height/2);
history=new ArrayList<PVector>(0);
history2=new ArrayList<PVector>(0);
history3=new ArrayList<PVector>(0);
history4=new ArrayList<PVector>(0);
history5=new ArrayList<PVector>(0);
}
void myBall(float x, float y, float z){
pushMatrix();//backup translate/rotate matrix
translate(x,y,z*10);// z need to be x10
sphere(10);
popMatrix();//restore the translate/rotate matrix
}
void draw(){
background(255);
lights();// lighs will let 3D ball to look like 3D
translate(width/2, height/2);//This 3 lines (Translate, rotate, translate)
rotateY(radians(frameCount));// can let the balls rotating in the center of screen
translate(-width/2, -height/2);//
noStroke();
for(PVector nowPt : history){
fill(255,0,0); myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history2){
fill(255,255,0); myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history3){
fill(0,255,0); myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history4){
fill(0,0,255);myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history5){
fill(255,0,255);myBall(nowPt.x, nowPt.y, nowPt.z);
}
for( Hand hand : leap.getHands() ){
hand.draw();
Finger finger = hand.getThumb();
Finger finger2 = hand.getIndexFinger();
Finger finger3 = hand.getMiddleFinger();
Finger finger4 = hand.getRingFinger();
Finger finger5 = hand.getPinkyFinger();
PVector pos;
pos= finger.getPosition();
history.add(new PVector(pos.x,pos.y, pos.z));
pos = finger2.getPosition();
history2.add(new PVector(pos.x,pos.y, pos.z));
pos = finger3.getPosition();
history3.add(new PVector(pos.x,pos.y, pos.z));
pos = finger4.getPosition();
history4.add(new PVector(pos.x,pos.y, pos.z));
pos = finger5.getPosition();
history5.add(new PVector(pos.x,pos.y, pos.z));
}
}
//void mouseMoved(){
// history.add(new PVector(mouseX, mouseY));
//}

2016年11月18日星期五

Week10 施柏豪上課筆記

本日課程綱要：

1.簡單複習上周LeapMotion接金幣
2.陣列、存檔、成績排名與計算
3.~~剪刀石頭布的猜拳判斷~~(下周再學)
4.~~用陣列做"3D畫畫過程重播"示範~~(下周再學)

上課方向;

引起動機：
駭客任務電影場景中有經典的躲避子彈殘影畫面，老師以此為基礎進一步介紹希望能在LeapMotion上抓到手指頭移動的軌跡。

實作LeapMotion結合陣列之效果：
以 ArrayList 功能建立陣列容器，可以使用 add() 函式增加 ArrayList 中的元素 (element)，而這些元素是具有Vector性質的變數，再引入LeapMotion的Library，LeapMotion裝置能偵測每一個手指位置是3D空間中的座標，需要5個儲存陣列去裝5隻手指移動的軌跡，五隻手指頭就建立五個PVector 類別的ArrayList，ArrayList<PVector>history; 程式效果如圖：

因為陣列是程式語言中的物件，以new指令產生物件，history= new ArrayList<PVector>(0);

最後應用電腦圖學的3D矩陣換算方式，將眾多軌跡球的中心座標移動到原點，旋轉之後再移動回畫面中間，整體視覺呈現出一種非常立體繽紛的3D模型世界效果。

實作程式碼：

import de.voidplus.leapmotion.*;

LeapMotion leap;

PVector pt;

ArrayList<PVector>history;//many point vector

ArrayList<PVector>history2;

ArrayList<PVector>history3;

ArrayList<PVector>history4;

ArrayList<PVector>history5;



void setup(){

  size(900,600,P3D); // 3D function

  leap = new LeapMotion(this);

  pt=new PVector(width/2,height/2);

  history= new ArrayList<PVector>(0);

  history2= new ArrayList<PVector>(0);

  history3= new ArrayList<PVector>(0);

  history4= new ArrayList<PVector>(0);

  history5= new ArrayList<PVector>(0);

}



void myBall(float x,float y,float z){

  pushMatrix();

  translate(x,y,z*10);

  sphere(10);

  popMatrix();

}

void draw(){

  background(255);

  lights();

  translate(width/2,height/2);

  rotateY(radians(frameCount));

  translate(-width/2,-height/2);

  noStroke();

  for(PVector nowPt : history){

    fill(255,0,0); myBall(nowPt.x,nowPt.y,nowPt.z);

  }

  for(PVector nowPt : history2){

    fill(255,255,0); myBall(nowPt.x,nowPt.y,nowPt.z);

  }

  for(PVector nowPt : history3){

    fill(0,255,0); myBall(nowPt.x,nowPt.y,nowPt.z);

  }

  for(PVector nowPt : history4){

    fill(0,0,255); myBall(nowPt.x,nowPt.y,nowPt.z);

  }

  for(PVector nowPt : history5){

    fill(255,0,255); myBall(nowPt.x,nowPt.y,nowPt.z);

  }



  for(Hand hand:leap.getHands()){

    //PVector pos = hand.getPosition();

    //history.add(new PVector(pos.x,pos.y));

    hand.draw();

    Finger finger = hand.getThumb();

    Finger finger2 = hand.getIndexFinger();

    Finger finger3 = hand.getMiddleFinger();

    Finger finger4 = hand.getRingFinger();

    Finger finger5 = hand.getPinkyFinger();

    PVector pos;

    pos=finger.getPosition();

    history.add(new PVector(pos.x,pos.y,pos.z));

    pos = finger2.getPosition();

    history2.add(new PVector(pos.x,pos.y,pos.z));

    pos = finger3.getPosition();

    history3.add(new PVector(pos.x,pos.y,pos.z));

    pos = finger4.getPosition();

    history4.add(new PVector(pos.x,pos.y,pos.z));

    pos = finger5.getPosition();

    history5.add(new PVector(pos.x,pos.y,pos.z));

   

  }

}

void mouseMoved(){

  history.add(new PVector(mouseX,mouseY));

}

2016年11月17日星期四

week10_20161117_教學軟體設計

上課進度
1. 簡單複習上週Leap Motion 接金幣
2.陣列、存檔、成績排名、sort計算
3.如何做「剪刀石頭布」的猜拳判斷
4.用陣列做「3D畫畫過程重播」示範

作品示範與欣賞

2016互動技術概論-進擊的小小兵(郭芳蓁、陳昱宏)

https://youtu.be/YE6FHl5CmcE

2016 互動技術期中作品火柴人格鬥

https://youtu.be/sdYt732ihfs

knight rider 霹靂遊俠的霹靂燈 (KITT)

https://www.youtube.com/watch?v=Mo8Qls0HnWo

戴上VR神器「怒碎」翠玉白菜不是夢

http://a.udn.com/focus/2016/11/15/25831/index.html

The Matrix - Bullet time + Helipad Fight Scene Super High Quality

電腦3D 特效

3D畫畫過程

PVector pt;ArrayList<PVector>history;void setup(){ size(600,400,P3D); pt=new PVector(width/2, height/2); history=new ArrayList<PVector>(0);}void draw(){ for(PVector nowPt : history){ ellipse(nowPt.x,nowPt.y,3,3); 座標體積橢圓形做出來 }}void mouseMoved(){ history.add(new PVector(mouseX, mouseY));}

結果

PVector pt;

ArrayList<PVector>history;

void setup(){

size(600,400,P3D);

pt=new PVector(width/2, height/2);

history=new ArrayList<PVector>(0);

}

void draw(){

for(PVector nowPt : history){

fill(255,0,0); noStroke();

ellipse(nowPt.x,nowPt.y,3,3);

}

void mouseMoved(){

history.add(new PVector(mouseX, mouseY));

}

加上「leapmotion」

import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector pt;
ArrayList<PVector>history;
void setup(){
size(600,400,P3D);
leap=new LeapMotion(this);
pt=new PVector(width/2, height/2);
history=new ArrayList<PVector>(0);

}

void draw(){
for(PVector nowPt : history){
fill(255,0,0); noStroke();
ellipse(nowPt.x,nowPt.y,10,10);
}
for(Hand hand:leap.getHands()){
PVector pos=hand.getPosition();
history.add(new PVector(pos.x,pos.y));
}
}

//void mouseMoved(){
//history.add(new PVector(mouseX, mouseY));

//}

<更新版> 五根手指頭不同顏色的3D軌跡
import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector pt;
ArrayList<PVector> history;
ArrayList<PVector> history2;
ArrayList<PVector> history3;
ArrayList<PVector> history4;
ArrayList<PVector> history5;
void setup(){
size(640,480,P3D);//Need P3D 3D function (ball, translate, rotate, pushMatrix, popMatrix)
leap=new LeapMotion(this);
pt=new PVector(width/2, height/2);
history=new ArrayList<PVector>(0);
history2=new ArrayList<PVector>(0);
history3=new ArrayList<PVector>(0);
history4=new ArrayList<PVector>(0);
history5=new ArrayList<PVector>(0);
}
void myBall(float x, float y, float z){
pushMatrix();//backup translate/rotate matrix
translate(x,y,z*10);// z need to be x10
sphere(10);

popMatrix();//restore the translate/rotate matrix
}
void draw(){
background(255);
lights();// lighs will let 3D ball to look like 3D
translate(width/2, height/2);//This 3 lines (Translate, rotate, translate)
rotateY(radians(frameCount));// can let the balls rotating in the center of screen
translate(-width/2, -height/2);//
noStroke();
for(PVector nowPt : history){
fill(255,0,0); myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history2){
fill(255,255,0); myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history3){
fill(0,255,0); myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history4){
fill(0,0,255);myBall(nowPt.x, nowPt.y, nowPt.z);
}
for(PVector nowPt : history5){
fill(255,0,255);myBall(nowPt.x, nowPt.y, nowPt.z);
}
for( Hand hand : leap.getHands() ){
hand.draw();
Finger finger = hand.getThumb();
Finger finger2 = hand.getIndexFinger();
Finger finger3 = hand.getMiddleFinger();
Finger finger4 = hand.getRingFinger();
Finger finger5 = hand.getPinkyFinger();
PVector pos;
pos= finger.getPosition();
history.add(new PVector(pos.x,pos.y, pos.z));
pos = finger2.getPosition();
history2.add(new PVector(pos.x,pos.y, pos.z));
pos = finger3.getPosition();
history3.add(new PVector(pos.x,pos.y, pos.z));
pos = finger4.getPosition();
history4.add(new PVector(pos.x,pos.y, pos.z));
pos = finger5.getPosition();
history5.add(new PVector(pos.x,pos.y, pos.z));
}
}
//void mouseMoved(){
// history.add(new PVector(mouseX, mouseY));
//}

Week 10 蕭阿火筆記

本日上課重點

- Leap Motion的使用以及複習金幣遊戲

- 陣列、存檔、成績排名、SORT計算

- 如何做剪刀石頭布的猜拳遊戲

- 運用陣列做3D畫畫過程重播示範

=======================================================================

互動技術相關實作的內容分享

https://youtu.be/YE6FHl5CmcE

小小兵技術

https://youtu.be/sdYt732ihfs

火材人格鬥

https://youtu.be/5QNJBsKqZ34

太鼓達人

https://youtu.be/Mo8Qls0HnWo

以往電子電路設計的相關使用

======================================================================

Bullet time的飛行軌跡，透過運用陣列來列下所有的過程

運用滑鼠位置來做軌跡的實作

PVector pt;
ArrayList<PVector>history;
void setup(){
size(600,400,P3D);
pt=new PVector(width/2,height/2);
history=new ArrayList<PVector>(0);
}

void draw(){
for(PVector nowPt : history){
ellipse(nowPt.x,nowPt.y,3,3);
}
}

void mouseMoved(){
history.add(new PVector(mouseX,mouseY));
}

========================================================================

將軌跡運用在Leap Motion

import de.voidplus.leapmotion.*;
LeapMotion leap;

PVector pt;
ArrayList<PVector>history;
void setup(){
size(600,400,P3D);
leap=new LeapMotion(this);
pt=new PVector(width/2,height/2);
history=new ArrayList<PVector>(0);

}

void draw(){
background(255);
for(PVector nowPt : history){
    fill(255,0,0);noStroke();
    ellipse(nowPt.x,nowPt.y,3,3);
}
for(Hand hand : leap.getHands()){
    PVector pos = hand.getPosition();
    history.add(new PVector(pos.x,pos.y));
}
}

=======================================================

void myBall(float x,float y,float z){ 透過PUSH MATRIX用來移動，轉向
pushMatrix();
translate(x,y,z*10);
sphere(10);
popMatrix();
}

void draw() {
background(255);

lights();                                             打光、旋轉、移動
translate(width/2,height/2);
rotateY(radians(frameRate));     把Rate改成Count即可使得她在中心轉動
translate(-width/2,-height/2);
noStroke();
for (PVector nowPt : history) {
     fill(255, 0, 0);myBall(nowPt.x, nowPt.y, nowPt.z);
}
for (PVector nowPt : history2) {
     fill(255, 255, 0);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for (PVector nowPt : history3) {
     fill(0, 255, 0);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for (PVector nowPt : history4) {
     fill(0, 0, 255);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for (PVector nowPt : history5) {
     fill(255, 0, 255);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for ( Hand hand : leap.getHands() ) {
    hand.draw();
    Finger finger = hand.getThumb();
    Finger finger2 = hand.getIndexFinger();
    Finger finger3 = hand.getMiddleFinger();
    Finger finger4 = hand.getRingFinger();
    Finger finger5 = hand.getPinkyFinger();
    PVector pos;
    pos= finger.getPosition();
    history.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger2.getPosition();
    history2.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger3.getPosition();
    history3.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger4.getPosition();
    history4.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger5.getPosition();
    history5.add(new PVector(pos.x, pos.y,pos.z));
}
}
//void mouseMoved(){
// history.add(new PVector(mouseX, mouseY));
//}

實作成功版程式碼

import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector pt;
ArrayList<PVector> history;
ArrayList<PVector> history2;
ArrayList<PVector> history3;
ArrayList<PVector> history4;
ArrayList<PVector> history5;
void setup() {
size(640, 480, P3D);
leap=new LeapMotion(this);
pt=new PVector(width/2, height/2);
history=new ArrayList<PVector>(0);
history2=new ArrayList<PVector>(0);
history3=new ArrayList<PVector>(0);
history4=new ArrayList<PVector>(0);
history5=new ArrayList<PVector>(0);
}
void myBall(float x,float y,float z){
pushMatrix();
translate(x,y,z*10);
sphere(10);
popMatrix();
}
void draw() {
background(255);
lights();
translate(width/2,height/2);
rotateY(radians(frameRate));
translate(-width/2,-height/2);
noStroke();

for (PVector nowPt : history) {
     fill(255, 0, 0);myBall(nowPt.x, nowPt.y, nowPt.z);
}
for (PVector nowPt : history2) {
     fill(255, 255, 0);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for (PVector nowPt : history3) {
     fill(0, 255, 0);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for (PVector nowPt : history4) {
     fill(0, 0, 255);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for (PVector nowPt : history5) {
     fill(255, 0, 255);myBall(nowPt.x, nowPt.y,nowPt.z);
}
for ( Hand hand : leap.getHands() ) {
    hand.draw();
    Finger finger = hand.getThumb();
    Finger finger2 = hand.getIndexFinger();
    Finger finger3 = hand.getMiddleFinger();
    Finger finger4 = hand.getRingFinger();
    Finger finger5 = hand.getPinkyFinger();
    PVector pos;
    pos= finger.getPosition();
    history.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger2.getPosition();
    history2.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger3.getPosition();
    history3.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger4.getPosition();
    history4.add(new PVector(pos.x, pos.y,pos.z));
    pos = finger5.getPosition();
    history5.add(new PVector(pos.x, pos.y,pos.z));
}
}

訂閱：文章 (Atom)

2016年11月23日 星期三

20161117 小楓兒筆記

2016年11月18日 星期五

Week10 施柏豪上課筆記

本日課程綱要：

上課方向;

2016年11月17日 星期四

week10_20161117_教學軟體設計

3D畫畫過程

Week 10 蕭阿火筆記

2016年11月23日星期三

2016年11月18日星期五

2016年11月17日星期四