2012互動技術概論: 2012-12-23

2012年12月27日星期四

Week15.HW12

本周將銜接上禮拜的繼續增加按鈕操控的部分

本已大致安排好按鈕位置與功能鍵

但好像跟其他組類似所以我們有意改做其他的

因為計畫敢不上變化重新會導致整個作業將從零開始

所以我們也將斟酌情況製作出遊戲

因為時間緊迫若成果未如預期敬請包含

我們將繼續加油。

2012年12月26日星期三

期末作品進度

作品名稱: 划船遊戲

1、遊戲規則初步想法

利用兩個按鍵不斷輪替按著，讓船有加速度不斷前進，
接著計算其到達終點的時間，讓玩家挑戰最佳時間最短的紀錄。

2、確認作品操控以及進行的方向

我們的想法是由google和逆向思考的小遊戲所結合的，
這周我們討論遊戲的前進控制和玩法，
我們打算利用兩個按鈕控制他的前進方向，
小葉老師有建議我們利用旋鈕來做類似雙渦輪的設定，
但是後來發現，我們利用按鈕簡單的控制物體前進的加速度，
在配合他轉彎X值做加減以及背景地圖的不斷延伸，
就可以讓他有往左前和右前的方向以及速度控制。

3、素材貼圖

4、心得

在規劃這作品前，我們最擔心的是按鈕的配合，

也就是arduino和processing的連接，因為沒有試過的經驗，

在小葉老師上課的範例中，我們有嘗試著做修改，

arduino是不是可以傳兩個不一樣的值，然後processing可以分別，

但是我們試了很久，還是搞不懂為甚麼他只給我們讀到一個按鈕的訊號，

這是我們這一周所遇到的問題，我們雖然只需要兩個按鍵，

但是這個問題會是我們期末作品最大的一個瓶頸，

所以我想可以馬上解決問題，往完整的作品邁向一大步。

2012年12月25日星期二

期末

PImage img;
int rx=28,ry=5;
boolean move = true;
void setup() {
size(400, 400);
img = loadImage("path.jpg");
}
void draw() {
image(img, 0, 0);
loadPixels();

fill(225, 0, 0);//點點
ellipse(rx, ry, 10, 10);

if (move==true) {
    if(key==97) rx=rx-1;
    if(key==119) ry=ry-1;
    if(key==100) rx=rx+1;
    if(key==115) ry=ry+1;
}
color now_color = pixels[ry*400+rx];

if (rx>398){
    rx=398;
    fill(0, 0, 0);
    rect(0, 0, 400, 400);
    textSize(50);
    fill(255, 255, 0);
    text("Congratulation", 25, 220);
}

if (red(now_color)<100){
    move = false;
    fill(0, 0, 0);
    rect(0, 0, 400, 400);
    textSize(50);
    fill(255, 255, 0);
    text("GAME OVER", 60, 220);
}

else move = true;

}

Week15, HW12,

本周進度為成功時做了兩個按鈕，分別控制讓小人不掉落和重新開始遊戲的部分

本周電路板圖片

以下為本周程式碼

ｐｒｏｃｅｓｓｉｎｇ

import processing.serial.*;
Serial myPort;
int now;
int now2;
int testState=0;
//int testState2=0;
int cfg_width =450;
int cfg_height = 450;
int cfg_maxchange = 5;
float cfg_space_mod = 0.9994;
int cfg_playersize = 5;
float cfg_gravity = 1.0002;
PImage body;
float dir = 1; // current direction of the player (gravity vs pushing)
long score = 0; //分數
long maxscore = 0; //最高分紀錄
int push = 0; //按空白鍵增加
int mode = 1; // 遊戲狀態, 1=running, 0=lost, -1=lost and score printed
float cur_space = 450; // space to play
float factor = 0.5;     // how far the cave can move max in the y axis for one x step
// the cave borders
int[] ylinetop = new int[cfg_width];
int[] ylinebottom = new int[cfg_width];
// the player (snake)遊戲的線
float[] yplayer = new float[cfg_width/2];
PFont myFont;
import ddf.minim.*;
Minim minim;
AudioPlayer player;

void initcave() {

score = 0;
dir = 1;
push = 0;
cur_space = 400;
body=loadImage("bodyknife.png");

for (int i = 0; i < width; i++) {
    ylinetop[i] = height/2-int(cur_space)/2;
    ylinebottom[i] = ylinetop[i]+int(cur_space);
}

for (int i = 0; i < width/2; i++) {
    yplayer[i] = height/2;
}
}

