week19

2013 互動技術概論期末作品

作品名稱: doggy&me

介紹:

利用 serproxy接合flash與Arduino
所做的一隻小遊戲

DEMO影片:

week16

這周我們將flash也就是arduino的前置作業

架構大致上完成了

也就是有進入畫面及一個動作

而程式碼的部分

發現在這裡無法進行serproxy的設定

將在家裡進行

並且下次再使用隨身碟帶來進行

電路板已經接好了

所以剩下的部分剩下一點點囉

會盡快完成

week15

製作流程
flash將在自家完成
因此在課堂上並不會製作flash的部分
接下來是我們這禮拜繪製的flash與arduino搭配 製作與運作流程

Arduino利用第29頁的概念，插三個OR四個並聯再一起，即可製成我們所想要的電路，搭配上

這段程式碼(待修改的serproxy)
#define bufferSize   16
#define greenLedPin  12
#define redLedPin    13
void setup() {
  pinMode(greenLedPin, OUTPUT); // declare the greenLedPin as an OUTPUT
  pinMode(redLedPin, OUTPUT); // declare the redLedPin as an OUTPUT
  Serial.begin(115200);
}
void loop() {
  while (Serial.available() > 0) {
    char inBuffer[bufferSize];
    int stringLength;
    stringLength = Serial.readBytesUntil('\0', inBuffer, bufferSize);
    if (stringLength > 0) {
      inBuffer[stringLength] = '\0';
      String inString = String(inBuffer);
      Serial.println(inString);
      if ( inString == "G:1" ) {
          digitalWrite(greenLedPin, HIGH);
      } else  if ( inString ==  "G:0" ) {
          digitalWrite(greenLedPin, LOW);
      } else  if ( inString == "R:1" ) {
          digitalWrite(redLedPin, HIGH);
      } else  if ( inString == "R:0" ) {
          digitalWrite(redLedPin, LOW);
      }
    }
  }
}
與這段button的程式碼
const int buttonPin = 2;     // the number of the pushbutton pin
const int ledPin =  13;      // the number of the LED pin

// variables will change:
int buttonState = 0;         // variable for reading the pushbutton status

void setup() {
  // initialize the LED pin as an output:
  pinMode(ledPin, OUTPUT);      
  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);     
}

void loop(){
  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed.
  // if it is, the buttonState is HIGH:
  if (buttonState == HIGH) {     
    // turn LED on:    
    digitalWrite(ledPin, HIGH);  
  } 
  else {
    // turn LED off:
    digitalWrite(ledPin, LOW); 
  }
}
結合 
就能做出我們想要的arduino與flash的融合
透過arduino的控制
我們的flash就能動作。
流程大致上是這樣
參考資料:
http://playground.arduino.cc/interfacing/flash

http://gsyan888.blogspot.tw/2013/05/arduino-serproxy-flash.html

week14

期末作品企劃:Jumping dog


我們想要用flash做介面和Arduino做結合

利用幾個按鈕來控制Flash裡面的可愛狗狗

可能會讓他講一些令人發笑的話

搭配可愛逗人的動作

讓人會捨不得離開這隻可愛的狗狗

1.基本的四個按鈕

控制 他的尾巴

控制 他的眼睛

控制 他的頭

控制 他的腳

2. 說話

可能什麼動作就搭配什麼樣的對話

3.背景

基本上會設為白色


這個概念是白色可以讓畫面中的狗狗較為明顯

可以凸顯狗狗的可愛

4.燈泡

按鈕按了幾次之後 燈泡會亮

這時狗狗可能會發狂之類的

搭配可愛的對話

以下是別人做的範例

JUMPING CAT

取自於youtube

week10, 期中作品展示

期中作品展示
Mondo and fiddle

成果如下:
http://www.youtube.com/watch?v=N4ZjU-bcd3A

week13

project 06: Light Theremin





















int sensorValue;
int sensorLow = 1023; int sensorHigh = 0; const int ledPin = 13; void setup(){ pinMode(ledPin, OUTPUT); digitalWrite(ledPin, HIGH); while(millis()<5000){ sensorValue = analogRead(A0); if(sensorValue > sensorHigh){ sensorHigh = sensorValue; } if(sensorValue < sensorLow){ sensorLow = sensorValue; } } digitalWrite(ledPin, LOW); } void loop(){ sensorValue = analogRead(A0); int pitch = map(sensorValue, sensorLow, sensorHigh, 50, 4000); tone(8, pitch, 20); delay(10); }

