processing动画基础

形容以前方

有关编程语言,江湖上早已流转着雷同词话,“真正的程序员用C++”。好吧,可不论怎么说自己为非思以成为了一个真正的程序员跳上C++这个大坑。家里翻了多照后按的C++
Primer,我实际是休知道什么时候能发生胆翻了。完全没什么动力啊,翻了了它们缺少日内本身吗非亮会干啥。–!

此可以引出processing了。这个语言把常用之图纸相关的操作都泛封装好了,你唯有需要简单的调用它们就实行了。size(320,240)就可以成立一个320×240分寸的画布,现在想在画布上绘一个接触,调用point(60,80),就可以当(60,80)的职画一个点了。想画一长长的线就需要调用line(0,0,width,height),就足以描绘一漫长由左上角至右手下角的线。width和height就是画布的厚实和赛之尺寸,processing会自动将其换成为实际上的画布尺寸。

看看它的官网介绍吧。processing就是计划下用来读视觉艺术和可视化编程用底,用她的大多是几搞艺术之或业余爱好者们。正因如此,它叫设计之非常简单和易学,上手它真的不待多长时间。有编程基础之,特别是发学过java的,可能都未待几分钟就是能够及亲手了–它默认使用的就是个简化版的java,所以它也是超平台的,不管而用底是windows,mac
os 还是linux,都能用。

此外,processing最特别之亮点是它还是免费之。你可以触这里挑选No
Donation免费生充斥到她。当然了,你为可因你的能力选择其他的选取给予资助。

图片基础

先是使证明的凡processing支持android mode,java mode,python
mode…等等好几独模式,我选的凡python
。不是为什么高尚的说辞,只是以我懒,想少敲几单括号少写几只分行而已。顺便安利一下:python也是坏简单好之,貌似我吗远非看几上教程。反正自己弗是高手,有时候自己无比愚笨了那么便用笨一点底方法呗,能够缓解问题就是实施了。

主界面

安装Python Mode for Processing

未啰嗦了,不论我们如果写生什么,都得发个地方失去描绘吧。
所以,第一词得打平块画布开始:

size(320,240)

当即是建一个320如素宽,240像从高之画布的通令。
Ctrl+R,然后就可以看到对应大小的画布了。

您自可以改成为你想要之尺寸,如size(800,600)

有矣画布,点、线、面走由:

1.由一个触及起:

size(320,240)
point(160,120)

320x240px之画布,在(160,120)的职画了一个粗黑点。

点1

勿顶明了是吧,没事,我们得加上这简单句:

size(320,240)
background(255)
strokeWeight(10)
point(160,120)

background(255)表示将背景色改成为白色。这里顺便取一下,background()一个参数时取值范围是[0,255],表示从0(黑色)到255(白色)的灰度值。
本条说到颜色动画的当儿再说,具体的参数可以翻:background()
地方好像忘记了说坐标系了,直接打张图吧:

坐标系

官方的坐标系介绍配图:

coordinates2D3D.png

角度和弧度,不思量写图了,截张《Getting Started with
Processing》书里的吧:

角度和弧度

2.processing里发一些常用的系统变量,像width,height,mouseX,mouseY…具体的可以查文档。
如面的例证在画布中间画个小点,可以改化:

size(320,240)
background(255)
strokeWeight(10)
point(width/2,height/2)

行职能是相同的,但是无论你于size()把画布改成为多少,这个点还好描绘在画布中间,如图:

Paste_Image.png

此外值得一提的片个例外措施是setup()和draw():
*setup()在processing执行时受实践同样潮,可以用来初始化一些限令。
*draw()在processing重绘画布时由processing自动调用。

吓了,关于processing的发出时间再补偿吧。标题写的动画基础,结果写了大体上上自己还不曾于她动起来。再拖下去有坑的惊险。就被自己从者点起来动起来吧。

动画片基础

1.匀速运动

1.1 直线走
率先考虑的简有之匀速运动,让点沿x轴从左运动到右,假定x轴上之快是vx,代码如下:

x, y, vx = 0, 120, 2

def setup():
    size(320, 240)
    strokeWeight(10)
    background(255)

def draw():
    global x, y, vx
    x += vx
    background(255)
    point(x, y)

OK,点动起来了,从左(0,120)的岗位上马,每一帧点且朝着右侧走vx(代码中设定为2px)的去,然后打画布右边消失了,并且黄鹤一去不复返…OTL

jdfw.gif

没事,我们得以添加一个检测语句,如果接触由右侧移动有了画布(x>width),我们尽管叫它们回到起点(x=0)好了.(弹性与打我们后再说)

# vx是点在x轴上的速度

def setup():
    global x, y, vx
    x, y = 0, height / 2
    vx=2
    size(320, 240)
    strokeWeight(10)
    background(255)

def draw():
    global x, y, vx
    x += vx
    if x > width:
        x = 0
    background(255)
    point(x, y)

然,小球超出范围就见面从起点重新开了。

jdfw2.gif

同理y轴上之位移可以加一个vy,下面的例证点在x,y两只轴上还生速度:

# x,y是点的坐标(x,y)
# vx,vy是点在x轴和y轴上的速度