void drawframe () {
drawframe2 ();//我寫的背景變色程式
// draw cave
stroke(255, 0, 0);
for (int i=1; i<width; i++) {
    line(i, 0, i, ylinetop[i]);
    line(i, ylinebottom[i], i, height);
}

if (mode < 1) {
    stroke(0, 255, 0);
    strokeWeight(5);
    fill(100, 255, 0);
    ellipse(width/2, yplayer[width/2 - 1], 150, 150);
}
people();
}
//背景變色程式在這邊~~~~~~~~~~~~~~~~~~~~~~~~~~~~
void drawframe2 () {
if (score/10<10) {//因為他計分我發現他是score有除以10　所以這邊也要把分數除10才會跟顯示的計分看起來一樣
    background(0, 0, 0);//小於10分
}
else if (score/10<=50) {
    background(0, 0, 255);//大於10分小於等於50分
}
else if (score/10<100) {
    background(255, 255, 255);//大於等於50分小於100分
}
else if (score/10>=100) {
    background(255, 255, 255);//大於等於100分
}
//要把所有數值的情況考慮進去，不然畫面會閃一下。例如原本是小於100 和大於100 沒有寫道等於100的情況那100分的時候遊戲畫面會閃一下
}
void people() {//小人改變大小
for (int i=1; i<width/2; i++) {
    if (score/10<50) {
      image(body, i, int(yplayer[i]), 80, 80);
    }
    else if (score/10<=100) {//大於50分小於等於100分
      image(body, i, int(yplayer[i]), 60, 60);
    }
    else if (score/10<150) {
      image(body, i, int(yplayer[i]), 30, 30);//大於100分小於150分
    }
    else if (score/10>=150) {
      image(body, i, int(yplayer[i]), 30, 30);//大於等於150分
    }
}
}

void setup()
{

size(cfg_width, cfg_height);
myPort= new Serial(this, "COM3", 9600);

initcave();
frameRate(100);
minim = new Minim(this); //播音樂
player = minim.loadFile("Kalimba.mp3"); //播音樂
   player.play(); //播音樂
    myFont = loadFont("SansSerif-12.vlw");
   textFont(myFont);
}

