【Processing】互動藝術-入門

寫在前面，最近需要利用Processing作為上位機來控制機器人的動作和姿態。故在B站上學習了一下Process。https://www.bilibili.com/video/BV1m5411G74Y

void setup(){
    size(500,500);//用來控制彈出的介面大小
}
void draw(){
    //background(0);//設定彈出框背景色
    //fill(100);//告訴計算機我要填充什麼顏色
    //noStroke();//不需要任何描邊
    //ellipse(width/2,height/2,50,50);//畫圓，width與height分別是彈框的寬和高；
    background(mouseY);//獲取滑鼠座標作為顏色；
    fill(mouseX);//獲取滑鼠座標作為填充顏色；
    noStroke();//不需要任何描邊；
    ellipse(width/2,height/2,50,50);//畫圓，width與height分別是彈框的寬和高；前兩項是圓心位置，後面的兩項是長軸和短軸
}

void setup(){
    size(500,500);
    background(255);//背景色
}
void draw(){
   
    fill(mouseX/2);//獲取滑鼠座標作為顏色
    noStroke();//不需要任何描邊
    ellipse(mouseX,mouseY,50,50);//這裡圓心是滑鼠的位置，長軸=短軸=50
}

呈現出拖動效果，表明void draw是迴圈多次的

2全域性變數和本地變數

float L =2.5;//相當於全域性變數；設定過多的全域性變數會消耗記憶體。
int Z=50;

void setup(){
    size(500,500);
   // background(255);//背景色
}
void draw(){
    float circleSize=50;//本地變數，僅僅會在所在的大括號中被識別
    background(255);//背景色
    fill(mouseX/3);//獲取滑鼠座標作為顏色
    noStroke();//不需要任何描邊
    //ellipse(mouseX,mouseY,circleSize,circleSize);
    for(int y=0;y<10;y++){
      for(int x=0;x<10;x++)
      {
      ellipse(x*50,y*50,circleSize,circleSize);
      }
  }
}

通過translate平移起始位置

float L =2.5;//相當於全域性變數；設定過多的全域性變數會消耗記憶體。
int Z=50;

void setup(){
    size(500,500);
   // background(255);//背景色
}
void draw(){
    float circleNum=mouseX/10;
    float circleSize=width/circleNum;//本地變數，僅僅會在所在的大括號被識別
    translate(circleSize/2,circleSize/2);//平移起始位置
    background(255);//背景色
    fill(mouseX/3);//獲取滑鼠座標作為顏色
    noStroke();//不需要任何描邊
    //ellipse(mouseX,mouseY,circleSize,circleSize);
    for(int y=0;y<circleNum;y++){
      for(int x=0;x<circleNum;x++)
      {
      ellipse(x*circleSize,y*circleSize,circleSize,circleSize);
      }
  }
}

頭像處理

float L =2.5;//相當於全域性變數；設定過多的全域性變數會消耗記憶體。
int Z=50;
PImage myHead;

void setup(){
    size(500,500);
   // background(255);//背景色
   myHead = loadImage("i.JPG");
   myHead.resize(500,500 );
}
void draw(){
    float circleNum=mouseX/5;
    float circleSize=width/circleNum;//本地變數，僅僅會在所在的大括號被識別
    translate(circleSize/2,circleSize/2);//平移起始位置
    background(255);//背景色
  
    for(int y=0;y<circleNum;y++){
      for(int x=0;x<circleNum;x++){
      color c=myHead.get(int(x*circleSize),int(y*circleSize));//color用於獲取對應座標的顏色
      //float realSize=brightness(c);
      fill(c);//並將對應座標顏色填入圓形中
      noStroke();
      ellipse(x*circleSize,y*circleSize,circleSize,circleSize);//繪製當前座標上的圓形。（也就是把對應座標上的顏色填入到該座標的圓上）
      }
  }
  //image(myHead,0,0);
}