Processing创意编程（入门篇）

• 一、前言
• 二、下载安装
• 三、基础语法
• • 基础用法
  • 模调整式
  • 数据变量
• 四、参考资料

看到B站上的有很多有意思的创意编程，短短几行代码就实现了神奇的效果，于是笔者也不免手痒想玩一下。

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

打开Processing官网，如下下图所示，可以下载Processing编辑器，进行编程运行。同时也支持js、android、和python环境。
（PS：P5.js的网页编辑器不需要下载安装软件，不过被墙了无法打开）

void setup(){//启动时执行一次的函数
  size(800,600);//画布大小
  background(255);//背景颜色，调用时会用该颜色覆盖整个画布
  
  ellipse(100,100,100,200);//椭圆(圆心x坐标,圆心y坐标,x方向直径,y方向直径)
  
  fill(255,0,0,150);//改变填充颜色RGBA
  
  stroke(#0000ff);//画笔颜色
  strokeWeight(2);//画笔宽度，内外各占1像素
  ellipse(200,200,100,100);
  
  
  strokeWeight(6);//画笔宽度
  stroke(0,255,0);//画笔颜色
  
  rect(200,0,100,100);//矩形,A点坐标、长宽
  
  //noFill();//取消填充
  
  noStroke();//取消画笔
  
  frameRate(1);//每秒调用draw函数次数
  
}

void draw(){
  fill(random(0,255),random(0,255),random(0,255));//随机更改填充颜色
  
  rect(200,150,100,100);
}
}

运行效果如下：

更多基础语法可以参考其他资料：

• 《processing的基础语法》

小技巧：速写本->调整模式运行，运行起来后，鼠标移动到draw函数内的值上，可以动态调整更新画布效果。

胡调一通后效果如下图所示：

可以设置全局变量，或者局部变量进行计算。

void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  frameRate(2);//每秒调用draw函数次数
  
}

int i=0;
void draw(){
  if(i<8){
    stroke(random(0,255),random(0,255),random(0,255));
    line(0,100*i,800,100*i);
    line(100*i,0,100*i,800);
    i++;
  }
}

效果图：

此外，还支持for循环、while循环、if条件判断语法。

鼠标位置
直接用mouseX和mouseY来表示鼠标坐标。

画布颜色和圆的位置、颜色跟随鼠标变化，示例代码：

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

void draw(){
  background(mouseX/4,mouseY/4,100);//背景随鼠标变化
  fill(mouseX/5,mouseY/5,100);//填充颜色随鼠标变化
  ellipse(mouseX,mouseY,100,100);//圆形位置随鼠标变化
}

运行效果：

二锅头【Processing零基础中文教程】1、入门篇