2018互動技術: 05160630

顯示具有 05160630_阮致峰 標籤的文章。顯示所有文章

2019年1月10日星期四

week17 期末作品呈現

https://www.youtube.com/watch?v=SCsTUaNlIHM
期末呈現

week16 期末作品

仍在嘗試把滑鼠的輸入方式更改成類比搖桿

(https://www.youtube.com/watch?v=SCsTUaNlIHM)

week14 阮致峰

旋鈕

連接板子

開啟範例

(點選圖中網址可以連結到網站)

轉動旋鈕即可改變燈光閃爍頻率

week13 阮致峰

把arduino跟processing做連結

用processing裡面的範例

SimpleReadProcessing\file\example\libaries\serial\ SimpleRead

把程式碼複製貼到arduino

1. 在arduino裡把pinMode的INPUT改為PULLUP_INPUT
2. 把接腳改為2
3. Processing : new Serial的第二個參數改成連上的埠(ex:COM3)

燈光閃爍
void setup()
{
for(int i=2 ; i<=13 ;i++)
{
pinMode(i,OUTPUT);
}
}

void loop()
{
for(int i=2 ; i<13 ; i++)
{
digitalWrite(i , HIGH);
delay(300); }
for(int i=2 ; i<=13 ; i++)
{
digitalWrite(i,LOW);
}
}

播放音樂(小星星)
int piezoPin = 8;
int length = 15;
char notes[] = "ccggaag ffeeddc ggffeed ggffeed ccggaag ffeeddc ";
int beats[] = { 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2, 4 };
int tempo = 300;
void playTone(int tone, int duration)
{
for (long i = 0; i < duration * 1000L; i += tone * 2)
{
digitalWrite(piezoPin, HIGH);
delayMicroseconds(tone);
digitalWrite(piezoPin, LOW);
delayMicroseconds(tone);
}
}

void playNote(char note, int duration)
{
char names[] = { 'c', 'd', 'e', 'f', 'g', 'a', 'b', 'C' };
int tones[] = { 1915, 1700, 1519, 1432, 1275, 1136, 1014, 956 };
for (int i = 0; i < 8; i++)
{
if (names[i] == note)
{
playTone(tones[i], duration);
}
}
}

void setup()
{
pinMode(piezoPin, OUTPUT);
}

void loop()
{
for (int i = 0; i < length; i++)
{
if (notes[i] == ' ')
{
delay(beats[i] * tempo);
}
else
playNote(notes[i], beats[i] * tempo);
delay(tempo / 2);
}
}

燈光跟著音樂閃動
int piezoPin = 8;
int length = 15;
char notes[] = "ccggaag ffeeddc ggffeed ggffeed ccggaag ffeeddc ";
int beats[] = { 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2, 4 };
int tempo = 300;

void playTone(int tone, int duration)
{
for (long i = 0; i < duration * 1000L; i += tone * 2)
{
digitalWrite(piezoPin, HIGH);
delayMicroseconds(tone);
digitalWrite(piezoPin, LOW);
delayMicroseconds(tone);
}
}

void playNote(char note, int duration)
{
int LED[]= {3, 4, 5, 6, 7, 9, 10, 11}; ///老師寫的第一行是陣列
char names[] = { 'c', 'd', 'e', 'f', 'g', 'a', 'b', 'C' };
int tones[] = { 1915, 1700, 1519, 1432, 1275, 1136, 1014, 956 };
for (int i = 0; i < 8; i++)
{
if (names[i] == note)
{
digitalWrite (LED[i],HIGH ); ///第二行要撥聲音之前，先把對應的led亮起來
playTone(tones[i], duration);
digitalWrite(LED[i],LOW); /// 第三行撥聲音之後先把對應的led暗掉
}
}
}

void setup()
{
for(int i=2;i<=13;i++) pinMode(i,OUTPUT); ///第四行在執行之前把每個腳位都設成OUTPUT 才會亮跟發聲音
pinMode(2,INPUT_PULLUP);
}

void loop()
{
for (int i = 0; i < length; i++)
{
if (notes[i] == ' ')
{
delay(beats[i] * tempo);
}
else
playNote(notes[i], beats[i] * tempo);
delay(tempo / 2);
}
}

week10 阮致峰

到官網下載驅動程式

https://makeruno.com.my/getting-started/?fbclid=IwAR0BbCC92god1fDsUUfDWVUTH_wFJ31RQz38n3PnoikAnDcpzCuo475fFGs

當安裝成功並接上板子，到裝置管理員查看

有出現表示安裝成功了

week09 阮致峰

week07 阮致峰

1.
int life=10;
boolean gameOver=false;
void setup()
{
size(500,500);
}
void draw()
{
background(0,0,205);
fill(255); rect(50,50, 100,20);
fill(255,0,0); rect(50,50, life*10,20);
if(gameOver){
textSize(40);
text("Game Over",150,150);
}
}
void mousePressed()
{
life--;
if(life<=0) gameOver=true;
}
血條

week06 阮致峰

1.
水果忍者
float fruitX, fruitY, fruitVX, fruitVY;
void setup()
{
size(800,600);
fruitX=30; fruitVX=3;
fruitY=700; fruitVY=-35;
}
void draw()
{
background(0);
ellipse(fruitX,fruitY,100,100);
fruitX+=fruitVX;
fruitY+=fruitVY;
fruitVY+=0.98;
}

2.
很多水果的水果忍者
float [] fruitX=new float[20];
float [] fruitY=new float[20];
float [] fruitVX=new float[20];
float [] fruitVY=new float[20];
void setup()
{
size(800,600);
for(int i=0;i<20;i++){
fruitX[i]=random(800); fruitVX[i]=3;
fruitY[i]=700; fruitVY[i]=-35;
}
}
void draw()
{
background(0);
for(int i=0;i<20;i++){
ellipse(fruitX[i],fruitY[i],100,100);
fruitX[i]+=fruitVX[i];
fruitY[i]+=fruitVY[i];
fruitVY[i]+=0.98;
}
}

3.
可切水果

float [] fruitX=new float[20];

float [] fruitY=new float[20];

float [] fruitVX=new float[20];

float [] fruitVY=new float[20];

void reborn(int i){

fruitX[i]=random(800); fruitVX[i]=(6)-3;

fruitY[i]=700; fruitVY[i]=-35;

}

void setup(){

size(800,600);

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

reborn(i);

}

void draw(){

background(0);

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

if( dist(mouseX, mouseY, fruitX[i],fruitY[i])<=50){

reborn(i); continue;

}

ellipse(fruitX[i],fruitY[i], 100,100);

fruitX[i]+=fruitVX[i];

fruitY[i]+=fruitVY[i];

fruitVY[i]+=0.98;

if(fruitY[i]>700) reborn(i);

}

week02 阮致峰

用不同的圓接龍

也可以換成圖片

2018年11月22日星期四

Week08 光

第8周

期中作品：減肥日記
https://youtu.be/i0oiqKgwiwc

操作：
點擊滑鼠左鍵肥宅開始往上跳利用滑鼠來移動肥宅
藉由踩階梯來進行第二次的彈跳跳越高分數越多

2018年10月11日星期四

week05 阮致峰

1. 雞蛋掉下來
float[] eggY = new float[100];
void setup(){
size(800,600);
for(int i=0;i<100;i++)
{
eggX[i]=random(100,700);///random是亂數的意思
eggY[i]=-random(2000);
}
}
void draw()
{
background(255);
for(int i=0;i<100;i++)
{
ellipse(eggX[i],eggY[i],80,100);
eggY[i]+=5;
}
}

2. 接雞蛋
float[] eggX = new float[100];
float[] eggY = new float[100];
boolean[] eggDie=new boolean[100];
void setup(){
size(800,600);
for(int i=0;i<100;i++)
{
eggX[i]=random(100,700);
eggY[i]=-random(2000);
eggDie[i]=false;
}
}
void draw()
{
background(255);
rect(mouseX-50,mouseY-25,100,50);
for(int i=0;i<100;i++)
{
if(eggDie[i])continue;
ellipse(eggX[i],eggY[i],80,100);
eggY[i]+=5;
if(eggY[i]>700) eggY[i]=-2000+600;
if(dist(mouseX-50,mouseY-25,eggX[i],eggY[i])<50)
{
eggDie[i]=true;
}
}
}

3.算分數
float[] eggX = new float[100];
float[] eggY = new float[100];
boolean[] eggDie=new boolean[100];
void setup(){
size(800,600);
for(int i=0;i<100;i++)
{
eggX[i]=random(100,700);
eggY[i]=-random(2000);
eggDie[i]=false;
}
}
int score=0;
void draw()
{
background(255);
fill(255);
rect(mouseX-50,mouseY-25,100,50);
for(int i=0;i<100;i++)
{
if(eggDie[i])continue;
ellipse(eggX[i],eggY[i],80,100);
eggY[i]+=5;
if(eggY[i]>700) eggY[i]=-2000+600;
if(dist(mouseX,mouseY,eggX[i],eggY[i])<50)
{
eggDie[i]=true;
score+=100;
}
}
fill(255,0,0);
textSize(80);
text("Score:"+score,100,100);
}

4.用自己的圖做分數(注意圖檔名和圖檔副檔名)
PImage [] imgN=new PImage[10];
float[] eggX = new float[100];
float[] eggY = new float[100];
boolean[] eggDie=new boolean[100];
void setup(){
size(800,600);
for(int i=0;i<=9;i++)
imgN[i]=loadImage("0"+i+".png");
for(int i=0;i<100;i++)
{
eggX[i]=random(100,700);
eggY[i]=-random(2000);
eggDie[i]=false;
}
}
int score=0;
void draw()
{
background(255);
fill(255);
rect(mouseX-50,mouseY-25,100,50);
for(int i=0;i<100;i++)
{
if(eggDie[i])continue;
ellipse(eggX[i],eggY[i],80,100);
eggY[i]+=5;
if(eggY[i]>700) eggY[i]=-2000+600;
if(dist(mouseX,mouseY,eggX[i],eggY[i])<50)
{
eggDie[i]=true;
score+=100;
}
}
int now=score;
for(int i=0;i<7;i++)
{
image(imgN[(now%10)],400-i*100,100,100,150);
now/=10;
}
}

5.水果忍者
PImage img;
float cherryX=0, cherryY=700;
float cherryVX=6,cherryVY=-40;
void setup()
{
size(800,600);
img=loadImage("cherry.png");
for(int i=0;i<10;i++)
sword[i]=new PVector();
}
PVector [] sword = new PVector[10];
void draw()
{
background(255);
image(img,cherryX,cherryY,100,150);
cherryX += cherryVX;
cherryY += cherryVY;
cherryVY += 0.98;
for(int i=9;i>0;i--)
{
sword[i].x=sword[i-1].x;
sword[i].y=sword[i-1].y;
}
sword[0].x=mouseX;
sword[0].y=mouseY;
for(int i=1;i<10;i++)
{
line(sword[i].x,sword[i].y,sword[i-1].x,sword[i-1].y);
}
}

6. 水果重生(陣列[]要在前面)
PImage []img=new PImage[8];
float []cherryX=new float[8];
float []cherryY=new float[8];
float []cherryVX=new float[8];
float []cherryVY=new float[8];
void cherryReborn(int i)
{
cherryX[i]= random(800);
cherryY[i]=700;
cherryVX[i]=random(8)-4;
cherryVY[i]=-40;
}
void setup()
{
size(800,600);
for(int i=0;i<8;i++)
img[i]=loadImage("cherry.png");
for(int i=0;i<8;i++)
cherryReborn(i);
for(int i=0;i<10;i++)
sword[i]=new PVector();
}
PVector [] sword = new PVector[10];
void draw()
{
background(255);
for(int i=0;i<8;i++)
{
image(img[i],cherryX[i],cherryY[i],100,150);
cherryX[i] += cherryVX[i];
cherryY[i] += cherryVY[i];
cherryVY[i] += 0.98;
}
for(int i=9;i>0;i--)
{
sword[i].x=sword[i-1].x;
sword[i].y=sword[i-1].y;
}
sword[0].x=mouseX;
sword[0].y=mouseY;
for(int i=1;i<10;i++)
{
line(sword[i].x,sword[i].y,sword[i-1].x,sword[i-1].y);
}
}

2018年10月4日星期四

week04 阮致峰

1. 畫出一個方框以及文字
void setup()
{
size(800,600);
}
void draw()
{
fill(255,0,0);//用紅色填滿
rect(100,100,100,100);//方框(座標100,100)大小(100,100)
textSize(80);//文字大小
fill(0,0,0);//黑色填滿
text("Start!",100,100);//文字
}

2. 製作一個按下鍵盤會飛出的子彈
void setup()
{
size(800,600);
}
void draw()
{
background(255);//更新背景為白色，則會留殘影
fill(255,0,0);
rect(100,100,100,100);
if(bulletFlying)///3
{
ellipse(bulletX,bulletY,50,50);
bulletX+=3;//往右3個單位
}
}
float bulletX=100,bulletY=100;
boolean bulletFlying=false;///1
void keyPressed()
{
bulletFlying=true; ///2
}

3. 製作100顆子彈(第100顆會當機)
void setup()
{
size(800,600);
}
void draw()
{
background(255);
fill(255,0,0);
rect(100,100,100,100);
for(int i=0;i<bulletN;i++)//寫一個迴圈讓子彈一直飛
{
if(bulletFlying[i])
{
ellipse(bulletX[i],bulletY[i],50,50);
bulletX[i]+=3;
}
}
}
float []bulletX=new float[100];//設內有100個位子的陣列(所有X都要改成陣列)
float []bulletY=new float[100];//設內有100個位子的陣列(所有Y都要改成陣列)
int bulletN=0;
boolean []bulletFlying=new boolean[100];
void keyPressed()
{
bulletFlying[bulletN]=true;
bulletX[bulletN] = 100;
bulletY[bulletN] = 100;
bulletN++;//要bulletN++才會有子彈跑出來，不然一直都是0
}

4. 讓子彈跟著滑鼠，按下左鍵發射
PImage imgbullit, imgback;//圖片名稱
void setup()
{
size(800,600);
imgback = loadImage("back.jpg");
imgbullit = loadImage("bullit.png");
imageMode(CENTER);
}
void draw()
{
image(imgback,width/2,height/2,width,height);//(/2是座標，後面是大小)
image(imgbullit,mouseX,mouseY,100,100);
for(int i=0;i<bulletN;i++)
{
if(bulletFlying[i])
{
image(imgbullit,bulletX[i],bulletY[i],100,100);
bulletX[i]+=3;
}
}
}
float []bulletX=new float[100];
float []bulletY=new float[100];
int bulletN=0;
boolean []bulletFlying=new boolean[100];
void mousePressed()//滑鼠函式
{
bulletFlying[bulletN]=true;
bulletX[bulletN] = mouseX;
bulletY[bulletN] = mouseY;
bulletN++;
}

5. 做彈跳的球
PImage imgbullit, imgback;
void setup()
{
size(800,600);
imgback = loadImage("back.jpg");
imgbullit = loadImage("bullit.png");
imageMode(CENTER);
}
void draw()
{
image(imgback,width/2,height/2,width,height);
ellipse(mouseX,mouseY,100,100);
for(int i=0;i<bulletN;i++)
{
if(bulletFlying[i])
{
ellipse(bulletX[i],bulletY[i],100,100);
bulletY[i]+=bulletVY[i];
bulletVY[i]+=0.98;//重力加速度
}
}
}
float []bulletX=new float[100];
float []bulletY=new float[100];
float []bulletVY = new float[100];//y軸速度
int bulletN=0;
boolean []bulletFlying=new boolean[100];
void mousePressed()
{
bulletFlying[bulletN]=true;
bulletX[bulletN] = mouseX;
bulletY[bulletN] = mouseY;
bulletVY[bulletN]=-20;//往上彈
bulletN++;
}

期中作品：減肥日記

遊戲一開始有一個肥宅

他會一直往上跳

碰到台階再往上跳

有些台階上會有食物

肥宅會發射甜甜圈來打怪物

如果不小心碰到食物就會太胖掉下來死掉

2018年9月27日星期四

week03 阮致峰

1. 開啟processing

2. 畫出6個三角形組成的六角形
void setup()
{
size(500,500);
}

void draw()
{
ellipse(250,250,480,480);///250,250為圓心 480,480為直徑
for(float angle=0; angle<PI*2; angle+=PI/3)///PI為圓周率的拍
{
triangle(250,250,
250+240*cos(angle), 250+240*sin(angle),
250+240*cos(angle+PI/3), 250+240*sin(angle+PI/3));
}
}

3. 重複畫出三角形
void setup(){
size(500,500);
}

void draw(){
ellipse(250,250,480,480);
for(float angle=0; angle<PI*2; angle+=PI/3)
{
for(int R=0; R<=240; R+=30)///設R讓半徑改變
{
noFill();///不填充(填滿)
triangle(250,250,
250+R*cos(angle), 250+R*sin(angle),
250+R*cos(angle+PI/3), 250+R*sin(angle+PI/3));
}
}
}

4. 角度變小
void setup(){
size(500,500);
}

void draw(){
ellipse(250,250,480,480);
for(float angle=0; angle<PI*2; angle+=PI/3)
{
for(int R=0; R<=240; R+=20)///設R讓半徑改變
{
noFill();///不填充(填滿)
triangle(250,250,
250+R*cos(angle), 250+R*sin(angle),
250+R*cos(angle+PI/3), 250+R*sin(angle+PI/3));
}
}
}

5. 畫出一堆三角形
void setup(){
size(800,400);
}

void myTriangle(int cx, int cy)
{
float a= -PI/2;
for(int R=15; R>0; R-=5)
{
triangle(cx+R*cos(a), cy+R*sin(a),
cx+R*cos(a+2*PI/3), cy+R*sin(a+2*PI/3),
cx+R*cos(a-2*PI/3), cy+R*sin(a-2*PI/3));
}
}

void draw(){
background(255);
for(int cx=20; cx<800 ;cx+=40)
{
for(int cy=20; cy<400; cy+=40)
{
myTriangle(cx,cy);
}
}
}

6.讓馬力歐移動
PImage imgMario;
float marioX=0, marioY=0;
void setup()
{
size(400,600);
imgMario = loadImage("mario.png");
}
void draw()
{
background(255);
image(imgMario, marioX,marioY,150,150);
}
void keyPressed()
{
if(keyCode==UP) {marioY-=5;}
if(keyCode==DOWN) {marioY+=5;}
if(keyCode==LEFT) {marioX-=5; }
if(keyCode==RIGHT) {marioX+=5;}
}

7. 讓馬力歐跳
PImage imgMario;
float marioX=0, marioY=0,marioVX=2,marioVY=0,marioAX=0,marioAY=0.1;
void setup()
{
size(400,600);
imgMario = loadImage("mario.png");
}
void draw()
{
///background(255);
image(imgMario, marioX,marioY,150,150);
marioX += marioVX;
marioY += marioVY;
marioVX += marioAX;
marioVY += marioAY;
}
void keyPressed()
{
if(keyCode==UP) {marioY-=5;}
if(keyCode==DOWN) {marioY+=5;}
if(keyCode==LEFT) {marioX-=5; }
if(keyCode==RIGHT) {marioX+=5;}
}

8.讓馬力歐跳(修改版)
PImage imgMario;
float marioX=0, marioY=100,marioVX=5,marioVY=0,marioAX=0,marioAY=0.1;
void setup()
{
size(400,600);
imgMario = loadImage("mario.png");
}
void draw()
{
background(255);
image(imgMario, marioX,marioY,150,150);
marioX += marioVX;
marioY += marioVY;
marioVX += marioAX;
marioVY += 0.98;
if(marioY>500)
{
marioVY = - marioVY * 0.8;
marioY = 500;
}
if(marioX>300) marioVX = - marioVX;
if(marioX<0) marioVX = - marioVX;

}
void keyPressed()
{
if(keyCode==UP) {marioY-=5;}
if(keyCode==DOWN) {marioY+=5;}
if(keyCode==LEFT) {marioX-=5; }
if(keyCode==RIGHT) {marioX+=5;}
}

2018年9月13日星期四

week01 阮致峰

1. 到 processing.org 下載windows64

2. 執行程式

3. 畫出線/面，並放大視窗
line(0,0,100,100)//從(0,0)到(100,100)畫一條線
size(800,600)//視窗大小放大到800*600
rect(100,100,300,300)//從(100,100)到(300,300)畫一個方

4. 文件 > 偏好設定可以更改字體大小

5. 做互動
畫出一個800*600的綠色面
點下滑鼠變紅色
void setup() //(設定初始)視窗大小
{
size(800,600);
}
void draw() //(更新)畫背景
{
if(mousePressed) background(255,0,0);
else background(0,255,0);
}

6. 做簡易小畫家
void setup() //(設定初始)視窗大小
{
size(800,600);
}
void draw() //(更新)當按下滑鼠，畫出線(pmouseX為滑鼠前一個x位置)
{
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}

7. 做出筆觸及顏色

void setup() //(設定初始)視窗大小

{

size(800,600);

}

void draw() //(更新)當按下滑鼠，畫出線(pmouseX為滑鼠前一個x位置)

{

if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);

}

