2013互動技術概論: Week03

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

2013年9月23日星期一

Week3

##課堂內容
http://2013interaction.blogspot.tw/2013/09/week03.html

##實作
畫棋盤

加上游標控制

微調

做滑鼠click事件

雙色設定

====程式碼====
int nowX,nowY,newColor=1;//讀滑鼠座標用的(表示現在位置用),color判讀顏色用
int [][]array=new int[15][15];//開格子存(紀錄)棋子位置

void setup()
{ size(800,800);/*視窗大小*/}

void draw()
{
background(#FCBC54);//背景色用Tool->ColorSelector工具選色
noFill();//加這行使矩形範圍不填滿預設顏色(會變成背景色)
strokeWeight(5);//線條寬度
rect(50,50,700,700);//座標(50,50)起始畫700*700的矩形
strokeWeight(1);//線條寬度
for(int i=0;i<13;i++)//畫出50*50的格子
{
line(50,100+i*50,750,100+i*50);//橫線
line(100+i*50,50,100+i*50,750);/*縱線*/
}
fill(255,0,0,100);//滑鼠的現在位置顏色
strokeWeight(2);//線條寬度
rect(nowX*50+25,nowY*50+25,50,50);
//做,滑鼠位置(棋子位置)填色
for(int i=0;i<15;i++)
{
for(int j=0;j<15;j++)
{
if(array[i][j]==1)//把數值變1的格子畫方塊(上色)
{
fill(0,0,0);
rect(i*50+25,j*50+25,50,50);
}
if(array[i][j]==2)//把數值變1的格子畫方塊(上色)
{
fill(255,255,255);
rect(i*50+25,j*50+25,50,50);
}
}
}
}
void mousePressed()//滑鼠點下
{
array[nowX][nowY]=newColor;//將點下的格子數值變1
//做換色動作
if(newColor==1) newColor=2;
else if(newColor==2) newColor=1;
}
void mouseMoved()//讓方塊隨滑鼠走
{
nowX=(mouseX-25)/50;//有寫-50/50這樣才會"一格一格"移動,不然會跟著游標跨界飄
nowY=(mouseY-25)/50;
}

##貼你覺得有意思的影片, 使用youtube 的分享, Blogger 分享, 兩邊都改成 HTML, 貼上
HTML

WEEK03 廖中遠作業

int nowColor=1;
int newX, newY;
int[][] array = new int [19][19];
void setup(){
size(1000,1000);
}
void draw(){
background(255,226,111);
noFill();
strokeWeight(4);
rect(50,50,900,900);
strokeWeight(2);
for (int i=0;i<18;i=i+1){
line(50,50+i*50,950,50+i*50);
line(50+i*50,50,50+i*50,950);
}
fill(#E85E0E);
ellipse(newX*50+50, newY*50+50,50,50);

for(int i=0;i<19;i=i+1){
for(int j=0;j<19;j=j+1){
if(array[i][j]==1){fill(0); ellipse(i*50+50,j*50+50,50,50);}
if(array[i][j]==2){fill(255); ellipse(i*50+50,j*50+50,50,50);}
}
}
}
void mousePressed(){
array[newX][newY]=nowColor;
if(nowColor==1)nowColor=2;
else if(nowColor==2)nowColor=1;
}
void mouseMoved(){
newX=(mouseX-25)/50;
newY=(mouseY-25)/50;
if(newX > 18) newX=18;
if(newY > 18) newY=18;
}

Week3 胡凱翔

Week03 第三週上課內容及課堂作業

黃敦群的第三周作業

week3 黃柏勳

1.用程式畫出棋盤但是歪歪的

2.修正囉!

3.增加滑鼠游標

4.加粗跟條透明度

5. 可以有記號囉但是歪歪的

6. 修正好囉

[

這個影片超級酷炫!

讓我想到我期末作品有了想法

第三周

第三周課堂作業

心得

(1)學會製作簡單的小遊戲

(2)還有很多程式碼要學習怎麼用

(3)想學習碰撞測試

week03

2013年9月22日星期日

week03 黃彥鈞

利用for迴圈畫出棋盤格，並調整其邊寬
1.(50,50)位置上畫出700*70的棋盤
2.strokeWeight為邊框的粗細
3.for(int i=0;i<10;i++)
line(50,50+i*70,750,50+i*70);
line(50+i*70,50,50+i*70,750);
劃出十條線和設定邊界範圍。

int nowX,nowY; //1.設定參數
void setup(){
size(800,800);
}
void draw(){
background(#F0D079);
noFill();
strokeWeight(5);
rect(50,50,700,700);
strokeWeight(1);
for(int i=0;i<10;i++){
line(50,50+i*80,750,50+i*80);
line(50+i*80,50,50+i*80,750);
}
fill(255,0,0);//3.填滿顏色紅色
rect(nowX*70+50,nowY*70+50,80,80);
}
void mouseMoved(){//2.設定滑鼠參數且移動
nowX=(mouseX-50)/80;
nowY=(mouseY-50)/80;
println("mouseX:"+mouseX+"mouseY:"+mouseY+"nowX:"+nowX+"nowY"+nowY);//顯示滑鼠的座標位置
}

int nowX,nowY;

int [][] array = new int[10][10];//1.利用陣列宣告

void setup(){

size(800,800);

}

void draw(){

background(#F0D079);

noFill();

strokeWeight(5);

rect(50,50,700,700);

strokeWeight(1);

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

line(50,50+i*70,750,50+i*70);

line(50+i*70,50,50+i*70,750);

}

fill(255,0,0);

rect(nowX*70+50,nowY*70+50,70,70);

fill(0);//4.填滿顏色為黑色

for(int i=0;i<10;i++){//2.利用for迴圈用陣列畫

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

if(array[i][j]==1) rect(i*70+50,j*70+50,70,70);

}

void mousePressed(){//3.利用滑鼠按壓參數寫陣列

array[nowX][nowY]=1;//表示以塗鴉

}

void mouseMoved(){

nowX=(mouseX-50)/70;

nowY=(mouseY-50)/70;

println("mouseX:"+mouseX+"mouseY:"+mouseY+"nowX:"+nowX+"nowY"+nowY);

}

WEEK03

1. 今天目標: 畫出一個五子棋
1.1. 使用 Tool- Color Selector, 挑出你要的顏色, 可用 R,G,B 來描述,也可用 #0B33FF 之類的像亂碼的數字來設定顏色
1.2. 要畫外框,可以用 rect()來畫, 要修改填充的顏色可以用fill(), 要讓畫的內部不要填充, 可以查看 Help-Reference 後,在 fill()樓上樓下相關的地方找到你要的功能 (ex. noFill() )
1.3. 使用 stroke() 來調畫線stroke的顏色, 在 Help-Reference 裡面可以找 stroke 相關的功能,像是比較粗的 stroke 可以用 strokeWeight() 來設定權重粗細
1.4. 想要畫裡面的細黑線,可以用 line() 來畫,配上不同的 strokeWeight() 粗細

1.

程式碼如下
void setup(){
size(800,800);
}
void draw(){
background(#F0D079); //背景顏色設定
noFill();
strokeWeight(5);
rect(50,50 ,700,700);
strokeWeight(1);
for(int i=0;i<10;i++){
line(50,50+i*70,750,50+i*70); //線條設定
line(50+i*70,50,50+i*70,750);
}

}
2.

程式碼如下

int nowX, nowY;
void setup(){
size(800,800);
}
void draw(){
background(#F0D079);
noFill();
strokeWeight(6);
rect(50,50 ,700,700);
strokeWeight(1);
for(int i=0;i<10;i++){
line(50,50+i*70,750,50+i*70);
line(50+i*70,50,50+i*70,750);
}
fill(255,0,0);
rect(nowX*70+50,nowY*70+50,70,70);
}

void mouseMoved(){ //加入滑鼠移動滑鼠一滑就會有框框跟著移動
nowX=(mouseX-50)/70;
nowY=(mouseY-50)/70;
println("mouseX: " + mouseX + " mouseY: " +mouseY + " nowX:" +nowX + "nowY: " + nowY);
}

3.

程式碼如下

int nowX, nowY;
int [][] array = new int [10][10]; // 1.我在這宣告一個陣列
void setup(){
size(800,800);
}
void draw(){
background(#F0D079);
noFill();
strokeWeight(6);
rect(50,50 ,700,700);
strokeWeight(1);
for(int i=0;i<10;i++){
line(50,50+i*70,750,50+i*70);
line(50+i*70,50,50+i*70,750);
}
fill(255,0,0);
rect(nowX*70+50,nowY*70+50,70,70);
fill(0); //4. 最後將紅色設定為黑色
for(int i=0;i<10;i++){ // 2. 可以使用FOR迴圈來進行陣列的比較與畫圖
for(int j=0;j<10;j++){
if(array[i][j]==1) rect(i*70+50, j*70+50 , 70, 70);
}
}
}

void mousePressed(){ // 3. 使用mousePressed函式改變array裡面的I J值
array[nowX][nowY]=1;
}

void mouseMoved(){
nowX=(mouseX)/70;
nowY=(mouseY)/70;
println("mouseX: " + mouseX + " mouseY: " +mouseY + " nowX:" +nowX + "nowY: " + nowY);
}

4.

Week03

利用:畫線跟選取顏色的功能畫出棋盤面的格子

void setup(){
size(800,800);
}
void draw() {
background(#F0D079);
noFill();
strokeWeight(6);
rect(50,50,700,700);
strokeWeight(1);
for(int i=0;i<9;i++){
line(50,50+i*80,750,50+i*80);
line(50+i*80,50,50+i*80,750);
}

加入搭配滑鼠的使用

int nowX,nowY;

void setup(){

size(800,800);

}

void draw() {

background(#F0D079);

noFill();

strokeWeight(6);

rect(50,50,700,700);

strokeWeight(1);

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

line(50,50+i*80,750,50+i*80);

line(50+i*80,50,50+i*80,750);

}

fill(255,0,0);

rect(nowX*80+50,nowY*80+50,80,80);

}

void mouseMoved(){

nowX = (mouseX-50)/80;

nowY = (mouseY-50)/80;

print("mouseX: "+mouseX + "mouseY: "+"nowX: "+nowX+ " nowY:"+nowY);

}

經修正後出現整齊的格子

int nowX,nowY;

int[][] array = new int [10][10];// 1.宣告陣列

void setup(){

size(1000,1000);

}

void draw() {

background(#F0D079);

noFill();

strokeWeight(6);

rect(50,50,800,800);

strokeWeight(1);

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

line(50,50+i*80,850,50+i*80);

line(50+i*80,50,50+i*80,850);

}

fill(255,0,0);

ellipse(nowX*80+50,nowY*80+50,80,80);

fill(0);// 配黑色

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

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

if(array[i][j]==1) rect(i*80+50,j*80+50,80,80);

}

void mousePressed(){

array[nowX][nowY]=1;

}

void mouseMoved(){

nowX = (mouseX-50)/80;

nowY = (mouseY-50)/80;

print("mouseX: "+mouseX + "mouseY: "+"nowX: "+nowX+ " nowY:"+nowY);

}

心得:關於老師教的程式跟之前的電腦圖學比較起來速度剛好

比較容易理解吸收的也比較OK

99163116 鄭祥斌

1.畫出五子棋

void setup() {

size(800, 800);

}

void draw() {

background(#F0D079);使用 Tool- Color Selector, 挑出你要的顏色, 可用 R,G,B 來描述,也可用 #0B33FF 之類的像亂碼的數字來設定顏色

noFill();

strokeWeight(6); 在 Help-Reference 裡面可以找 stroke 相關的功能

rect(50, 50, 700, 700);

strokeWeight(1);

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

line(50, 50+i*80, 750, 50+i*80); line() 是用來配上不同的 strokeWeight() 粗細

line(50+i*80, 50, 50+i*80, 750);

}

int nowX, nowY;

void setup() {

size(800, 800);

}

void draw() {

background(#F0D079);

noFill();

strokeWeight(6);

rect(50, 50, 700, 700);

strokeWeight(1);

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

line(50, 50+i*80, 750, 50+i*80);

line(50+i*80, 50, 50+i*80, 750);

}

fill(255,0,0);

rect(nowX*80+50, nowY*80+50, 80,80);

}

void mouseMoved(){

nowX = (mouseX-50)/80;

nowY = (mouseY-50)/80;

println("mouseX:" + mouseX+"mouseY:"+mouseY+"nowX:"+nowX+"nowY:"+nowY);

}

int nowX, nowY;

int [][] array = new int [8][8];宣告陣列

void setup() {

size(800, 800);

}

void draw() {

background(#F0D079);

noFill();不會蓋過原本顏色

strokeWeight(6);

rect(50, 50, 700, 700);

strokeWeight(1);

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

line(50, 50+i*80, 750, 50+i*80);

line(50+i*80, 50, 50+i*80, 750);

}

fill(24, 120, 219);配上淡藍色

rect(nowX*80+50, nowY*80+50, 80, 80);

fill(237,138,245);配上淡紫色

for (int i=0;i<8;i++) {使用for迴圈，來進行陣列的比較、畫圖

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

if (array[i][j]==1) rect(i*80+50, j*80+50, 80, 80);

}

void mousePressed() { 使用函式來將mouse改變array[i][j]裡面的值

array[nowX][nowY]=1;

}

void mouseMoved() {

nowX = (mouseX-50)/80;

nowY = (mouseY-50)/80;

println("mouseX:" + mouseX+"mouseY:"+mouseY+"nowX:"+nowX+"nowY:"+nowY);

}

int nowColor=1;
int nowX, nowY;
int [][] array = new int [8][8];
void setup() {
size(800, 800);
}
void draw() {
background(#F0D079);
noFill();
strokeWeight(6);
rect(50, 50, 700, 700);
strokeWeight(1);
for (int i=0;i<9;i++) {
line(50, 50+i*80, 750, 50+i*80);
line(50+i*80, 50, 50+i*80, 750);
}
fill(24, 120, 219);
ellipse(nowX*80+50, nowY*80+50, 80, 80);
//rect(nowX*80+50, nowY*80+50, 80, 80);
//fill(237,138,245);
for (int i=0;i<8;i++) {
for (int j=0;j<8;j++) {
if (array[i][j]==1) {
fill(0);
ellipse(i*80+50, j*80+50, 80, 80);
}
if (array[i][j]==2) {
fill(255);
ellipse(i*80+50, j*80+50, 80, 80);
}
}
}
}
void mousePressed() {
array[nowX][nowY]=nowColor;
if (nowColor==1 ) nowColor=2;
else if (nowColor==2) nowColor=1;
}

void mouseMoved() {
nowX = (mouseX-50)/80;
nowY = (mouseY-50)/80;
println("mouseX:" + mouseX+"mouseY:"+mouseY+"nowX:"+nowX+"nowY:"+nowY);
}

這部影片是當放出音樂時，然後在影片上跑出圖案，如果當圖案通過終點線時，敲擊到，即可得分。

Week03第三週課堂作業

1. 今天目標: 畫出一個五子棋
1.1. 使用 Tool- Color Selector

void setup(){
size(800,800);
}
void draw(){
background(#F0D079);
noFill();
strokeWeight(6);
rect(50,50,700,700);
strokeWeight(1);
for(int i=0;i<9;i++){
line(50,50+i*80,750,50+i*80); //橫線
line(50+i*80,50,50+i*80,750); //直線
}

}

1.2. 要畫外框,可以用 rect()來畫, 要修改填充的顏色可以用fill(), 要讓畫的內部不要填充, 可以查看 Help-Reference 後,在 fill()樓上樓下相關的地方找到你要的功能 (ex. noFill() )
1.3. 使用 stroke() 來調畫線stroke的顏色, 在 Help-Reference 裡面可以找 stroke 相關的功能,像是比較粗的 stroke 可以用 strokeWeight() 來設定權重粗細
1.4. 想要畫裡面的細黑線,可以用 line() 來畫,配上不同的 strokeWeight() 粗細

int nowX,nowY;
void setup(){
size(800,800);
}
void draw(){
background(#F0D079);
noFill();
strokeWeight(6);
rect(50,50,700,700);
strokeWeight(1);
for(int i=0;i<9;i++){
line(50,50+i*80,750,50+i*80);
line(50+i*80,50,50+i*80,750);
}
fill(0,255,0);
rect(nowX*80+50,nowY*80+50,80,80);
}

void mouseMoved(){
nowX = (mouseX-50)/80;
nowY = (mouseY-50)/80;
println("mouseX: " + mouseX + "mouxeY: " + mouseY + "noeX: " + nowX + "nowY:" + nowY);
}

int nowX,nowY;

int [][] array = new int [8][8]; //宣告陣列

void setup(){

size(800,800);

}

void draw(){

background(#F0D079);

noFill();

strokeWeight(6);

rect(50,50,700,700);

strokeWeight(1);

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

line(50,50+i*80,750,50+i*80);

line(50+i*80,50,50+i*80,750);

}

fill(0,255,0);

rect(nowX*80+50,nowY*80+50,80,80);

fill(0,0,255);

for(int i=0;i<8;i++){ //使用for迴圈進行陣列比較畫圖

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

if(array[i][j]==1) rect(i*80+50,j*80+50,80,80);

}

void mousePressed(){ //使用函式將mouse 改變 array[i][j]裡面的值

array[nowX][nowY]=1;

}

void mouseMoved(){

nowX = (mouseX-50)/80;

nowY = (mouseY-50)/80;

println("mouseX: " + mouseX + "mouxeY: " + mouseY + "noeX: " + nowX + "nowY:" + nowY);

}

第3週

1. 今天目標: 畫出一個五子棋
1.1. 使用 Tool- Color Selector, 挑出你要的顏色, 可用 R,G,B 來描述,也可用 #0B33FF 之類的數字來用

1.2. 要畫外框,可以用 rect()來畫, 要修改填充的顏色可以用fill(), 要讓畫的內部不要填充, 可以查看 Help-Reference 後,在 fill()樓上樓下相關的地方找到你要的功能 (ex. noFill() )

1.3. 使用 stroke() 來調畫線stroke的顏色, 在 Help-Reference 裡面可以找 stroke 相關的功能,像是比較粗的 stroke 可以用 strokeWeight() 來設定權重粗細

1.4. 想要畫裡面的細黑線,可以用 line() 來畫,配上不同的 strokeWeight() 粗細

int nowX, nowY;

int[][] array=new int[8][8];

void setup()

{ size(800, 800); }

void draw() {

background(232, 191, 101);

noFill();

strokeWeight(6);

rect(50, 50, 700, 700);

strokeWeight(1);

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

line(50, 50+i*87, 750, 50+i*87);

line(50+i*87, 50, 50+i*87, 750);

}

fill(255, 0, 0);

rect(nowX*87+50, nowY*87+50, 87, 87);

fill(0);

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

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

if (array[i][j]==1) rect(i*87+50, j*87+50, 87, 87);

} } }

void mousePressed()

{ array[nowX][nowY]=1; }

void mouseMoved() {

nowX = (mouseX-90)/80;

nowY = (mouseY-90)/80;

println(" mouseX: "+mouseX+" mouseY: "+ mouseY+" nowX: "+nowX+" nowY:"+nowY);

}

int nowX, nowY;

int[][] array=new int[8][8];

void setup()

{ size(800, 800); }

void draw() {

background(232, 191, 101);

noFill();

strokeWeight(6);

rect(50, 50, 700, 700);

strokeWeight(1);

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

line(50, 50+i*87, 750, 50+i*87);

line(50+i*87, 50, 50+i*87, 750);

}

fill(255, 0, 0);

ellipse(nowX*87+50, nowY*87+50, 87, 87); //ellipse

fill(0);

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

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

if (array[i][j]==1) ellipse(i*87+50, j*87+50, 87, 87); //ellipse

} } }

void mousePressed()

{ array[nowX][nowY]=1; }

void mouseMoved() {

nowX = (mouseX-50)/80;

nowY = (mouseY-50)/80;

println(" mouseX: "+mouseX+" mouseY: "+ mouseY+" nowX: "+nowX+" nowY:"+nowY);

}

貼你覺得有意思的影片, 使用youtube 的分享, Blogger 分享, 兩邊都改成 HTML, 貼上 HTML

訂閱：文章 (Atom)

2013年9月23日 星期一

2013年9月22日 星期日

2013年9月23日星期一

2013年9月22日星期日