void drawscore()
{
stroke(0);
strokeWeight(3);
fill(0);
text("最高分紀錄： " + int(maxscore/10) + " 分數: " + int(score/10), 1, 12);//計分都有除10在這
if (mode == -1) {
    text("Game Over!再玩一次.", 2, 26);
}
}
void draw()
{

while (myPort.available ()>0) {
    testState = myPort.read();
    println(testState);
    if (testState==49)
    {
      now = 1;
    }
    if (now==1)
      dir *= 0.997;
    if (testState=='a')
    {
      mode = 1;
      initcave();

    }

if (mode == 1) {

    for (int i = 1; i < width; i++) {
      ylinetop[i-1] = ylinetop[i];
      ylinebottom[i-1] = ylinebottom[i];
    }

    for (int i = 1; i < width/2; i++) {
      yplayer[i-1] = yplayer[i];
    }

    ylinetop[width-1] =
      constrain( int( random(-cfg_maxchange, cfg_maxchange) + factor)
      + ylinetop[width-1]
      , 0, height-int(cur_space+1));
    ylinebottom[width-1] = ylinetop[width-1] + int(cur_space);

    dir = pow(cfg_gravity, dir) * dir;

    yplayer[width/2-1] = constrain(yplayer[width/2- 2] * dir, 1, height-2);

    if (yplayer[width/2-1] < ylinetop[width/2] ||
      yplayer[width/2-1] > ylinebottom[width/2]) {
      mode = 0;
    }

    cur_space *= cfg_space_mod;

    score += 1;

    if (ylinetop[width-1] < 2 || ylinebottom[width-1] > height-2) {
      factor *= -1;
    }
}
else { // collision detected
    if (mode == 0) {
      // save new max score
      maxscore = maxscore > score ? maxscore : score;
      mode = -1;
    }
}
drawframe();
drawscore();
}

void keyPressed() {

if (mode == 1 && key == '2') {
    dir *= 0.997;
}

if (mode == -1 && (key == '0' )) { //按0重新開始
    mode = 1;
    initcave();
}
}

ａｒｄｉｎｏ

/*
DigitalReadSerial
Reads a digital input on pin 2, prints the result to the serial monitor

This example code is in the public domain.
*/
// digital pin 2 has a pushbutton attached to it. Give it a name:
int pushButton = 2;
int pushButton2 = 3;
// the setup routine runs once when you press reset:
void setup() {
// initialize serial communication at 9600 bits per second:
Serial.begin(9600);
// make the pushbutton's pin an input:
pinMode(pushButton, INPUT);
pinMode(pushButton2, INPUT);
}
int a=0;
int a2=0;
// the loop routine runs over and over again forever:
void loop() {
// read the input pin:
int buttonState = digitalRead(pushButton);
int buttonState2 = digitalRead(pushButton2);
// print out the state of the button:
if (buttonState == HIGH && a==0 ) { // If switch is ON,
      Serial.print(1);
      a=1;      // send 1 to Processing
}
if (buttonState == LOW && a==1) {                               // If the switch is not ON,
    Serial.println(0);
      a=0;    // send 0 to Processing
}
if (buttonState2 == HIGH && a2==0 ) { // If switch is ON,
    Serial.print('a');
    a2=1;      // send 1 to Processing
}
if (buttonState2 == LOW && a2==1) {                               // If the switch is not ON,
    Serial.println('b');
     a2=0;    // send 0 to Processing
}
// Serial.println(buttonState);
delay(10);        // delay in between reads for stability
}

以下為我們的電路板

final

1.processing

import processing.serial.*;
Serial myPort;
int val;
void setup() {
size(400, 200);
background(255);
noStroke();
// frameRate(30);
fill(102);
myPort = new Serial(this, "COM4", 9600);
}
int d=0,r=0,m=0,f=0,s=0;
void draw() {
if(myPort.available()>0){
    val = myPort.read();//第三個重點:如果讀到數字就拿出來用
    //rect(20, 20, 72, 160);
}

fill(255, 255, 255);
stroke(0, 0, 0);
strokeWeight(2);
if(val=='G'){
   d=1;
}
else if(val=='B'){
   d=0;
}
if(val=='F'){
   r=1;
}
else if(val=='V'){
   r=0;
}
if(val=='D'){
   m=1;
}
else if(val=='C'){
   m=0;
}
if(val=='S'){
   f=1;
}
else if(val=='X'){
   f=0;
}
if(val=='A'){
   s=1;
}
else if(val=='Z'){
   s=0;
}
if(val=='H'){
    d=0;
    r=0;
    m=0;
    f=0;
    s=0;
}

//println(doo);
if(s==1){
    fill(255,0,0);
   rect(20, 20, 72, 160);
}
else if(s==0){
    fill(255);
   rect(20, 20, 72, 160);
}

   if(f==1){
    fill(255,0,0);
    rect(92, 20, 72, 160);
}
else if(f==0){
    fill(255);
   rect(92, 20, 72, 160);
}
   if(m==1){
    fill(255,0,0);
     rect(164, 20, 72, 160);
}
else if(m==0){
    fill(255);
     rect(164, 20, 72, 160);
}
   if(r==1){
    fill(255,0,0);
    rect(236, 20, 72, 160);
}
else if(r==0){
    fill(255);
    rect(236, 20, 72, 160);
}
   if(d==1){
    fill(255,0,0);
    rect(308, 20, 72, 160);
}
else if(d==0){
    fill(255);
    rect(308, 20, 72, 160);
}
fill(0);
rect(74, 20, 36, 80);
rect(146, 20, 36, 80);
rect(290, 20, 36, 80);
rect(362, 20, 18, 80);
}

2.arduinno

int buttonPin = 2;
int buttonPin3 = 3;
int buttonPin4 = 4;
int buttonPin5 = 5;
int buttonPin6 = 6;
int buttonState = 0;
int buttonState3 = 0;
int buttonState4 = 0;
int buttonState5 = 0;
int buttonState6 = 0;
void setup() {

pinMode(buttonPin, INPUT);
pinMode(buttonPin3, INPUT);
pinMode(buttonPin4, INPUT);
pinMode(buttonPin5, INPUT);
pinMode(buttonPin6, INPUT);
    Serial.begin(9600);

}
void loop() {
buttonState = digitalRead(buttonPin);
buttonState3 = digitalRead(buttonPin3);
buttonState4 = digitalRead(buttonPin4);
buttonState5 = digitalRead(buttonPin5);
buttonState6 = digitalRead(buttonPin6);

if (buttonState == HIGH) {
   tone(8, 131, 300);
   Serial.write('A');
}
else if (buttonState == LOW) {
   Serial.write('Z');
}

if (buttonState3== HIGH) {
   tone(8, 147 , 300);
   Serial.print('S');
}
else if (buttonState3 == LOW) {
   Serial.write('X');
}
if (buttonState4 == HIGH) {
   tone(8, 165 , 300);
   Serial.print('D');
}
   else if (buttonState4 == LOW) {
   Serial.write('C');
}
if (buttonState5 == HIGH) {
   tone(8, 175 , 300);
   Serial.print('F');
}
   else if (buttonState5 == LOW) {
   Serial.write('V');
}
if (buttonState6 == HIGH) {
   tone(8, 196, 300);
   Serial.print('G');
}
   else if (buttonState6 == LOW) {
   Serial.write('B');
}
else {
   Serial.print('H');
}
   delay(100);
}

3.展示歌曲火車快飛

5531 5531 2344 3455

5353 231

4222 3111

2342111

week15,hw12

1.void setup() {
size(400, 200);
background(255);
noStroke();
fill(102);
}
void draw() {
fill(255, 255, 255);
stroke(0, 0, 0);
strokeWeight(2);
rect(20, 20, 72, 160);
rect(92, 20, 72, 160);
rect(164, 20, 72, 160);
rect(236, 20, 72, 160);
rect(308, 20, 72, 160);
fill(0);
rect(74, 20, 36, 80);
rect(146, 20, 36, 80);
rect(290, 20, 36, 80);
rect(362, 20, 18, 80);

}

畫出一個鋼琴鍵盤，之後再跟arduino結合，按出一個音，鋼琴鍵盤就會變紅色。