void keyPressed() //當滑鼠按下1,2,9改變筆觸大小，r,g,b改變顏色

{

if(key=='1') strokeWeight(1);

if(key=='2') strokeWeight(2);

if(key=='9') strokeWeight(9);

if(key=='r') stroke(255,0,0);

if(key=='g') stroke(0,255,0);

if(key=='b') stroke(0,0,255);

}

p.s:對變顏色的程式碼按右鍵可以搜尋功能說明及同類型的其他函式

訂閱：文章 (Atom)

2018互動技術

2019年1月10日星期四

week17 期末作品呈現

week16 期末作品

week15 阮致峰

week14 阮致峰

week13 阮致峰

week12 阮致峰

week11 阮致峰

week10 阮致峰

week09 阮致峰

week07 阮致峰

week06 阮致峰

week02 阮致峰

2018年11月22日星期四

Week08 光

2018年10月11日星期四

week05 阮致峰

2018年10月4日星期四

week04 阮致峰

期中作品：減肥日記

2018年9月27日星期四

week03 阮致峰

2018年9月13日星期四

week01 阮致峰

2019年1月10日 星期四

2018年11月22日 星期四

2018年10月11日 星期四

2018年10月4日 星期四

期中作品：減肥日記

2018年9月27日 星期四

2018年9月13日 星期四

2019年1月10日星期四

2018年11月22日星期四

2018年10月11日星期四

2018年10月4日星期四

2018年9月27日星期四

2018年9月13日星期四