一. Processing介绍
Processing 是一门开源编程语言和与之配套的集成开发环境(IDE)的名称。Processing 在电子艺术和视觉设计社区被用来教授编程基础,并运用于大量的新媒体和互动艺术作品中。
Processing 最开始的时候只是一门编程语言,因为发展势头好,在2012年的时候成立了Processing 基金会,开始横向拓展其他项目,比如p5.js, Processing的 R 模式等等。
Processing 可以用三个标签来总结:编程,视觉,易学。
简单来说,就是通过写代码来生成图案,用几行简单的代码就可以写出炫酷的视觉效果。
可以免费下载使用,官网:https://processing.org/。单击 Download Processing 并选择您的操作系统,下载安装即可。
Processing 在 2001 年诞生于麻省理工学院(MIT)的媒体实验室,主创者为 Ben Fry 和 Casey Reas,项目发起的初衷,本是为了满足他们自身的教学和学习需要。后来,当Casey在意大利的伊夫雷亚交互设计学院(Interaction Design Institute Ivrea)进行教学的时候,基于Processing,衍生出了Wiring和Arduino项目。随着时间的推移,又诞生了多个语言的版本,比如基于JavaScript的Processing.js,还有基于Python、Ruby、ActionScript以及Scala等版本。
Processing项目是Java开发的,所以Processing天生就具有跨平台的特点,同时支持Linux、Windows以及Mac OSX三大平台,并且支持将图像导出成各种格式。
Processing 是一种具有革命前瞻性的新兴计算机语言,为图像处理提供开源编程语言和环境,动画和互动。这是使用的学生,艺术家,设计师,研究人员和爱好者学习,原型及生产。这是建立基础教育计算机编程在视觉方面,并作为软件写生簿和专业的生产工具。Processing 开发的艺术家和设计师以替代专有软件工具在同一域中。
二. 基于Python案例
2.1 绘制正方形
ellipse(50, 50, 80, 80)
执行结果如下:
2.2 背景和颜色
background 功能被用来设置显示窗口的颜色。此函数可以使用各种不同的参数(来定义一个灰度值或 Red-Green-Blue [RGB] 颜色)。
size(100, 100)
background( 0, 128, 0 )
执行结果如下图:
2.3 鼠标控制箭头
def setup():
size(600,600)
cols = 20
xscl = 600/cols
yscl = 600/cols
sz = 6
def draw():
global cols, xscl, yscl
background(255)
for x in range(cols):
for y in range(cols):
arrow(10+x*xscl,10+y*yscl,sz)
def arrow(x,y,sz):
pushMatrix()
translate(x,y)
angle = atan2(mouseY-y,mouseX-x)
rotate(angle)
beginShape()
vertex(0,-sz/2.0)
vertex(2*sz,-sz/2.0)
vertex(2*sz,-3*sz/2.0)
vertex(4*sz,0)
vertex(2*sz,3*sz/2.0)
vertex(2*sz,sz/2.0)
vertex(0,sz/2.0)
endShape(CLOSE)
popMatrix()
2.4 正方向四周扩散
GRID_W = 41
GRID_H = 41
generation = 0
class Cell:
def __init__(self,r,c,on=0):
self.c = c
self.r = r
self.on = on
def display(self):
if self.on == 1:
fill(0)
else:
fill(255)
rect(SZ*self.r, SZ*self.c, SZ, SZ)
def checkNeighbors(self):
neighbs = 0
if self.on == 1: return 1
for dr,dc in [[-1,0], [1,0], [0,-1],[0,1]]:
try:
if cellList[self.r + dr][self.c + dc].on == 1:
neighbs += 1
except IndexError:
continue
if neighbs in [1,4]:
return 1
else:
return 0
def setup():
global SZ, cellList
noStroke()
size(600,600)
SZ = width // GRID_W + 1
cellList = createCellList()
def draw():
global generation,cellList
frameRate(10)
cellList = update(cellList)
for row in cellList:
for cell in row:
cell.display()
generation += 1
if generation == 30:
generation = 1
cellList = createCellList()
loop()
def update(cellList):
newList = []
for r,row in enumerate(cellList):
newList.append([])
for c,cell in enumerate(row):
newList[r].append(Cell(r,c,cell.checkNeighbors()))
return newList[::]
def createCellList():
'''Creates a big list of off cells with
one on Cell in the center '''
newList=[]
for j in range(GRID_H):
newList.append([])
for i in range(GRID_W):
newList [j].append(Cell(i,j,0))
newList [GRID_H//2][GRID_W//2].on = 1
return newList
执行结果如下:
2.5 红色圆圈
def setup():
size(600,600)
def draw():
background(255)
translate(width/2,height/2)
points = []
num = 24
for i in range(num):
x = 250*cos(radians(360.0*i/num))
y = 250*sin(radians(360.0*i/num))
points.append([x,y])
for p in points:
for other in points:
stroke(255,0,0)
line(p[0],p[1],other[0],other[1])
执行结果如下图:
2.6 绘制正弦曲线
r1 = 100
r2 = 10
t = 0
circleList = []
def setup():
size(600,600)
def draw():
global t, circleList
background(200)
translate(width/4,height/2)
noFill()
stroke(0)
ellipse(0,0,2*r1,2*r1)
fill(255,0,0)
y = r1*sin(t)
x = r1*cos(t)
circleList.insert(0,y)
ellipse(x,y,r2,r2)
stroke(0,255,0)
line(x,y,200,y)
fill(0,255,0)
ellipse(200,y,10,10)
if len(circleList)>300:
circleList.remove(circleList[-1])
for i,c in enumerate(circleList):
ellipse(200+i,c,5,5)
t += 0.05
执行结果如下图:
2.7 生成各种颜色
def setup():
size(600,600)
colorMode(HSB)
def draw():
background(0)
for x in range(20):
for y in range(20):
d = dist(30*x,30*y,mouseX,mouseY)
fill(0.5*d,360,360)
rect(30*x,30*y,25,25)
'''def draw():
#set background white
background(255)
translate(20,20)
textSize(12)
for i in range(10):
fill(20*i,255,255)
rect(31*i,0,25,25)
fill(0)
text(str(20*i),31*i+5,50)'''
执行结果如下:
2.8 绘制滚动的圆
t = 0.0
dt = 0.01
r = 50
ground = 250
x,Y = 0,ground-r
v = 2.0
points = []
def setup():
size(942,300)
def draw():
global t,dt,r,ground,x,y,points
background(255)
strokeWeight(2)
stroke(150)
line(0,ground,width,ground)
noFill()
ellipse(x,Y,2*r,2*r)
dot = PVector(x+r*cos(v*TWO_PI*t+PI/2),Y+r*sin(TWO_PI*v*t+PI/2))
points.append(dot)
line(dot.x,dot.y,x,Y)
fill(255,0,0)
ellipse(dot.x,dot.y,10,10)
for i,pt in enumerate(points):
if i < len(points) - 2:
stroke(255,0,0)
line(pt.x,pt.y,points[i+1].x,points[i+1].y)
x += TWO_PI*r*dt*v
if x > width:
x = 0.0
points = []
t += dt
执行结果如下
2.9 黑色背景白点圆
def setup():
size(600,600)
def draw():
background(0)
translate(width/2, height/2)
for i in range(12):
ellipse(200,20,15,15)
rotate(radians(360/12))
执行结果如下:
2. 10 无限圆圈放大
'''Web/Vortex of Circles
June 14, 2018'''
factor = 1.3
def setup():
size(600,600)
noFill()
stroke(255)
def draw():
global factor
background(0)
'''fill(255,0,0)
textSize(18)
text(factor,20,20)'''
factor -= 0.005
translate(width/2,height/2)
vortex(500,100)
'''saveFrame('####.png')'''
if factor <= 1.07:
factor = 1.3
def vortex(r,level):
num = 30
if level > 0:
r2 = r/4.0
for i in range(num):
pushMatrix()
rotate(radians(360*i/float(num)))
translate(r,0)
st = map(r2,0,100,0,3)
strokeWeight(st)
noFill()
ellipse(0,0,r2,r2)
popMatrix()
rotate(TWO_PI/(2*num))
vortex(r/factor,level-1)
|