Processing学习笔记

Processing 是一个编程环境和图形库,轻松实现代码可视化.

草图(sketch)创建的每个Processing程序
显示窗口(display window) 展示代码的可视化效果.

我们创建的每个sketch都包含Processing内置的两个函数:setup()和draw()
函数名无法修改,否则引发错误.
setup(): 函数中的代码会在你点击界面左上方的运行键时运行一次.
draw() : 函数中的代码会无限循环运行下去,直到你点击运行旁边的停止键.

def setup():
    size(600,600) #设置显示窗口大小600像素*600像素
def draw():
    ellipse(300,300,20,20)#椭圆函数,
    #四个参数: 椭圆中心的x坐标,y坐标,椭圆的宽度和高度

注:
1, 坐标(0,0)的点在窗口的左上角.因此,想要得到窗口中央的坐标,就要将窗口长度(600)和宽度(600)分别除2.
2,除ellipse()外,完整的函数列表在Processing网站的Reference中.
3,processing中的笛卡尔坐标系,
平面:x轴向右;y轴向下
立体:x轴向右,y轴向下,z轴垂直屏幕向外

Processing 画一个函数的曲线

#窗口默认大小是600*600
#所创建函数图像的x值和y值范围是-10到10
#创建两个变量,设置网格x的最小值和最大值
xmin = -10
xmax = 10

#设置y的最小值和最大值
ymin = -10
ymax = 10

#定义变量,计算x值和y值的范围
rangex = xmax - xmin
rangey = ymax - ymin

#因为要做图的大小不是600*600,而是rangex*rangey,所以要将图像中的坐标映射到Processing窗口中的坐标.
#这需要在作图时,将图像的x坐标和y坐标都乘以一个比例尺
def setup():
    global xscl,yscl #声明用来缩放图像的全局变量,分别代表x,y的比例尺
    size(600,600) #设置显示窗口大小600像素*600像素
    xscl = width/rangex
    yscl = -height / rangey # 注意:要在y的比例尺上加'-'号,因为y轴向下为正方向,加上'-'号后,改为向上为正方向
    
#为图像画出青色网格线
def draw():
    global xscl,yscl #告诉python不想创建新变量,只想使用之前定义过的全局变量
    background(255)#将背景设为'白色'
    #将原点从左上角移至屏幕中心
    translate(width / 2  ,height / 2)  # translate()函数将图像向上下左右平移.
    grid(xscl,yscl) #画出网格 , 定义成函数,可以很清楚的看到draw()执行哪些操作
    graphFunction()

def f(x):#定义一个函数,告诉python如何处理x来生成函数的输出
    return x**2

def g(x): #定义另一个更复杂的函数
    return 6*x**3 + 31*x**2 + 3*x -10
def graphFunction(): #画出f(x)从xmin到xmax的图像.
    x = xmin # 设置x的初始值
    while x <= xmax: #要画出图像,让x递增,直到它的值等于xmax
        fill(0)
        stroke(255,0,0)
        strokeWeight(10)
        # line(x*xscl,f(x)*yscl,(x+0.1)*xscl,f(x+0.1)*yscl) # 要画出一条曲线,最好的办法是将相邻的点用直线段连接起来
        line(x*xscl,g(x)*yscl,(x+0.1)*xscl,g(x+0.1)*yscl)
        # 如果点的距离足够近,整体看起来就是一条连续的曲线
        x += 0.1
    
def grid(xscl,yscl):
    #画一个用于作图的网格
    #青色的线
    strokeWeight(1) #设置线条的粗细,1代表最细,可以提供更大的参数得到更粗的线条.
    stroke(0,255,255) #改变线条颜色,使用青色(cyan)的RGB值,即最弱的红色,最强的绿色,最强的蓝色混合而成.
    for i in range(xmin,xmax+1): #用for 循环画出42条青色线
        #需要在ymin和ymax之间画出21条等距的水平青线,在xmin和xmax之间画出21条等距的竖直青色线
        #在本例中,xmin==ymin,xmax==ymax,所以水平和竖直的线合在一个循环里.
        #line(i,ymin,i,ymax)要乘以比例尺
        line(i*xscl,ymin*yscl,i*xscl,ymax*yscl) #给定两个点(起点和终点)的坐标,画竖直的线
        line(xmin*xscl,i*yscl,xmax*xscl,i*yscl) #画出水平线
    #画x轴和y轴
    stroke(0) #将线条颜色设为黑色, 0 是黑色 ; 255 是白色.
    line(0,ymin*yscl,0,ymax*yscl) #y轴
    line(xmin*xscl,0,xmax*xscl,0) #x轴
    
    # 画一个点
    fill(0) #实际是一个椭圆,填充为黑色,看起来是个点
    ellipse(3*xscl,6*yscl,10,10) # 坐标(3,6)