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

2021年12月6日星期一

week04

今天一開始老師先教我們畫棋盤

先用簡單的line來畫出9條直線

之後我們可以使用for迴圈來簡化這個程式

再來只要把橫線的程式也加上去，就可以完成一個8*8的棋盤

之後第二節課我們先教陣列

就可以把陣列套進去剛剛的棋盤程式碼裡面

我們可以修改陣列裡面的值，去決定棋子該放在哪一格

只要把0改成1，他所對應的棋盤位置就會出現一個棋子

int [][]go={

{0,0,0,0,0,0,0,0,0},

{0,1,0,0,0,0,0,0,0},

{0,0,0,0,0,0,0,0,0},

{1,1,0,0,0,0,0,0,0} };

void setup()

{

size(500,500);

}

void draw()

{

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

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

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

if(go[i][j]==1){

int x=50+50*j,y=50+50*i;

fill(255);ellipse(x,y,40,40);

}

之後只要加上mosuePressed就可以用滑鼠點擊放棋子了

int [][]go={

{0,0,0,0,0,0,0,0,0},

{0,1,0,0,0,0,0,0,0},

{0,0,0,0,0,0,0,0,0},

{1,1,0,0,0,0,0,0,0} };

void setup()

{

size(500,500);

}

void draw()

{

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

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

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

if(go[i][j]==1){

int x=50+50*j,y=50+50*i;

fill(255);ellipse(x,y,40,40);

}

void mousePressed(){

int j=(mouseX-50)/50;

int i=(mouseY-50)/50;

go[i][j]=1;

}

但是這樣有可能會因為系統無條件捨去導致滑鼠點擊位置與實際落子位置有所偏差

所以我們要稍微修改一下

把

void mousePressed(){

int j=(mouseX-50)/50;

int i=(mouseY-50)/50;

go[i][j]=1;

裡面的mouseX-50改成mouseX-25

mouseY也是同理

這樣就可以讓棋子落子的位置更加精準

之後我們再更進階的加上mosueButton使用滑鼠的左右以及中鍵分別可以放白棋.黑棋以及消除棋子

再來我們學的是利用cos()及sin()畫出360個圓,每度都有1個小的圓

void setup(){

size(500,500);

}

void draw(){

for(float a=0;a<360;a++){

float x=250+250*cos(radians(a));

float y=250+250*sin(radians(a));

ellipse(x,y,4,4);

}

的作品

最後一節課老師跟我們講了一個可以看到很多人自己用Processing畫畫的網站OpenProcessing.org

可以看到很多人的作品

之後回到程式，我們可以加上mouse

移動滑鼠就可以改變圓的型態

void setup(){

size(500,500);

}

void draw(){

background(128);

for(float a=0;a<360;a++){

float x=250+mouseX*cos(radians(a));

float y=250+mouseY*sin(radians(a));

ellipse(x,y,mouseY,mouseY);

}

void setup(){

size(500,500);

}

float w=30;

float r=0,g=255,b=0;

void draw(){

stroke(r,g,b);noFill();

r+=random(3);if(r>255)r=0;

g+=random(3);if(g>255)g=0;

b+=random(3);if(b>255)b=0;

ellipse(mouseX,mouseY,w,w);

w+=0.5;

if(w>100)w=30;

}

2021年10月28日星期四

Week04

1 使用線條，按照等差遞增排列

2改用for迴圈產生線條

3加入橫向線條

4用陣列表示填色位置

5加入試驗固定的棋子

6原先棋子位置會偏移，修正棋子位置，讓它剛好在兩線正中間

7現在加入可隨滑鼠位置放置的棋子

8加入黑棋，刪除原試驗用固定位置的棋子，並由滑鼠左中右鍵分別控制白棋/吃子/黑棋

--------

9新單元

由浮點數及cos sin計算畫圓

10現在圓圈大小隨滑鼠xy軸改變

11更改背景色，加入noFill()能變成較為完美的圖形

12加入之前課程所學，筆觸顏色隨機生成，並可隨滑鼠xy軸畫出任意圖型，

背景色也能由滑鼠xy位置改變

2021年10月25日星期一

week04課程

1.畫出棋盤

void setup()

{

size(500,500);

}

void draw()

{

background(253,236,180);

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

line(50,50+50*i, 450,50+50*i);//畫直線

line(50+50*i,50, 50+50*i,450);//畫橫線

}

2.設定方格矩陣和旗子

▲矩陣

int[][]go = {

{0,0,0,0,0,0,0,0,0},

{0,0,0,0,0,0,0,0,0}};

▲棋子

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

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

if(go[i][j]==1){

int x=50+50*j,y=50+50*i;

fill(255);ellipse(x,y,40,40);//畫圓

}else if(go[i][j]==2){

int x=50+50*j,y=50+50*i;

fill(0);ellipse(x,y,40,40);

}

3.建立黑白棋和清除鍵

void mousePressed(){

int j = (mouseX-25)/50;//判斷點擊位置

int i = (mouseY-25)/50;

if(mouseButton==LEFT)go[i][j]=1;//下白棋

if(mouseButton==RIGHT)go[i][j]=2;//下黑棋

if(mouseButton==CENTER)go[i][j]=0;//清除棋子

嗨壓阿 Week04

Week03

1.畫棋盤爆破版

void setup(){

size(500,500);

}

void draw(){

background(253,236,180);

line(50,50,50,450);

line(100,50,100,450);

line(150,50,150,450);

line(200,50,200,450);

line(250,50,250,450);

line(300,50,300,450);

line(350,50,350,450);

line(400,50,400,450);

line(450,50,450,450);

}

2.畫棋盤陣列版

void setup(){

size(500,500);

}

void draw(){

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

}

3.畫棋盤完整版

void setup(){

size(500,500);

}

void draw(){

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

4.加陣列

void setup(){

size(500,500);

}

int [][]go={

{0,0,0,0,0,0,0,0,0},

{0,0,0,0,0,0,0,0,0}};

void draw(){

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

5.for 陣列

int [][]c={

{1,0,0},

{1,0,0}};

void setup(){

size(300,300);

}

void draw(){

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

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

if(c[i][j]==0) fill(128);

else fill(255,0,0);

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

}

6.加棋子

void setup(){

size(500,500);

}

int [][]go={

{1,0,0,0,0,0,0,0,1},

{0,0,0,0,0,0,0,0,0},

{0,0,0,0,1,0,0,0,0},

{0,0,0,0,0,0,0,0,0},

{1,0,0,0,0,0,0,0,1}};

void draw(){

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

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

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

if(go[i][j]==1){

int x=50+50*j, y=50+50*i;

fill(255); ellipse(x,y,40,40);

}

7.用滑鼠下棋

void setup(){

size(500,500);

}

int [][]go={

{1,0,0,0,0,0,0,0,1},

{0,0,0,0,0,0,0,0,0},

{0,0,0,0,1,0,0,0,0},

{0,0,0,0,0,0,0,0,0},

{1,0,0,0,0,0,0,0,1}};

void draw(){

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

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

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

if(go[i][j]==1){

int x=50+50*j, y=50+50*i;

fill(255); ellipse(x,y,40,40);

}

void mousePressed(){

int i=(mouseY-50)/50;

int j=(mouseX-50)/50;

go[i][j]=1;

}

8.白，黑子&消除

void setup(){

size(500,500);

}

int [][]go={

{1,0,0,0,0,0,0,0,1},

{0,0,0,0,0,0,0,0,0},

{0,0,0,0,1,0,0,0,0},

{0,0,0,0,0,0,0,0,0},

{1,0,0,0,0,0,0,0,1}};

void draw(){

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

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

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

if(go[i][j]==1){

int x=50+50*j, y=50+50*i;

fill(255); ellipse(x,y,40,40);

}

else if(go[i][j]==2){

int x=50+50*j, y=50+50*i;

fill(0); ellipse(x,y,40,40);

}

void mousePressed(){

int i=(mouseY-25)/50;

int j=(mouseX-25)/50;

if(mouseButton==LEFT) go[i][j]=1;

if(mouseButton==RIGHT) go[i][j]=2;

if(mouseButton==CENTER) go[i][j]=0;

}

9.畫圓

void setup(){

size(500,500);

}

void draw(){

for(float a=0;a<360;a++){

float x=250+250*cos(radians(a));

float y=250+250*sin(radians(a));

ellipse(x,y,4,4);

}

10.滑鼠畫圈圈

void setup(){

size(500,500);

}

float w=30;

float r=0,g=255,b=0;

void draw(){

stroke(r,g,b); noFill();

r+=random(3);if(r>255)r=0; //顏色到255變回0

g+=random(3);if(g>255)g=0;

b+=random(3);if(b>255)b=0;

ellipse(mouseX,mouseY,w,w);

w+=0.5;

if(w>100) w=30; //放大到100變回30

}

互動概論week04

1.畫出棋盤的直線

2.用陣列畫出直線

3.用陣列完成棋盤

4.用陣列畫格子

5.用陣列畫出棋子

6.用滑鼠畫出棋子

7.調整棋子，變得準確

8.畫出黑棋和白棋

9.畫出一個圓

10.多重圓圈

11.用滑鼠變色多重圓圈

岩壁悲歌 Week04

2021/10/25 陣列、迴圈運用

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

想要劃出9條線就要打9行line，這樣太過於操勞，於是運用迴圈

如下圖:

再加上橫線

先練習陣列運用

有個上面的觀念之後，把陣列中帶有1的白棋帶入棋盤中

多新增了mousePressed這5行，目的是為了無條件捨去，假如X,Y的

位置在(5.99 , 5.99)白棋最後的位置會在在(5,5)的位置

若將-50改成-25，可直接達成四捨五入的效果

接著用滑鼠的左、右、中鍵，分別代表白、黑、無棋子

int [][]go={

{0,0,0,0,0,0,0,0,0,},

{0,0,0,0,0,0,0,0,0,}, };

void setup(){

size(500,500);

}

void draw(){

background(253,236,180);

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

line(50+50*i,50,50+50*i,450);

line(50,50+50*i,450,50+50*i);

}

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

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

if(go[i][j]==1){

int x=50+50*j, y=50+50*i;

fill(255); ellipse(x,y,40,40);

}else if(go[i][j]==2){

int x=50+50*j, y=50+50*i;

fill(0); ellipse(x,y,40,40);

}

void mousePressed(){

int j =(mouseX-25)/50;

int i =(mouseY-25)/50;

if(mouseButton==LEFT) go[i][j]=1;

if(mouseButton==RIGHT) go[i][j]=2;

if(mouseButton==CENTER) go[i][j]=0;

}

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

藉由有變化的數值，畫出不同大小跟顏色的圈圈

/*void setup(){

size(500,500);

}

void draw(){

background(255);

noFill();

stroke(mouseX,mouseY,255);

for(float a=0;a<360;a+=1){

float x=250+mouseX*cos(radians(a));

float y=250+mouseY*sin(radians(a));

ellipse(x,y,mouseY,mouseY);

}

}*/

void setup(){

size(500,500);

}

float w=30;

float r=0,g=255,b=0;

void draw(){

stroke(r,g,b); noFill();

r+=random(3); if(r>255)r=0;

g+=random(3); if(g>255)g=0;

b+=random(3); if(b>255)b=0;

ellipse(mouseX,mouseY,w,w);

w+=0.5;

if(w>100) w=30;

}

訂閱：文章 (Atom)

2021年12月6日 星期一

week04

2021年10月28日 星期四

Week04

2021年10月25日 星期一

week04課程

嗨壓阿 Week04

Week03

互動概論week04

岩壁悲歌 Week04

2021年12月6日星期一

2021年10月28日星期四

2021年10月25日星期一