project7 : Keyboard Instrument




















int notes[] = {262, 294, 330, 349}; void setup(){ Serial.begin(9600); } void loop(){ int keyVal = analogRead(A0); Serial.println(keyVal); if(keyVal == 1023){ tone(8, notes[0]); } else if(keyVal >= 990 && keyVal <= 1010){ tone(8, notes[1]); } else if(keyVal >= 505 && keyVal <= 515){ tone(8, notes[2]); } else if(keyVal >= 5 && keyVal <= 10){ tone(8, notes[3]); } else{ noTone(8); } }

week12

<week12>

lesson:3.

const int sensorPin=A0;
const float baselineTemp=22.0;

void setup(){
  Serial.begin(9600);
  for(int pinNumber=2;pinNumber<5;pinNumber++){
    pinMode(pinNumber,OUTPUT);
    digitalWrite(pinNumber,LOW);
  }
}

void loop(){
  int sensorVal=analogRead(sensorPin);
  Serial.print("Sensor Value: ");
  Serial.print(sensorVal);
  float voltage=(sensorVal/1024.0)*5.0;
  Serial.print(", Volts: ");
  Serial.print(voltage);
  Serial.print(", degree C: ");
  float temperature=(voltage-.5)*100;
  Serial.println(temperature);

  if(temperature<baselineTemp){
    digitalWrite(2,LOW);
    digitalWrite(3,LOW);
    digitalWrite(4,LOW);
  }
  else if(temperature>=baselineTemp+2 && temperature< baselineTemp+4){
    digitalWrite(2,HIGH);
    digitalWrite(3,LOW);
    digitalWrite(4,LOW);

  }
  else if(temperature>=baselineTemp+4 && temperature<baselineTemp+6){
    digitalWrite(2,HIGH);
    digitalWrite(3,HIGH);
    digitalWrite(4,LOW);

  }

  else if(temperature>=baselineTemp+6){
    digitalWrite(2,HIGH);
    digitalWrite(3,HIGH);
    digitalWrite(4,HIGH);

  }
  delay(1);

}


2.
lesson:4

因為有點錯誤
老師幫我們寫了一隻
debug的程式
發現我們的腳正負極接錯了
還有輸出的位子的腳也接錯了
測試的程式碼如下:
void setup(){
  pinMode(9,OUTPUT);
  pinMode(10,OUTPUT);
  pinMode(11,OUTPUT);
}
int r=0, g=0, b=255;
void loop(){
  analogWrite(9, g);
  analogWrite(10,r);
  analogWrite(11,b);
}
非常謝謝老師
再來將這周的程式碼放入板子中
程式碼如下:
const int greenLEDPin = 9; //Green pin in the RGB LED
const int redLEDPin = 11; //Red pin in the RGB LED
const int blueLEDPin = 10; //Blue pin in the RGB LED

const int redSensorPin = A0; //Photoresistor no. 1
const int greenSensorPin = A1; //Photoresistor no. 2
const int blueSensorPin = A2; //Photoresistor no. 3

int redValue = 0;
int greenValue = 0;
int blueValue = 0;
//These values can only be from 0 to 255.

int redSensorValue = 0;
int greenSensorValue = 0;
int blueSensorValue = 0;
//These values will be reading from the photoresistors.

void setup() {
  Serial.begin(9600);

  //Set up the RGB LED pins to be OUTPUT.
  pinMode(greenLEDPin, OUTPUT);
  pinMode(redLEDPin, OUTPUT);
  pinMode(blueLEDPin, OUTPUT);
}

void loop() {
  //Set up the XXSensorValues to read from the photoresistors.
  redSensorValue = analogRead(redSensorPin);
  delay(5);
  greenSensorValue = analogRead(greenSensorPin);
  delay(5);
  blueSensorValue = analogRead(blueSensorPin);
  delay(5);

  //Print on the serial monitor the values given by the photoresistors.
  Serial.print("Raw Sensor Values \t Red: ");
  Serial.print(redSensorValue);
  Serial.print("\t Green: ");
  Serial.print(greenSensorValue);
  Serial.print("\t Blue: ");
  Serial.print(blueSensorValue);

  //XXValue can only be from 0 to 255 because they are define the intensity of the pin on the RGB LED.
  redValue = redSensorValue/4;
  greenValue = greenSensorValue/4;
  blueValue = blueSensorValue/4;

  //Print on the serial monitor the values that the LED pin is on.
  Serial.print("Mapped Sensor Values \t Red: ");
  Serial.print(redValue);
  Serial.print("\t Green: ");
  Serial.print(greenValue);
  Serial.print("\t Blue: ");
  Serial.println(blueValue);

  //analogWrite is used here to write, instead of HIGH(1) or LOW(0), a certain intensity(0-255) that is more precise.
  analogWrite(redLEDPin, redValue);
  analogWrite(greenLEDPin, greenValue);
  analogWrite(blueLEDPin, blueValue);
}
得到的結果如下:

