2016教學軟體設計

2016年11月4日星期五

20161103 上課筆記

下載以及安裝 Leap motion

小 Leap 真面目
*手需抬高大概十五公分左右

Leap Motion App Store

Leap motion 體驗

Download Leap Motion for Processing

Open examples

因為沒加背景，導致畫面的重疊

模仿 example，再加上背景

開 reference 可以看到程式碼的功能

把 hand draw 拿掉

掉硬幣遊戲

程式碼

import de.voidplus.leapmotion.*;

LeapMotion leap;

void setup(){

size(640,480,P3D);

leap=new LeapMotion(this);

}

float coinX=320, coinY=0, coinVX=0, coinVY=3;

int score=0;

void draw(){

background(255);

coinY += coinVY;

fill(255,255,0);ellipse(coinX, coinY, 60,60);

if(coinY>480){

coinY=0;

coinX=random(640);

}

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

//hand.draw();

PVector pos = hand.getPosition();

//println(pos);

fill(255,0,0); ellipse(pos.x, pos.y, 100,100);

if( dist(pos.x, pos.y, coinX, coinY)<100){

score += 10;

coinY=0;

coinX=random(640);

}

fill(0,255,0);

textSize(50);

text("Score:" + score, 400,100);

}

成果

2016年11月3日星期四

20161103 小楓兒筆記

leap motion

準備開箱

leap motion 真面目

實作

leap motion讀取手

import de.voidplus.leapmotion.*;
LeapMotion leap;
void setup(){
size(640,480);
leap=new LeapMotion(this);
}
void draw(){
background(255);
for(Hand hand:leap.getHands()){
hand.draw();
}
}

*可以找到所有超連結功能
processing→libraries→LeapMotionForProcessing→reference

接金幣

顯示版

隱藏版

import de.voidplus.leapmotion.*;
LeapMotion leap;
void setup(){
size(640,480,P3D);
leap=new LeapMotion(this);
}
float coinX=240,coinY=0,coinVX=0,coinVY=3;
int score=0;
void draw(){
background(255);
coinY+=coinVY;
fill(255,255,0);ellipse(coinX,coinY,60,60);
if(coinY>480){
coinY=0;
coinX=random(640);
}
for(Hand hand:leap.getHands()){
hand.draw(); ←隱藏這行可以不顯示手
PVector pos=hand.getPosition();
println(pos);
fill(255,0,0);ellipse(pos.x,pos.y,100,100);
if(dist(pos.x,pos.y,coinX,coinY)<100){
score+=10;
coinY=0;
coinX=random(640);
}
}
fill(0,255,0);
textSize(50);
text("Score:"+score,400,100);
}

Week08 施柏豪上課筆記

LeapMotion 介紹與體驗

老師將這台裝置借我們使用，當環境安裝完，插入USB連接線後，進入LeapMotion的軟體引導畫面，以桌面模式進行體驗。

程式功能1：

讓Processing偵測到LeapMotion裝置

import de.voidplus.leapmotion.*;
LeapMotion leap;
void setup(){
  size(640,480,P3D);
  leap=new LeapMotion(this);
}
void draw(){
  background(255);
  for(Hand hand : leap.getHands()){
    //hand.draw();
    for(Finger finger : leap.getFingers()){
      finger.draw();
    }
  }
}

執行結果：

上面這兩張圖，差異在draw function中加入background(255);這行，

代表意義是每次著色前畫面都重新填滿白色，就不會一直有殘影
程式功能2：

金幣下落，以手指碰到金幣後，金幣有反彈碰撞的效果
import de.voidplus.leapmotion.*;
LeapMotion leap;

PImage img;
float coinX=320, coinY=0, coinVX=0, coinVY=3;
int score=0;

void setup(){
  size(640,480,P3D);
  leap=new LeapMotion(this);
  img = loadImage("coin.png");
}

void draw(){
  background(255);
  coinY += coinVY;
  fill(255,255,0); 
  //ellipse(coinX,coinY,60,60);
  image(img,coinX,coinY,60,60);
  if(coinY>480){
    coinY=0;
    coinX=random(640);
  }
  for(Hand hand : leap.getHands()){
    //hand.draw();
    PVector pos = hand.getPosition();
    println(pos);
    fill(255,0,0);
    
    ellipse(pos.x,pos.y,100,100);
    
    if(dist(pos.x,pos.y,coinX,coinY)<100){
      score += 10;
      coinY = 0;
      coinX=random(640);
    }   
  }
  fill(130,100,200); 
  textSize(50);
  text("Score:"+score,300,100);
}



執行結果：

學習心得：

非常感謝葉老師能借到這樣的高科技玩具給我們使用，依稀記得在兩年前在美國剛有此產品時，我也只能看著影片驚嘆而已，在這方面來說，研究所的環境的確讓我勉強有跟到世界創新的前端趨勢，在今天這門課最讓我感到收穫的是，老師引導我們參考德國人寫的LeapMotion範例程式碼，直接解析程式碼，複製需要的部分，貼上執行看效果的感覺真的很棒! 今天教學內容老師依然是盡量以一頁程式碼能表現的功能為主，學習到用手接金幣的功能，以及到後面的金幣與手之間的距離計算等等，都是以程式表現想法， Processing環境有函數自動補完的功能，也增加了方便性，如下圖，經過老師的教學，今天上完課讓我想去買一台LeapMotion來玩了!

