2013互動技術概論: Week01

顯示具有 Week01 標籤的文章。顯示所有文章

2013年9月16日星期一

week01

介紹課程概要
加入部落格、FB
練習寫processing程式

今天上課的程式：

編交作業方式: tag: 000葉正聖老師, Week01, 00160011葉大明
逗號隔開, 學號姓名間不要有空格

1. 看一下去年學長姐們做的成果 (划船、吃角子老虎、數位手套、直昇機控制搖桿), 聖誔老公公下樓梯
2. 試著執行 Processing

1.

size(600,600);
background(255, 0, 0);
rect(100,100, 200,200);

2.
可以看一下老師做的 Angry Birds Brick
http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/

size(600,600);
background(255, 0, 0);
rect(100,100, 200,200);
PImage imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
image(imgBird, 0,0);
image(imgPig, 200,200, 100,100);

3.

PImage imgPig, imgBird;
void setup()
{
imgPig=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
size(600, 600);
imageMode(CENTER);
}
void draw()
{
background(255, 0, 0);
image(imgPig, 200, 200,100,100);
image(imgBird, mouseX, mouseY);
}

2013年9月15日星期日

WEEK01

0 課程準備
去年BLOG:2012interaction.blogspot.tw
1 加入課程FB社團:2013interaction(o)
2 編寫Google文件，填寫修課資料(姓名，email，手機)(o)
3 加入且設定Blog(0)

編交作業方式: tag: 000葉正聖老師, Week01, 00160011葉大明
逗號隔開, 學號姓名間不要有空格

1. 看一下去年學長姐們做的成果 (划船、吃角子老虎、數位手套、直昇機控制搖桿), 聖誔老公公下樓梯
2. 試著執行 Processing

執行結果:

size(600,600);

background(255,0,0);

rect(100,100,200,200);

-------------------------------------------

執行結果:

PImage imgBird, imgPig;

void setup(){

size(600,600);

imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");

imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");

imageMode(CENTER);

}

void draw(){

background(255,0,0);

image(imgBird, mouseX,mouseY);

image(imgPig, 200, 200, 100 ,100);

}

第一週課堂作業

PImage imgBird,imgPig;
void setup()
{
size(600,400);//視窗大小(寬,高);

//rect(100,250,100,100);//畫方形(x,y,寬,高);
imgBird=loadImage("ta.png");//圖片變數=圖片來源
imgPig=loadImage("th.jpg");//圖片變數=圖片來源

imageMode(CENTER);
}
void draw()
{
background(255,0,0);//背景顏色(R,G,B);

image(imgBird,mouseX,mouseY);//繪圖(變數名,滑鼠的X座標,滑鼠的Y座標);←這樣這張圖就會跟著滑鼠動
image(imgPig,200,200,100,100);//繪圖(變數名,x,y,寬,高);

}

PImage imgBird,imgPig;

void setup()

{

size(600,400);//視窗大小(寬,高);

//rect(100,250,100,100);//畫方形(x,y,寬,高);

imgBird=loadImage("ta.png");//圖片變數=圖片來源

imgPig=loadImage("th.jpg");//圖片變數=圖片來源

imageMode(CENTER);

}

void draw()

{

background(255,0,0);//背景顏色(R,G,B);

rect(100,100, 200,200);

image(imgBird,mouseX,mouseY);//繪圖(變數名,滑鼠的X座標,滑鼠的Y座標);←這樣這張圖就會跟著滑鼠動

image(imgPig,200,200,100,100);//繪圖(變數名,x,y,寬,高);

}

第一週作業

PImage img,img2;
void setup()
{
size(600,600);

img=loadImage("h.png");
imageMode(CENTER);
img2=loadImage("k.jpg");
}
void draw()
{
background(255,20,30);
image(img,300,300);
image(img2,mouseX,mouseY);
rect(100,200,100,150);

}

2013年9月9日星期一

第一周

##課堂內容

http://2013interaction.blogspot.tw/2013/09/week01.html
*課程自修
https://class.coursera.org/digitalmedia-001/lecture/index

##實作

基本視窗,背景色

貼圖

讓圖跟滑鼠

===程式碼===

PImage imgBird,imgPig;
void setup()
{
size(600,400);//視窗大小(寬,高);

//rect(100,250,100,100);//畫方形(x,y,寬,高);
imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");//圖片變數=圖片來源
imgPig=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");//圖片變數=圖片來源

imageMode(CENTER);
}
void draw()
{
background(255,150,0);//背景顏色(R,G,B);
image(imgBird,mouseX,mouseY);//繪圖(變數名,滑鼠的X座標,滑鼠的Y座標);←這樣這張圖就會跟著滑鼠動
image(imgPig,200,200,100,100);//繪圖(變數名,x,y,寬,高);

}