心得:
接腳跨接的時候
要小心正負極的相接
如果接錯就會發生問題
因次要小心
還有電阻是沒有正負極之分的
以上為我們兩個人這次的心得!!

week11

1. 練習第一個範例 File-Examples-Basic-Blink

2. 修改程式,變成展得比較特別的作法

void setup() {                

  pinMode(13, OUTPUT);  
  pinMode(12, OUTPUT);
}


void loop() {
 digitalWrite(13, HIGH);   
  delay(1000);   
   digitalWrite(12, HIGH);   
  delay(1000);
  
  digitalWrite(13, LOW);    
  delay(1000);  
  digitalWrite(12, LOW);    
  delay(1000);       

}

https://www.youtube.com/watch?v=9Mh7crFN-1g

WEEK08

遊戲名稱 : Mondo and fiddle!!
組員名稱: 呂東勳   99163161
                  雲品瀚   99163205

新進度:

將人物更新
設定接觸20個完成任務
有開頭畫面與結束畫面
有背景
可以記錄分數

未來進度:

加入音樂
接到的音效



程式碼如下:

int N=4;

float AriX=150;
float AriY=700;
float []thingX = new float[4];
float []thingY = new float[4];
float []thingType = new float[4];
PImage imgMoney;
PImage imgAri;
PImage imgDola;
PImage imgChouda;
PImage imgBack;
PImage imgTemmo;
PImage imgsuc;
int score = 0;
int stage=0;

void setup(){
  size(600,800);

  imgMoney=loadImage("http://ext.pimg.tw/pplanetj/1354368747-3891682287_n.png");
  imgAri=loadImage("http://pic.pimg.tw/pplanetj/1353075166-1361306915_n.png");
  imgDola=loadImage("http://pic.pimg.tw/pplanetj/1354368741-2996714660_t.png");
  imgChouda=loadImage("http://pic.pimg.tw/pplanetj/1353075170-12784274_n.png");
  imgBack=loadImage("http://pic1.kkdoor.net/u/1/42775752_41144.jpg");
  imgTemmo=loadImage("http://i.gbc.tw/gb_img/0/002/420/2420030.jpg");
  imgsuc=loadImage("http://ih3.redbubble.net/image.13391908.4520/sticker,375x360.u1.png");
  //image(imgBack,600,800);
  for(int i=0;i<N;i++){
    newThing(i);
  }
}
int countDown=3*30;
void draw(){
  switch(stage){
    case 0:
  if(countDown>0){
     image(imgTemmo,0,0,600,800) ;
     countDown--;
     textSize(50);
     text("Mondo and Fiddle!!",70,250);
     text("Start: "+countDown/30,250,350);
   
     return ;
  }
  image(imgBack,0,0,600,800);
 
  for(int i=0;i<N;i++){
    if(thingType[i]==1) drawchouda(i);
    else if(thingType[i]==2) drawDola(i);
    else if(thingType[i]==3) drawMoney(i);
   thingY[i]+=4;
   if(thingY[i]>800) newThing(i);
  }
  image(imgAri,AriX,AriY,150,100);
  for (int i = 0; i < 4 ; i++){
   scores(i);
  }
  pushMatrix();
   fill(255,0,0);
  textSize(30);
  text("Score: "+score,50,150);
  popMatrix();
 
  break;
  case 1:
  image(imgsuc,0,0,600,800) ;
 /*   pushMatrix();
   fill(255,0,0);
  textSize(70);
  text("sucessful!!! ",250,350);
  popMatrix();
  */
   break;
  }
}
void keyPressed(){
  if(keyCode==RIGHT) AriX+=50;
  if(keyCode==LEFT) AriX-=50;
}

