Processing创意编程（进阶篇）

• 一、前言
• 二、常用语法
• • 1、random随机数生成函数
  • 2、map映射函数
  • 3、noise噪声函数
  • 4、导入图片
  • 5、dist距离函数
  • 6、一维数组
  • 7、二维数组
  • 8、class类
• 四、参考资料

【转载请注明出处： https://leytton.blog.csdn.net/article/details/122153961】

一、前言

前面讲了《Processing创意编程（入门篇）》，接下来是进阶篇。
官方文档地址：https://processing.org/reference/

二、常用语法

1、random随机数生成函数

语法：random(a,b)，产生区间为[a,b)，即包含a，不包含b，的随机浮点数。
random(b)的范围为[0,b)。

参考资料 https://processing.org/reference/random_.html

如下图所示：

2、map映射函数

引用视频里的一张图：

比如，画布宽度为width，那么鼠标坐标的x范围是0到width，我们根据x的变化来改变背景色0到255。代码如下：

void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
}

void draw(){ 
  float x=map(mouseX,0,width,0,255);
  float y=map(mouseY,0,height,0,255);
  background(x,y,100);
}

运行效果如下：

3、noise噪声函数

引用视频里的一张图：

上代码：

float t=0;
void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  stroke(0);//画笔颜色为黑色
  strokeWeight(3);//画笔粗细
}

void draw(){
  background(255);//清空画布为白色
  t=map(mouseX,0,width,0,10);//根据鼠标位置生成初始随机数种子
  for(int i=0;i<width;i++){
    line(i,0,i,height*noise(t));
    t+=0.01;
  }
}

4、导入图片

图片放在项目的data目录下，直接把图片拖到编辑器会自动添加。
代码如下：

PImage img;
void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  img=loadImage("wowa.jpg");//载入图片wowa.jpg,图片要保存在data文件夹下。
  
  img.resize(800,800);//调整图片大小
  image(img,0,0);//显示图片从0,0坐标
}

5、dist距离函数

dist用于计算两点之间距离。

dist(x1, y1, x2, y2)
dist(x1, y1, z1, x2, y2, z2)

6、一维数组

void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  
  int colors[]={#f44336,#e91e63,#9c27b0,#3f51b5,#4caf50,#8bc34a};
  for(int i=0;i<colors.length;i++){
    fill(colors[i]);
    rect(50*i,0,50,50);
  }
}

7、二维数组

void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  
  int colors[][]={{#f44336,#e91e63,#9c27b0},{#3f51b5,#4caf50,#8bc34a}};
  for(int i=0;i<colors.length;i++){
    for(int j=0;j<colors[i].length;j++){
        fill(colors[i][j]);
        rect(50*j,50*i,50,50);
    }
  }
}

8、class类

创建10个圆，每个圆位置半径随机。位置慢慢移动、半径慢慢变大。

int num=10;
Circle[] circles=new Circle[num];
void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  
  for(int i=0;i<num;i++){
    circles[i]=new Circle(random(0,width),random(0,height),random(10,50));
  }
  
}

void draw(){
  background(0);
  for(int i=0;i<num;i++){
    circles[i].update();
    circles[i].show();
  }
}

class Circle{
  float x,y,r;
  Circle(float x,float y,float r){
    this.x=x;
    this.y=y;
    this.r=r;
  }
  
  void update(){
    this.x+=0.1;
    this.y+=0.1;
    this.r+=0.1;
  }
  
  void show(){
    ellipse(x,y,r,r);
  }
}

效果如下：

四、参考资料

二锅头【Processing零基础中文教程】2、进阶篇

如果本文对你有帮助，请点个赞让我知道哦