黃敦群的第一週作業

Week1 葉玉婷

size(600,600); //尺寸大小

background(255,0,0); //背景色 (R,G,B)

rect(100,100,200,200); //四邊形 (位置,長度)

第二節課的範例
size(600,600);
background(255, 0, 0);
rect(100,100, 200,200);
PImage imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
image(imgBird, 0,0);
image(imgPig, 200,200, 100,100

第三節課的範例

PImage imgBird, imgPig;

void setup() {
size(600, 600);
imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
imageMode(CENTER);
}

void draw() {
background(255, 0, 0);
image(imgBird, mouseX, mouseY);
image(imgPig, 200, 200, 100, 100);
}

Week01 課堂

0. 課程準備
0.1. 加入課程FB社團
0.2. Google文件填寫修課資料 (學號姓名,email,電話)
0.3. 加入 Blog, 設定

編交作業方式: tag: 000葉正聖老師, Week01, 00160011葉大明
逗號隔開, 學號姓名間不要有空格

PImage imgBird, imgPig;

void setup() {

size(600, 600);

imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");

imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");

imageMode(CENTER);

}

void draw() {

background(255,255, 0);

image(imgBird, mouseX, mouseY);

image(imgPig, 200, 200, 100, 100);

}

-----------------------------------------------------------------------------------------------
HW01:

PImage imgA, imgB;

void setup() {
size(600, 600);
imgA=loadImage("http://img.amiami.jp/images/product/review/133/FIG-COL-6195_01.jpg");
imgB =loadImage("https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/530525_601612023222194_227493450_n.png");
imageMode(CENTER);
}

void draw() {
background(255,255, 0);
rect(100,100,100,100);
image(imgA,mouseX, mouseY,200,200);
image(imgB, 200, 200, 200, 200);
}

Week01

size(600,600);

background(255, 0, 0);

rect(100,100, 200,200);

PImage imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");

PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");

image(imgBird, 0,0);

image(imgPig, 200,200, 100,100);

PImage imgBird, imgPig;

void setup(){
size(600,600);
imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
imageMode(CENTER);
}
void draw(){
background(25, 200, 150);
image(imgBird, mouseX,mouseY);
image(imgPig, 200,200,100,100);
}

程式碼
PImage imgBird,imgPig;
void setup(){
size(600,600); //視窗大小
rect(100,100,200,200); //方框位置大小
imgBird=loadImage //匯入圖片("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
imageMode(CENTER); //滑鼠在圖片中心
}
void draw(){
background(100, 100, 200); //背景顏色
image(imgBird, mouseX,mouseY); //bird隨著滑鼠動
image(imgPig, 200,200, 100,100); //pig圖片位置
}

成果展示

陳建勳的第一周作業

0.1. 加入課程FB社團
0.2. Google文件填寫修課資料 (學號姓名,email,電話)
0.3. 加入 Blog, 設定

PImage imgBird, imgPig;

void setup() {
size(600, 600);
imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
imageMode(CENTER);
}

void draw() {
background(255, 0, 0);
image(imgBird, mouseX, mouseY);
image(imgPig, 200, 200, 100, 100);
}

week01

0. 課程準備
0.1. 加入課程FB社團
0.2. Google文件填寫修課資料 (學號姓名,email,電話)
0.3. 加入 Blog, 設定

編交作業方式: tag: 000葉正聖老師, Week01, 00160011葉大明
逗號隔開, 學號姓名間不要有空格

PImage imgBird, imgPig;

void setup() {
size(600, 600);
imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
imageMode(CENTER);
}

void draw() {
background(255, 200, 150);
image(imgPig, mouseX, mouseY,200,200);
image(imgBird, 200, 200, 100, 100);

}

第一週

1. 看一下去年學長姐們做的成果 (划船、吃角子老虎、數位手套、直昇機控制搖桿), 聖誔老公公下樓梯
2. 試著執行 Processing

size(600,600);
background(255, 0, 0);
rect(100,100, 200,200);

課堂範例

可以看一下老師做的 Angry Birds Brick
http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/

size(600,600);
background(255, 0, 0);
rect(100,100, 200,200);
PImage imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
image(imgBird, 0,0);
image(imgPig, 200,200, 100,100);

課堂範例

第一周

99160761_HW1黃聖恩

size(800, 600);
background(200, 125, 0);
rect(50,50,700,500);
PImage img1=loadImage("http://dreamself.me/profile/h8vS.png");
PImage img2 =loadImage("http://dreamself.me/profile/ihcN.png");
image(img1, 51, 51, 165, 240);
image(img2, 585, 310, 165, 240);
上面是一般簡易基礎寫法。

下面這種是比較正確的方式寫法。

PImage imgBTS, imgCCA;
void setup() {
size(800, 600);
imgBTS=loadImage("http://dreamself.me/profile/h8vS.png");
imgCCA =loadImage("http://dreamself.me/profile/ihcN.png");
imageMode(CENTER);
}

void draw() {
background(200, 125, 0);
rect(50,50,700,500);
image(imgBTS, 156, 191, 165, 240);
image(imgCCA, mouseX, mouseY, 165, 240);
}
loadImage("http://dreamself.me/profile/ihcN.png");可以直接連結到網路上的圖片。
imageMode(CENTER); 使圖片位置為圖片中心。

並讓其中一張圖的座標位置可隨滑鼠位置移動。

week01

WEEK01,課堂作業

第1次上課教的程式碼
第1節
size(600,600); 視窗框框大小
background(255,128,0);背景顏色
rect(100,100,200,200);畫框框(X,Y,長,寬)
rect(275,275,200,200);畫框框(X,Y,長,寬)

第2節

size(600,600); 視窗框框大小

background(255,128,0);背景顏色

rect(100,100,200,200);畫框框(X,Y,長,寬)

rect(275,275,200,200);畫框框(X,Y,長,寬)

PImageimgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");讀取圖片紅鳥

PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");

讀取圖片綠豬

image(imgBird, 100,100);鳥的位置

image(imgPig, 300,300,150,150);豬的位置

第3節

PImage imgBird, imgPig;

void setup() {

size(600,600);視窗框框大小

imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");讀取圖片紅鳥

imgPig=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");讀取圖片綠豬

imageMode(CENTER);滑鼠置中

}

void draw(){

background(255,128,0);背景顏色

rect(100,100,200,200);畫框框(X,Y,長,寬)

rect(275,275,200,200);畫框框(X,Y,長,寬)

image(imgBird, mouseX, mouseY);鳥的位置跟著滑鼠動

image(imgPig, 300,300,150,150);豬的位置

}

0 課程準備
去年BLOG:2012interaction.blogspot.tw
1 加入課程FB社團:2013interaction(o)
2 編寫Google文件，填寫修課資料(姓名，email，手機)(o)
3 加入且設定Blog(0)

執行結果:

size(600,600);

background(255,0,0);

rect(100,100,200,200);

-------------------------------------------

執行結果:

PImage imgBird, imgPig;

void setup(){

size(600,600);

imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");

imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");

imageMode(CENTER);

}

void draw(){

background(255,0,0);

image(imgBird, mouseX,mouseY);

image(imgPig, 200, 200, 100 ,100);

}

第一周上課內容

介紹課程概要
加入部落格、FB
練習寫processing程式

今天上課的程式：
PImage imgPig, imgBird;
void setup()
{
imgPig=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
size(600, 600);
imageMode(CENTER);
}
void draw()
{
background(255, 0, 0);
image(imgPig, 200, 200,100,100);
image(imgBird, mouseX, mouseY);
}

Week01第一週課堂作業

0. 課程準備
0.1. 加入課程FB社團
0.2. Google文件填寫修課資料 (學號姓名,email,電話)
0.3. 加入 Blog, 設定

編交作業方式: tag: 000葉正聖老師, Week01, 00160011葉大明
逗號隔開, 學號姓名間不要有空格

1. 看一下去年學長姐們做的成果 (划船、吃角子老虎、數位手套、直昇機控制搖桿), 聖誔老公公下樓梯
2. 試著執行 Processing

size(600,600);
background(255, 0, 0);
rect(150,150, 300,300);
執行結果:

秀圖程式碼:

size(600,600);

background(255, 0, 0);
rect(150,150, 300,300);
PImage imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
image(imgBird, 0,0);
image(imgPig, 200,200, 100,100);

結果:

第三節課的範例

訂閱：文章 (Atom)

2013年9月16日 星期一

2013年9月15日 星期日

2013年9月9日 星期一

2013年9月16日星期一

2013年9月15日星期日

2013年9月9日星期一