有一點概念值得記錄下來以免以後忘記，我認同程式設計教育，但不認同只學到語法的程式設計教育，在台灣某些學校體制內的程式教學形式，是使用考卷筆試，以邏輯語法選擇題、填空題作為評量學生學習程式的學習成效，教師沒有再進一步去設計教學活動，使學生個人想法表現於程式設計，那種停留(糾結)在語法邏輯上的教學，只是確認語法使用的知識性層面，出版社考卷上的題目，比較難的題目形式已經是超出一般人寫程式會用的結構，那樣應該不完全叫正確理解與應用程式設計，而是在玩數學邏輯智力測驗了。

比較好的做法，應該將教學重點放在學生怎麼利用程式模組解決生活上大家都知道的問題，或是學生在意的事情上(Ex. 遊戲、互動...)，學生的成果可能是每個人都有差異，也不太像選擇題好評分，這樣的教學可能比較有可能使學生知道學到的東西是真實存在於你我生活中的，而非紙上談兵。

一個教學行為若沒有引起學生想自己繼續學的動機，那就是無效的，因為看老師表演一堂課沒什麼意義，浪費老師的時間，也浪費學生的時間。

Week 08 蕭阿火筆記

本日上課重點

- Leap Motion的使用與安裝

-Leap Motion App Store

-Leap Motion Play

- Leap Motion的設計

- 手機紅外線照相機

本日上課小記

- Leap Motion使用與安裝

找到Leap Motion的官網並且下載驅動程式

之後再啟動，

啟動後即可使用Leap Motion App Home，

從AppHome內可以找到許多的程式來玩

PopPop:

- Leap Motion程式設計

下載好函式庫後，

開啟範例程式測試是否成功:

接下來再進行程式碼的編寫

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

import de.voidplus.leapmotion.*; 抓出函式

LeapMotion leap;

void setup(){

size(640,480);

leap=new LeapMotion(this);

}

void draw(){

background(200);

for(Hand hand : leap.getHands()){ 這個for的寫法是以gethand的次數來進行for迴圈

hand.draw();

}

從文件檔案中的reference可以用來查指令

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

import de.voidplus.leapmotion.*;　　　　　　畫手指頭

LeapMotion leap;

void setup(){

size(640,480);

leap=new LeapMotion(this);

}

void draw(){

background(200);

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

hand.draw();

for(Finger finger : hand.getFingers()){

finger.drawJoints();

}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

import de.voidplus.leapmotion.*;

LeapMotion leap;

void setup(){

size(640,480);

leap=new LeapMotion(this);

}

void draw(){

background(200);

coinY += coinVY; 讓金幣可以有一個速度改變Y座標(往下掉)

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

hand.draw();

PVector pos = hand.getPosition();　　　　　　　　抓取座標位置

//println(pos);

fill(200,0,0);　　　　　　　　　　　　　　　　弄顆球

ellipse(pos.x,pos.y,50,50);　　　　　　　　　　　球的位子在手上　(posx posy)

for(Finger finger : hand.getFingers()){

finger.drawJoints();

}

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

import de.voidplus.leapmotion.*;

LeapMotion leap;

void setup(){

size(640,480);

leap=new LeapMotion(this);

}

float coinX=320,coinY=0,coinVX=0,coinVY=3,colorX=255,colorY=255,colorZ=0;

int score=0;

void draw(){

background(255);

coinY += coinVY;

fill(colorX,colorY,colorZ);

ellipse(coinX,coinY,60,60);

if(coinY>480){

coinY=0;

coinX=random(640);

}

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

//hand.draw();

Finger finger= hand.getIndexFinger();

finger.drawBones();

PVector pos = hand.getPosition();

//println(pos);

if(dist(pos.x,pos.y,coinX,coinY)<100){

score += 10;

coinY=0;

coinX=random(640);

colorX=random(255); 彩球

colorY=random(255);

colorZ=random(255);

fill(colorX,colorY,colorZ);

}

fill(0,200,20);

textSize(50);

text("Score:" + score,400,100);

}

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

week8 呂郁欣教學軟體筆記

week8 呂郁欣教學軟體筆記

1.leap motion

leap motion for processing.

撰寫程式

thumb ,index,middle,ring,pinky

import de.voidplus.leapmotion.*;
LeapMotion leap ;
void setup(){
size(640,480);
leap=new LeapMotion(this);
}
void draw(){
background(225);
for(Hand hand : leap.getHands()){
hand.draw();
for(Finger finger : hand.getFingers()){
finger.draw();
}
}
}

https://developer.leapmotion.com/documentation/java/devguide/Leap_Processing.html