2020互動技術: week06

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

2020年11月16日星期一

week06 07161116

用滑鼠點圖片會消失

程式碼:

int [][]A={ {2,2,2,2},
{0,1,1,1},
{0,1,1,1},
{2,2,2,2} };
PImage bird, pig;
void mousePressed()
{
int i = int(mouseY/100);
int j = int(mouseX/100);
A[i][j]=0;
}
void setup()
{
size(400,400);
bird=loadImage("bird.png");
pig =loadImage("pig.png");
}
void draw()
{
background(0);
for(int i=0; i<4; i++)
{
for(int j=0; j<4; j++)
{
if(A[i][j]==1) image(bird, j*100, i*100,100,100);
if(A[i][j]==2) image(pig, j*100, i*100,100,100);
}
}
}

陣列

寬=3

int[][]A={{1,1,1},

{0,1,0}, 高=4

{0,1,1},

{1,1,1}};

size(300,400);

for(int i=0; i<4; i++)

{

for(int j=0; j<3; j++)

{

if(A[i][j]==0)fill(0);-----------------遇到0就填黑色

else fill(255,0,0);---------------------沒有就填紅色

rect(j*100, i*100, 100, 100);

}

week06 鄭皓文

今天的課程第一步是教我們如何用Processing寫出字母，其實不難

textSize(40);

text("Hello World",30,30);

這兩行比較重要，一行用來調整字體大小一行用來確定要印出的內容，可是這樣不能完全顯示，改正後：

新增了textAlign(LEFT,TOP);

X可填入LEFT, CENTER或RIGHT,Y可填入TOP, CENTER 或BOTTOM這樣就會有不同的顯示效果。但是要注意似乎位置是反著來的。

餐前甜點過後就是主菜，今天要料理的是矩陣，這個觀念從大一就有了，要把它引入圖學：

這樣就可以畫出簡易的西洋棋盤

程式碼如下：

int[][]A=

{

{1,0,1,0},

{0,1,0,1},

{1,0,1,0},

{0,1,0,1}

};

size(400,400);

for(int i=0;i<4;i++)

{

for(int j=0;j<4;j++)

{

if(A[i][j]==0)fill(0);

else fill(255,255,255);

rect(j*100,i*100,100,100);

}

下面我們將普通的棋盤色塊替換為圖像：

這樣就可以讓🌽和川普同志一起出現了

單獨的顯示功能不夠，我們可以讓他們互相翻牌，看看誰先把誰變沒：

程式碼如下，主要是增加了以下內容改變了陣列：

void mousePressed()

{

int i=int(mouseY/100);

int j=int(mouseX/100);

A[i][j]=0;

}

最終程式碼為：

int[][]A=

{

{1,1,1,0},

{1,1,0,2},

{1,0,2,2},

{0,2,2,2}

};

PImage trump,corn;

void mousePressed()

{

int i=int(mouseY/100);

int j=int(mouseX/100);

A[i][j]=0;

}

void setup()

{

size(400,400);

trump=loadImage("trump.jpg");

corn=loadImage("corn.png");

}

void draw()

{

background(0);

for(int i=0;i<4;i++)

{

for(int j=0;j<4;j++)

{

if(A[i][j]==1)image(trump,j*100,i*100,100,100);

if(A[i][j]==2)image(corn,j*100,i*100,100,100);

}

2020年11月2日星期一

int [][]A={ {2,2,2,2},
{0,1,1,1},
{0,1,1,1},
{2,2,2,2} };
PImage bird, pig;
void mousePressed()
{
int i = int(mouseY/100);
int j = int(mouseX/100);
A[i][j]=0;
}
void setup()
{
size(400,400);
bird=loadImage("bird.png");
pig =loadImage("pig.png");
}
void draw()
{
background(0);
for(int i=0; i<4; i++)
{
for(int j=0; j<4; j++)
{
if(A[i][j]==1) image(bird, j*100, i*100,100,100);
if(A[i][j]==2) image(pig, j*100, i*100,100,100);
}
}
}

2020年10月20日星期二

(╯°□°）╯︵ ┻━┻week06

今天一開始教了怎麼在視窗中秀出文字，好讓我們可以在視窗中做一些文字的敘述。

接下來我們可以看到我們的字是有對其的問題的。所以我們可以用textAlign來改變他的對其方式。

之後還有字型的問題，在程式中如果要打中文就要用標楷體，不然出來的就只有方框框。

之後我們進入了二微陣列的部分。我們可以改變上面的顏色，也可以在其中加入圖片。

2020年10月19日星期一

𝔍𝔒𝔗𝔇-week6

今日進度:

1.印出文字及變換顏色

2.輸出不同字體的文字

3.印出矩陣

4.矩陣小遊戲(消消樂)

5.期中遊戲

程式碼:

size(500,500);

fill(255,0,0);

textSize(40);

text("Hello",100,100);

執行結果:

程式碼:

PFont font1 = createFont("Times New Romen", 30); // 定義字體及大小

textFont(font1); //輸出font1的社設定

text("中文v.s.English", 30, 30); //印出文字在(30,30)的位置

PFont font2 = createFont("標楷體", 30);// 定義字體及大小

textFont(font2);

text("中文 v.s. English", 30, 130);//印出文字在(30,130)的位置

size(500,500);

rect (200,200, 200,100);

fill(255,0,0);

textSize(40);

text("Hello",100,100);

執行結果:

注意事項:

↑注意編輯器字體要改成中文字體,不然沒辦法看到中文

程式碼:

int [][]A={ {1, 0, 1},

{0, 1, 0},

{1, 0, 1},

{1, 1, 1}

};

size(300,400);

for(int i=0; i<4; i++)

{

for(int j=0; j<3; j++)

{

if(A[i][j]==0)//如果陣列的值是0會做以下的動作

fill(0);

else

fill(255, 128);//印出半透明空白

rect( j*100, i*100, 100, 100); //i和j位置需相反(計算機概論內容,電腦反應較快)

}

執行結果:

程式碼:

int [][]A={ {2, 2, 2, 2},

{0, 1, 1, 1},

{2, 2, 2, 2}};

PImage zombie,rick;

void setup()

{

size(400,400);

zombie = loadImage("zombie.jpg"); //插入zombie的圖片

rick = loadImage("rick.jpg"); //插入rick的圖片

}

void draw()

{

background(0);

for(int i=0; i<4; i++)

{

for(int j=0; j<4; j++)

{

if(A[i][j]==1) //陣列值若為1會印出rick

image(rick, j*100, i*100, 100, 100);

if(A[i][j]==2)//陣列值若為2會印出zombie

image(zombie, j*100, i*100, 100, 100);

}

執行結果:

注意事項:

1.記得改矩陣大小

2.記得代號代表不同的圖片不要放錯

程式碼:

int [][]A={ {2, 2, 2, 2},

{0, 1, 1, 1},

{2, 2, 2, 2}};

PImage zombie,rick;

void setup()

{

size(400,400);

zombie = loadImage("zombie.jpg");

rick = loadImage("rick.jpg");

}

void mousePressed()

{

int i = int(mouseY/100);

int j = int(mouseX/100);

A[i][j]=0; //如果滑鼠點擊後陣列值會變0

}

void draw()

{

background(0);

for(int i=0; i<4; i++)

{

for(int j=0; j<4; j++)

{

if(A[i][j]==1) //陣列值若為1會印出rick

image(rick, j*100, i*100, 100, 100);

if(A[i][j]==2) //陣列值若為2會印出zombie

image(zombie, j*100, i*100, 100, 100);

}

執行結果:

↑點擊左上角圖片

↑點擊左上角的圖片後

期中小遊戲:

玩家透過跟背景互動可以得知我在背景中隱藏小故事

原本是要做主角要在家裡探索完後出去殺殭屍

但由於時間不足只好做主角在家探索的demo小遊戲

↑點擊紅框內會顯示小彩蛋

⚠️尚未完成的內容:

主角圖
車庫圖

⚠️需要的功能:

人物下樓梯

點擊物品要跳出對話框

切換場景(可用捲動背景)

原圖:

Yang_Week06

Week06

TEXT:

ex1:

size(100,100);

fill(255,0,0);

textSize(40);

text("Hello",30,30);

ex2:

size(500,400);

rect(100,100,200,100);

fill(255,0,0);

textSize(40);

textAlign(LEFT,TOP);

text("Hello",100,100);

ex3:

size(800,300);

fill(255,0,0);

PFont font1=createFont("Times New Roman",30);

textFont(font1);

text("中文vs.En",30,30);

PFont font2=createFont("標楷體",30);

textFont(font2);

text("中文vs.En",30,130);

Array:

ex1:

int [][]A={{1,1,1},{0,1,0},{0,1,1},{1,1,1}};

size(300,400);

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

for(int j=0;j<3;j++){

if(A[i][j]==0)fill(0);

else fill(0,0,255,125);

rect(j*100,i*100,100,100);

}

ex2:

int [][]A={{2,2,2,2},{0,1,0,1},{1,0,1,0},{2,2,2,2}};

PImage ball,eevee;

void setup(){

size(400,400);

ball=loadImage("ball.png");

eevee=loadImage("eevee.png");

}

void draw(){

background(0);

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

for(int j=0;j<4;j++){

if(A[i][j]==2)image(ball,j*100,i*100,100,100);

if(A[i][j]==1)image(eevee,j*100,i*100,100,100);

}

ex3:

int [][]A={{2,2,2,2},{0,1,0,1},{1,0,1,0},{2,2,2,2}};

PImage ball,eevee;

void mousePressed(){

int i=int(mouseY/100);

int j=int(mouseX/100);

A[i][j]=0;

}

void setup(){

size(400,400);

ball=loadImage("ball.png");

eevee=loadImage("eevee.png");

}

void draw(){

background(0);

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

for(int j=0;j<4;j++){

if(A[i][j]==2)image(ball,j*100,i*100,100,100);

if(A[i][j]==1)image(eevee,j*100,i*100,100,100);

}

ellipse(mouseX,mouseY,25,25);

text("mouseX"+mouseX+" mouseY:"+mouseY,100,100);

}

丹ㄉ憤怒鳥很鳥ㄛ

我們先瞭解可以把文字弄上去

然後我們這樣可以弄出像圍棋的東東

啊鳥看起來很鳥

我們弄個功能把鳥或殭屍按一下就可以刪除的功能

week6

Text

程式碼:

fill(255,0,0);

textSize(40);

text("Hello",30,30);

因為視窗大小和文字位置無法完整顯示文字

程式碼:

size(500,400);

rect(100,100,200,100);

fill(255,0,0);

textSize(40);

textAlign(LEFT,TOP);

text("Hello",100,100);

增加視窗大小和文字對齊左上的程式碼

程式碼:

size(800,300);

fill(255,0,0);

Pfont font1=createFont("Times New Roman",30);

textFont(font1);

text("中文vs.English",30,30);

Pfont font2=createFont("標楷體",30);

textFont(font2);

text("中文vs.English",30,130);

因為字體不同所以有些無法顯示出中文

程式碼:

int [][]A={ {1,0,1},

{0,1,0},

{1,0,1},

{0,1,0} };

size(300,400);

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

for(int j=0;j<3;j++){

if(A[i][j]==0)fill(0);

else fill(255,0,0);

rect(j*100,i*100,100,100);

}

做一個用滑鼠點圖片會消失的程次

程式碼:

int [][]A={ {2,2,2,2},

{0,1,1,1},

{2,2,2,2} };

PImage bird,pig;

void mousePressed(){

int i=int(mouseY/100);

int j=int(mouseX/100);

A[i][j]=0;

}

void setup(){

size(400,400);

bird=loadImage("bird.png");

pig=loadImage("pig.png");

}

void draw(){

background(0);

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

for(int j=0;j<4;j++){

if(A[i][j]==1)image(bird, j*100, i*100, 100,100);

if(A[i][j]==2)image(pig, j*100, i*100, 100,100);

}

ellipse(mouseX,mouseY,25,25);

text("mouseX:"+mouseX+" mouseY:"+mouseY,100,100);

}

week06

字貼齊，填充色彩

size(500,400);

rect(100,100,200,100);

fill(255,0,0);

textSize(40);

text("Hello",100,100);

印標楷體

size(500,400);

rect(100,100,200,100);

fill(255,0,0);

textSize(40);

text("Hello",100,100);

用陣列填色

int [][]A={{1,1,1},

{0,1,0},

{0,1,1},

{1,1,1}};

size(300,400);

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

for(int j=0;j<3;j++){

if(A[i][j]==0)fill(0);

else fill(255,0,0);

rect(j*100,i*100,100,100);

}

在方格內印出豬和黑鳥

int [][]A={{2,2,2,2},

{0,1,1,1},

{2,2,2,2}};

PImage bird,pig;07160

void setup(){

size(400,400);

bird= loadImage("bird.png");

pig = loadImage("pig.png");

}

void draw(){

background(0);

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

for(int j=0;j<4;j++){

if(A[i][j]==1) image(bird,j*100,i*100,100,100);

if(A[i][j]==2) image(pig,j*100,i*100,100,100);

}

秀座標，用滑鼠按圖片會不見

int [][]A={{2,2,2,2},

{0,1,1,1},

{2,2,2,2}};

PImage bird,pig;

void mousePressed(){

int i= int (mouseY/100);

int j= int (mouseX/100);

A[i][j]=0;

}

void setup(){

size(400,400);

bird= loadImage("bird.png");

pig = loadImage("pig.png");

}

void draw(){

background(0);

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

for(int j=0;j<4;j++){

if(A[i][j]==1) image(bird,j*100,i*100,100,100);

if(A[i][j]==2) image(pig ,j*100,i*100,100,100);

}

ellipse(mouseX,mouseY,25,25);

text("mouseX:"+mouseX + " mouseY:"+mouseY,100,100);

}

訂閱：文章 (Atom)

2020互動技術

2020年11月16日星期一

week06 07161116

陣列

week06 鄭皓文

2020年11月2日星期一

Week0606060606

2020年10月20日星期二

(╯°□°）╯︵ ┻━┻week06

2020年10月19日星期一

𝔍𝔒𝔗𝔇-week6

Yang_Week06

丹ㄉ憤怒鳥很鳥ㄛ

week6

Text

week06

檢舉濫用情形

2020年11月16日 星期一

陣列

2020年11月2日 星期一

2020年10月20日 星期二

2020年10月19日 星期一

Text

2020年11月16日星期一

2020年11月2日星期一

2020年10月20日星期二

2020年10月19日星期一