Processing介绍及几个python模式下的案例

超、凢脫俗 2022-09-03 15:14 294阅读 0赞

## 一. Processing介绍 ##

Processing 是一门开源编程语言和与之配套的集成开发环境（IDE）的名称。Processing 在电子艺术和视觉设计社区被用来教授编程基础，并运用于大量的新媒体和互动艺术作品中。

Processing 最开始的时候只是一门编程语言，因为发展势头好，在2012年的时候成立了Processing 基金会，开始横向拓展其他项目，比如p5.js, Processing的 R 模式等等。

Processing 可以用三个标签来总结：编程，视觉，易学。

简单来说，就是通过写代码来生成图案，用几行简单的代码就可以写出炫酷的视觉效果。

可以免费下载使用，官网：[https://processing.org/][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)

执行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70]

### 2.2 背景和颜色 ###

background 功能被用来设置显示窗口的颜色。此函数可以使用各种不同的参数（来定义一个灰度值或 Red-Green-Blue \[RGB\] 颜色）。

size(100, 100)
    background( 0, 128, 0 )

执行结果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 1]

### 2.3 鼠标控制箭头 ###

#arrow.pyde
    
    def setup():
        size(600,600)
        
    cols = 20 #number of columns
    #scale factors:
    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()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 2]

### 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) #black
            else:
                fill(255) #white
            rect(SZ*self.r, SZ*self.c, SZ, SZ)
            
        def checkNeighbors(self):
            neighbs = 0  #check the neighbors
            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=[]#empty list for cells 
        #populate the initial cell list
        for j in range(GRID_H): 
            newList.append([]) #add empty row 
            for i in range(GRID_W):
                newList [j].append(Cell(i,j,0)) #add off Cells or zeroes 
        #center cell is set to on
        newList [GRID_H//2][GRID_W//2].on = 1 
        return newList

执行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 3]

### 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))
            #put point in a list
            points.append([x,y])
    
        for p in points: #from every point
            for other in points: #to every "other" point
                stroke(255,0,0) #red
                line(p[0],p[1],other[0],other[1])

执行结果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 4]

### 2.6 绘制正弦曲线 ###

#CircleSineWave.pyde
    r1 = 100 #radius of big circle
    r2 = 10  #radius of small circle
    t = 0 #time variable
    circleList = []
    
    def setup():
        size(600,600)
        
    def draw():
        global t, circleList
        background(200)
        #move to left-center of screen
        translate(width/4,height/2)
        noFill() #don't color in the circle
        stroke(0) #black outline
        ellipse(0,0,2*r1,2*r1)
        
        #circling ellipse:
        fill(255,0,0) #red
        y = r1*sin(t)
        x = r1*cos(t)
        #add point to list:
        circleList.insert(0,y)
        ellipse(x,y,r2,r2)
        stroke(0,255,0) #green for the line
        line(x,y,200,y)
        fill(0,255,0) #green for the ellipse
        ellipse(200,y,10,10)
        
        if len(circleList)>300:
            circleList.remove(circleList[-1])
    
        
        #loop over circleList to leave a trail:
        for i,c in enumerate(circleList):
            #small circle for trail:
            ellipse(200+i,c,5,5)
    
        t += 0.05

执行结果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 5]

### 2.7 生成各种颜色 ###

def setup():
        size(600,600)
        #rectMode(CENTER)
        colorMode(HSB)
        
    def draw():
        #set background black
        background(0)
        #translate(5,5)
        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)'''

执行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 6]

### 2.8 绘制滚动的圆 ###

t = 0.0 #time
    dt = 0.01 #change in time
    r = 50 #radius of circle
    ground = 250 # y-val of line circle rolls on
    x,Y = 0,ground-r #initial location of circle
    v = 2.0 #horizontal velocity factor of circle
    points = [] #list to store points
            
    def setup():
        size(942,300)
        
    def draw():
        global t,dt,r,ground,x,y,points
        background(255) #white
        strokeWeight(2)
        stroke(150)
        line(0,ground,width,ground) #line for the "ground"
        noFill()
        ellipse(x,Y,2*r,2*r)
        #calculate position of drawing "dot"
        dot = PVector(x+r*cos(v*TWO_PI*t+PI/2),Y+r*sin(TWO_PI*v*t+PI/2))
        #save that position to the points list, to be drawn later
        points.append(dot)
        line(dot.x,dot.y,x,Y) #radial segment
        fill(255,0,0) #red dot
        ellipse(dot.x,dot.y,10,10)
        #loop through the points list to draw the curve
        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 #update x-value by velocity
        if x > width: #when the wheel gets all the way to the right
            #noLoop() # uncomment this out to only run it once
            x = 0.0 # reset position all the way to the left
            points = [] # erase the trail
        #println(x) #just for testing
        #println(dot.x)
        t += dt #increment the time variable

执行结果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 7]

### 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))

执行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 8]

### 2. 10 无限圆圈放大 ###

'''Web/Vortex of Circles June 14, 2018'''
    
    factor = 1.3
    
    def setup():
        size(600,600)
        noFill()
        stroke(255) #white lines
        
    def draw():
        global factor
        background(0)
        #Uncomment to display the value of factor
        '''fill(255,0,0) textSize(18) text(factor,20,20)'''
        factor -= 0.005
        #move the mouse to vary the factor
        #factor = map(mouseX,0,255,1,1.5)
        translate(width/2,height/2)
        vortex(500,100)
        #uncomment these lines to save screenshots:
        '''saveFrame('####.png')'''
        if factor <= 1.07:
            factor = 1.3 #noLoop() #will stop the loop
        
    def vortex(r,level):
        num = 30 #number of circles in one ring
        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) #make strokeWeight vary
                strokeWeight(st)
                noFill()
                ellipse(0,0,r2,r2)
                popMatrix()
            rotate(TWO_PI/(2*num))
            
    
            vortex(r/factor,level-1)#1.065,level-1)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 9]

[https_processing.org]: https://processing.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70]: /images/20220829/a9c981522d264a6698de680b9a1769e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 1]: /images/20220829/730f0d747be44c428916000ceeb69009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 2]: /images/20220829/56b41dc077e048b89417a2fa826c508b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 3]: /images/20220829/7a5945cb32d44043a74c370df9e0eeeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 4]: /images/20220829/8f98807092e04915a79bbfaa5f1482db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 5]: /images/20220829/da90af2e39de49b88808a2f2de9165e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 6]: /images/20220829/0545267f21b8498e83c35d66da17ab52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 7]: /images/20220829/cee587cdeff34432b8bc7e30a48b967e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 8]: /images/20220829/90004258934f4092b9560fe47fa56b24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1aV95b25naHVh_size_16_color_FFFFFF_t_70 9]: /images/20220829/218eba7994f147d3b05f905115c339e4.png