Processing创意编程

• 一、前言
• 二、下载安装
• 三、基础语法
• • 基础用法
  • 模调整式
  • 数据变量
• 四、系统接口
• • 鼠标位置
  • 鼠标拖动
  • 鼠标按下
  • 键盘监听
  • 获取时间
  • 全屏显示
  • 整体效果
• 五、参考资料

一、前言

看到B站上的有很多有意思的创意编程，短短几行代码就实现了神奇的效果，于是笔者也不免手痒想玩一下。
本系列教程共三篇：
1、《Processing创意编程（入门篇）》
2、《Processing创意编程（进阶篇）》
3、《Processing创意编程（熟练篇）》

【转载请注明出处： https://leytton.blog.csdn/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);//圆形位置随鼠标变化
}

运行效果：

鼠标拖动

int pmouseX=0;
int pmouseY=0;
void mouseDragged()
{
    if(pmouseX==0){
		
	}
    line(pmouseX,pmouseY,mouseX,mouseY);
}

鼠标按下

if(mousePressed){
	//TODO
}

键盘监听

添加以下函数则能监听键盘按键：

void keyPressed()
{
    print(key);
}

获取时间

年year()、月month()、日day()

时hour()、分minute()、秒second()

程序运行时间millis()

全屏显示

fullScreen()设置当前屏幕成全屏
fullScreen(int i)可以设置在系统中的其它屏幕上显示，i是系统中的显示器的编号；

Esc键退出
注意fullScreen不能与size函数同时使用。

整体效果

int pmouseX=0,pmouseY=0;

void setup(){//启动时执行一次的函数
  size(600,600);//画布大小
  background(0);//背景色
  stroke(255);
  //fullScreen();
}

void draw()
{   
  if(mousePressed){
      //print("鼠标点击");
  };
}

void mouseDragged()
{
    if(pmouseX==0 || pmouseY==0){
        pmouseX=mouseX;
        pmouseY=mouseY;
    }
    line(pmouseX,pmouseY,mouseX,mouseY);
    pmouseX=mouseX;
    pmouseY=mouseY;
}

void keyPressed()
{
    print(key);
    if(key=='c'){
        saveImage();
    }
   
}

void saveImage(){
    // 获取年月日
    int y = year(),m = month(),d = day();    
    // 获取时分秒
    int h = hour(),min = minute(),s = second();
    // 字符串化
    String sy = str(y),sm = str(m),sd = str(d);    
    String sh = str(h),smin = str(min),ss = str(s);
    // 补齐0
    if(m<10){sm="0"+sm;}if(d<10){sd="0"+sd;}
    if(h<10){sh="0"+sh;}if(min<10){smin="0"+smin;}if(s<10){ss="0"+ss;}
    // 系统时间字符串
    String sysTime = sy+""+sm+""+sd+"-"+sh+""+smin+""+ss;
    
    String name="E:\\"+sysTime+"-"+millis()+".png";
    saveFrame(name);
}

五、参考资料

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

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