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、入门篇
如果本文有帮到你,请点个赞让我知道哦 😃
更多推荐
Processing创意编程(入门篇)
发布评论