void newThing(int i) {
  thingY[i]=-random(200);
  thingX[i]=random(520);
  thingType[i]=int(random(3))+1;
}
void drawchouda(int i){
  fill(255,0,0);
  image(imgChouda,thingX[i],thingY[i],100,100);
}
void drawDola(int i){
  fill(0);
  image(imgDola,thingX[i],thingY[i],100,100);
}
void drawMoney(int i){
  fill(#FF6803);
  image(imgMoney ,thingX[i],thingY[i],100,100);
}
void scores(int i){
  if( AriX + 100 >= thingX[i] && thingX[i]+100>=AriX && AriY <= thingY[i]+100){
  newThing(i);
  score++;
  }
  if(score==20)
  stage=1;
}
預覽圖片:

WEEK07

1.
 請列出你今天三個小時,要完成的事

掉落物品更新 會開始掉落物品

腳色基本移動控制 倒數計時三秒鐘

2. 你在期中作品要做到什麼程度

有背景音樂 限制時間

控制腳色移動範圍 接到的東西會消失 並且發出聲音



3. Why? 你為什麼要做它

基本的接金幣遊戲

因為遊戲的基礎都有了

就能再做其他種的遊戲了

4.
程式碼更新:
int N=4;
float MarioX=150;
float MarioY=700;
float []thingX = new float[4];
float []thingY = new float[4];
float []thingType = new float[4];
PImage imgMoney;
PImage imgMario;
PImage imgDola;
PImage imgChouda;

void setup(){
  size(400,800);
  imgMoney=loadImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7QrpaoSIHQYaGxdmSzdz3JmZiv6i8UHFaZtqqilKDAIhCynO58_nMbT3AiF3QwrSd8fGTB7h-FpNk5tfADmo_YVx56YNjglctM6VUgEnN1WSCmAvZUKzMk7L33X1gL-FaROjWB0s_kys/s320/%E6%99%AE%E6%B4%B1%E8%8C%B6%E7%A3%9A%E7%A6%8F%E5%AD%97%E5%8E%BB%E8%83%8C%E5%9C%96.jpg");
  imgMario=loadImage("http://pic.pimg.tw/aa118123/f44256e2606a66726f18407530485106.png");
  imgDola=loadImage("http://album.udn.com/community/img/PSN_PHOTO/surpanp/f_3296895_1.gif");
  imgChouda=loadImage("http://weakminded.blog.ithome.com.tw/gallery/4945/4945-82745.jpg");
  for(int i=0;i<N;i++){
    newThing(i);
  }
}
int countDown=3*30;
void draw(){
  if(countDown>0){
     background(255,0,0);
     countDown--;
     text("Start: "+countDown/30,150,350);
     return ;
  }
  background(255);
  for(int i=0;i<N;i++){
    if(thingType[i]==1) drawGood(i);
    else if(thingType[i]==2) drawBad(i);
    else if(thingType[i]==3) drawTrash(i);
   thingY[i]+=4;
   if(thingY[i]>800) newThing(i);
  }
  image(imgMario,MarioX,MarioY,100,100);
}
void keyPressed(){
  if(keyCode==RIGHT) MarioX+=10;
  if(keyCode==LEFT) MarioX-=10;
}

void newThing(int i) {
  thingY[i]=-random(200);
  thingX[i]=random(400);
  thingType[i]=int(random(3))+1;
}
void drawGood(int i){
  fill(255,0,0);
  image(imgChouda,thingX[i],thingY[i],100,100);
}
void drawBad(int i){
  fill(0);
  image(imgDola,thingX[i],thingY[i],100,100);
}
void drawTrash(int i){
  fill(#FF6803);
  image(imgMoney ,thingX[i],thingY[i],100,100);
}
5.截圖

WEEK06

1.

2.
int []sequence = new int [1000];
PImage imgMoney;
PImage imgMario;
void setup(){
  size(300,800);
  imgMoney=loadImage("http://politicalhat.com/wp-content/uploads/2013/05/money-bag1.jpg");
  imgMario=loadImage("http://www.geeksraisinggeeks.com/wp-content/uploads/2013/08/Mario-Animals.jpg");
  for(int i=0;i<1000;i++){
    sequence[i] = int(random(3));
  }
}
int now=0;
void draw(){
  background(#FFFFFF);
  for(int i= now;i<now+5;i++){
    image(imgMoney , sequence[i]*100, 400-(i-now)*100,100,100);
  }
  image(imgMario,100,500,100,100);
}
void keyPressed(){
  if(key==sequence[now]+'0') now++;
  else {}
}

week 05

今天目標: 
(1) 會轉動的漂亮的花花, 
(2) 思考決定期中作品

1.首先先畫出簡易的花瓣~~

程式碼:


size(640,480); //建一個視窗

translate(300,200);

fill(255,0,232);
rotate(PI/18*1);//以畫面左上角為中心 開始旋轉
ellipse(0,0,40,200);//畫橢圓

rotate(PI/18*1);
ellipse(0,0,40,200);

rotate(PI/18*1);
ellipse(0,0,40,200);

2.將FOR迴圈加入之後 花瓣的繪製變得更簡單了

程式碼:
void setup() {
  size(640, 480); //建一個視窗
}

void draw() {
  translate(300, 200);//移動位置

  for (int i=0;i<18;i++) {
    fill(255, 0, 232);
    rotate(PI/18*1);//以畫面左上角為中心 開始旋轉
    ellipse(0, 0, 40, 200);//畫橢圓
  }

}

3.將MOUSEX MOUSEY的原理帶入 再利用MOUSECLICKED 點擊的功能

使程式可以做更多的事情 現在只要在螢幕上晃動 顏色會隨著滑鼠座標而改變

變得更淡還是更鮮豔 點擊則是會增加花瓣個數 點擊一下 就會增加一片

程式碼:

void setup() {

  size(640, 480); //建一個視窗

  colorMode(HSB, 480);

}

int flowerBan=8;

void draw() {

  translate(mouseX, mouseY);//移動位置

  fill(mouseX, mouseY, 480);

  for (int i=0;i<flowerBan;i++) {

    rotate(PI/flowerBan);//以畫面左上角為中心 開始旋轉

    ellipse(0, 0, 40, 200);//畫橢圓

  }

}

void mouseClicked(){

  flowerBan++;

}

4.繪製出真的花一朵~~然後把它跟憤怒鳥放在一起
這樣比較可愛
畫面會隨著你滑鼠的移動 而變色~~

程式碼:
PImage imgBird;
void setup() {
  size(640, 480); //建一個視窗
  colorMode(HSB, 480);
  imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
}
int flowerBan=8;
float r=0.01;
void draw() {
  background(125,mouseX*1/2,mouseY*1/3);
  image(imgBird, mouseX-50, mouseY-20, 200 ,200);
  translate(mouseX, mouseY);//移動位置
  rotate(r);
  r+=0.1;
  fill(mouseX, mouseY, 480);
  for (int i=0;i<flowerBan;i++) {
    rotate(PI/flowerBan);//以畫面左上角為中心 開始旋轉
    ellipse(0, 0, 40, 200);//畫橢圓
  }
  fill(mouseX,mouseY/3*1,480);
  ellipse(0,0,40,40);
}

5.可以用滑鼠按一下 就能做一朵花~~ 滑鼠移動會變色~
這裡利用了陣列~~
PImage imgBird;
int [] X=new int[100];
int [] Y=new int[100];
int N=0;
void setup() {
  size(640, 480); //建一個視窗
 // colorMode(HSB, 480);
  imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
}
float r=0;
void draw() {
  r+=0.01;
  background(0);
  image(imgBird, mouseX-50, mouseY-20, 200, 200);
  for(int i=0;i<N;i++)
  myFlower(X[i],Y[i]);
 
  myFlower(mouseX,mouseY);
}
void myFlower(int x, int y) {
  pushMatrix();
  translate(x, y);//移動位置
  rotate(r);
  for (int i=0;i<5;i++) {
    fill(mouseX, mouseY, 480);
    rotate(PI/20);//以畫面左上角為中心 開始旋轉
    ellipse(0, 0, 40, 200);//畫橢圓
  }
  fill(mouseX, mouseY/3*1, 480);
  ellipse(0, 0, 40, 40);
  popMatrix();
}
void mousePressed() {
  X[N]=mouseX;
  Y[N]=mouseY;
  N++;
  if (N>=100) N=0;
}

6.期中遊戲:破壞桌面~

利用課堂上製作小畫家的概念
繪製一張背景圖
可以選擇工具 來破壞那張背景圖
這個遊戲可以用來發洩情緒~~~

7.心得:
今天利用了很多FOR還有滑鼠控制
讓我越來越熟練這兩個的用途
利用滑鼠移動變顏色..等等
還學了旋轉 剛開始的時候還不太會用
現在有比較會了 調整速度 調整 旋轉角度
希望還可以再複習一次最後一次的動態陣列~~