互動設計week01

 Week01 

    1 . 設定偏好設定

        字型大小
        字形 :改為中文字體

    2 . 改變視窗大小

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

    3 . 改變背景顏色

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

    4 . 互動程式

            void setup()

            {

                   size(500,500);

                   background(255,255,0);

            }

            void draw()//畫圖每秒畫60次

            {

                  ellipse(mouseX, mouseY, 8, 8);

            }

5 .  畫線

void setup()
{
   size(500,500);
   background(255);//改為白色背景;
}

void draw()//畫圖每秒60次
{
  if(mousePressed){//如果按下滑鼠
     line(mouseX,mouseY,pmouseX,pmouseY); 
  }//畫線(滑鼠座標mouseX,mouseY, 到之前滑鼠座標pmouseX,pmouseY);
}

6 . 畫不同顏色的線

void setup()
{
   size(500,500);
   background(255);//改為白色背景;
}

void draw()//畫圖每秒60次
{
  if(mousePressed){//如果按下滑鼠
     line(mouseX,mouseY,pmouseX,pmouseY); 
  }//畫線(滑鼠座標mouseX,mouseY, 到之前滑鼠座標pmouseX,pmouseY);
}

void keyPressed()//如果有按下keyboard的key
{
   if(key=='1') stroke(255,0,0);//如果按下數字1 就筆觸是紅色
   if(key=='2') stroke(0,255,0);//如果按下數字2 就筆觸是綠色
   if(key=='3') stroke(0,0,255);//如果按下數字3 就筆觸是藍色
}

7 . 存檔 輸出

void setup()
{
   size(500,500);
   background(255);//改為白色背景;
}

void draw()//畫圖每秒60次
{
  if(mousePressed){//如果按下滑鼠
     line(mouseX,mouseY,pmouseX,pmouseY); 
  }//畫線(滑鼠座標mouseX,mouseY, 到之前滑鼠座標pmouseX,pmouseY);
}

void keyPressed()//如果有按下keyboard的key
{
   if(key=='1') stroke(255,0,0);//如果按下數字1 就筆觸是紅色
   if(key=='2') stroke(0,255,0);//如果按下數字2 就筆觸是綠色
   if(key=='3') stroke(0,0,255);//如果按下數字3 就筆觸是藍色
   if(key=='s' || key =='S') save("output.png");//如果按下s建,存檔並輸出
}

8 . 改變線條粗細

void setup()
{
   size(500,500);
   background(255);//改為白色背景;
}

void draw()//畫圖每秒60次
{
  if(mousePressed){//如果按下滑鼠
     line(mouseX,mouseY,pmouseX,pmouseY); 
  }//畫線(滑鼠座標mouseX,mouseY, 到之前滑鼠座標pmouseX,pmouseY);
}

void keyPressed()//如果有按下keyboard的key
{
   if(key=='1') stroke(255,0,0);//如果按下數字1 就筆觸是紅色
   if(key=='2') stroke(0,255,0);//如果按下數字2 就筆觸是綠色
   if(key=='3') stroke(0,0,255);//如果按下數字3 就筆觸是藍色
   if(key=='s' || key =='S') save("output.png");//如果按下s建,存檔並輸出
   if(key=='+') strokeWeight(10);//線條變粗
   if(key=='-') strokeWeight(1);//線條變細
}

9 . 自訂線條粗細

void setup()
{
   size(500,500);
   background(255);//改為白色背景;
}

void draw()//畫圖每秒60次
{
  if(mousePressed){//如果按下滑鼠
     line(mouseX,mouseY,pmouseX,pmouseY); 
  }//畫線(滑鼠座標mouseX,mouseY, 到之前滑鼠座標pmouseX,pmouseY);
}

int w=1;
void keyPressed()//如果有按下keyboard的key
{
   if(key=='1') stroke(255,0,0);//如果按下數字1 就筆觸是紅色
   if(key=='2') stroke(0,255,0);//如果按下數字2 就筆觸是綠色
   if(key=='3') stroke(0,0,255);//如果按下數字3 就筆觸是藍色
   if(key=='s' || key =='S') save("output.png");//如果按下s建,存檔並輸出
   if(key=='+') strokeWeight(++w);//線條變粗
   if(key=='-') strokeWeight(--w);//線條變細
   println(w);
}