02160473賴緯漢_2015互動技術概論 week2

今天WEEK2的練習
做出簡化小畫家

1.使滑鼠能畫線(但卻不能控制黑線)

程式碼：
void setup()
{
  size(800,600);//畫面大小  
}
void draw()//畫出黑線
{
  line(mouseX,mouseY,pmouseX,pmouseY);
}

2.滑鼠按下畫出黑線

程式碼：
void setup()
{
  size(800,600);
  background(#3072FC);//背景顏色大小(EX：藍色)
}
void draw()
{
  if(mousePressed)//若按下滑鼠
    line(mouseX,mouseY,pmouseX,pmouseY);
}

3.選擇畫線顏色

程式碼：
void setup()
{
  size(800,600);
  background(#3072FC);
  stroke(#AD1A00);//初始畫線的顏色
}
void draw()
{
  fill(0,0,255); rect(0,0,100,100);//第一上色框框(深藍)
  fill(0,255,255); rect(0,100,100,100);//第二上色框框(天空藍)
  fill(255,255,255); rect(0,200,100,100);//第三上色框框(白色)
}
void mouseDragged()
{
  line(mouseX,mouseY,pmouseX,pmouseY);
}
void mousePressed()
{
  if(mouseX<100 && mouseY<100){stroke(0,0,255);}//若點選所選位置則換顏色
  else if(mouseX<100 && mouseY<200){stroke(0,255,255);}
  else if(mouseX<100 && mouseY<300){stroke(255,255,255);}
}

4.設定筆刷大小

程式碼：
void setup()
{
  size(800,600);
  background(#3072FC);
  stroke(#AD1A00);
}
float MyTsuTsuDer=1;//筆刷粗細函數
color MyStorke=color(0);//顏色函數
void draw()
{
  stroke(0); strokeWeight(1);//初始線的顏色(黑色)和粗細(1)
  fill(0,0,255); rect(0,0,100,100);
  fill(0,255,255); rect(0,100,100,100);
  fill(255,255,255); rect(0,200,100,100);
  stroke(MyStorke); strokeWeight(MyTsuTsuDer);
}
void mouseDragged()
{
  line(mouseX,mouseY,pmouseX,pmouseY);
}
void mousePressed()
{
  if(mouseX<100 && mouseY<100){MyStorke=color(0,0,255);}
  else if(mouseX<100 && mouseY<200){MyStorke=color(0,255,255);}
  else if(mouseX<100 && mouseY<300){MyStorke=color(255,255,255);}
  if(mouseX>700) MyTsuTsuDer=mouseY/30;
//若滑鼠在X設定位置內(mouseX>700)則筆刷隨Y座標越下面變大
}

5.簡易刮畫(未完成)
只會一點一點的，不太OK
因為使用像素畫法，所以會一點一點的

程式碼：
PImage imgBG;
PImage imgBlack;
void setup()
{
  size(800,600);
  imgBG=loadImage("colorBG.jpg");//最底層的漸層圖
  imgBlack=createImage(800,600,ARGB);//黑色背景(蓋住漸層圖)
 
  imgBlack.loadPixels();
  for(int i=0;i<imgBlack.pixels.length;i++)
  {
    imgBlack.pixels[i] = color(0,0,0,255);//color(紅,綠,藍,透明度Alpha)
  }
  imgBlack.updatePixels();
}
void draw()
{
  image(imgBG,0,0,width,height);//出現漸層圖
  image(imgBlack,0,0,width,height);//出現黑色背景
}
void mouseDragged()
{
  imgBlack.loadPixels();//讀取像素
  imgBlack.pixels[mouseX+mouseY*width] = color(0,0,0,0);//算出鼠標的點
 
  imgBlack.updatePixels();//更新像素
}

  簡易刮畫(完成)

程式碼：
PImage imgBG;
PGraphics pgBlack;
void setup()
{
  size(800,600);
  imgBG=loadImage("colorBG.jpg");
  imgBG.resize(800,600);
  pgBlack = createGraphics(800,600);
  pgBlack.beginDraw();
  pgBlack.background(0);
  pgBlack.strokeWeight(50);
  pgBlack.stroke(0,0,0,28);
  pgBlack.endDraw();
}
void draw()
{
  background(0);
  imgBG.mask(pgBlack);
  if(keyPressed) image(pgBlack,0,0);
  else image(imgBG,0,0,width,height);
}
void mouseDragged()
{
  pgBlack.beginDraw();
  pgBlack.strokeWeight(45); pgBlack.stroke(255);
  pgBlack.line(mouseX,mouseY,pmouseX,pmouseY);
  pgBlack.endDraw();
}

6.畫出漸層色的線

缺點是當筆刷變粗時漸層會變得不好看

程式碼：
void setup()
{
  size(800,600);
  colorMode(HSB,800);
  background(0);
  strokeWeight(2);
}
void draw()
{
  if(mousePressed)
  {
    stroke(mouseX,mouseY,800);
    line(mouseX,mouseY,pmouseX,pmouseY);
  }
}