def setup():
    global x, y, vx, vy
    x, y, vx, vy = 0, 0, 2, 2
    size(240, 240)
    strokeWeight(10)
    background(255)

def draw():
    global x, y, vx, vy
    x += vx
    y += vy
    if x > width:
        x = 0
    if y > height:
        y = 0
    background(255)
    point(x, y)

jdfw3.gif

可看看圆点的实际上速度v是少数独轴上的底速vx和vy的向量和。如图:

Paste_Image.png

也即是根据实际活动速度值v和自由方向a,我们同样可算出来圆点在x轴上同y轴上之进度vx,vy。
很明显:
vx=v*cos(a)
vy=v*sin(a)
如今好为速度v往任意方向a运动了:

# 点坐标(x,y),速度v,方向a

def setup():
    global x, y, v, a
    x, y, v, a = width / 2, height / 2, 2, radians(10)
    size(320, 240)
    strokeWeight(10)
    background(255)

def draw():
    global x, y, v, a
    vx = v * cos(a)
    vy = v * sin(a)
    x += vx
    y += vy
    # x,y超出范围返回起始位置
    if x < 0 or x > width:
        x = width / 2
        y = height / 2
    if y < 0 or y > height:
        x = width / 2
        y = height / 2
    background(255)
    point(x, y)

这里要留意一下cos()和sin()的参数是弧度值,如果为的凡角度,可以运用radians()转换成弧度。
另外,参见之前的角度以及弧度的希冀,processing的价值是顺时针增加的,不是逆时针。

jdfw4.gif

本条事例里之vx,vy其实是固定值,可以放setup()里算同一次就够了,不用在draw()里老是计算。没错,这个事例里确实可以这样改,这样描绘的来由是还有中继下去的圆运动吗。
好家伙,不知不觉码字码到好后了。头等同糟糕用Markdown,还未绝熟悉,圆周就留给着跟变速运动并慢慢写吧。

1.2 圆圆动
随着来写到周运动吧。
以看起方便,用AI画了张示意图:

Paste_Image.png

本条例子如齐图:(x0,y0)为圆心,半径为r,起始角度为start_a,速度吗v。那么好鲜明,点之坐标(x,y)应该是:

a=start_a
x=x0+rcos(a)
y=y0+r
sin(a)

而今如吃点绕圆心(x0,y0)作以定点速度v作圆周运动,很引人注目不过待懂得一个变量角速度va。这个v是线速度还值恒定,那么每帧这个角度a的变化值va(也即是竞技速度)也生简短算出来:以线速度跟坐比速度分别算出来的改一环的时间t应该是相当的:

t=TWO_PI*r/v=TWO_PI/va

得到:

va=v/r

ok,现在足好圆周运动的卡通了:

def setup():
    global x0, y0, v, r, a
    # 以点x0,y0为圆心,v是线速度,r是圆半径
    x0, y0, v, r = width / 2, height / 2, 3, 30
    # start_a是起始角度,单位是度
    start_a = 30
    a = radians(start_a)
    size(320, 240)
    strokeWeight(10)
    background(255)

def draw():
    global x0, y0, v, a, r
    va = float(v) / r
    x = x0 + r * cos(a)
    y = y0 + r * sin(a)
    a += va
    background(255)
    point(x, y)

圆圆的走

可以以圆心加个十字线更明显有些:

def setup():
    global x0, y0, v, r, a
    # 以点x0,y0为圆心,v是线速度,r是圆半径
    x0, y0, v, r = width / 2, height / 2, 3, 30
    # start_a是起始角度,单位是度
    start_a = 30
    a = radians(start_a)
    size(320, 240)
    strokeWeight(10)
    background(255)
    frameRate(24)

frm=0

def draw():
    global x0, y0, v, a, r
    va = float(v) / r
    x = x0 + r * cos(a)
    y = y0 + r * sin(a)
    a += va
    background(255)
    point(x, y)

    # 在圆心画一个十字线
    strokeWeight(1)
    line(width / 2 - 5, height / 2, width / 2 + 5, height / 2)
    line(width / 2, height / 2 - 5, width / 2, height / 2 + 5)
    strokeWeight(10)

标记圆心的圆圆运动

这些基本的倒是基础,你得以基础之上加上一些和好之想法。试着改变一下初始参数,或者简直加上自己想如果的效应:比如改变颜色、透明度或大小,或者打成阵列。比如可试试着吃到慢慢流失,代码如下:

def setup():
    global x0, y0, v, r, a
    # 以点x0,y0为圆心,v是线速度,r是圆半径
    x0, y0, v, r = width / 2, height / 2, 10, 30
    # start_a是起始角度,单位是度
    start_a = 30
    a = radians(start_a)
    size(320, 240)
    strokeWeight(10)
    background(255)
    frameRate(24)


def draw():
    global x0, y0, v, a, r
    va = float(v) / r
    x = x0 + r * cos(a)
    y = y0 + r * sin(a)
    a += va
    # background(255)
    fill(0x33ffffff)
    noStroke()
    rect(0,0,width,height)
    stroke(0,0,0)
    strokeWeight(10)
    point(x, y)

增长一些别职能的团运动