【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);
}