正在加载
请稍等

菜单

Home 码农菜园 前端视界 爱上Processing-3 媒体和运动
Home 码农菜园 前端视界 爱上Processing-3 媒体和运动

爱上Processing-3 媒体和运动

前端视界 by   阅读量 3,649

Processing不只是画一些线段和图形,更核心的是对像素图片、失量文件和字体的使用,并且借助动作产生交互。首先下载以下文件并解压,之后在程序中会用上。

在Processing中,将media文件夹中的lunar.jpg直接拖到Processing界面中,点击“速写本/Sketch”中的“打开程序目录”,会发现在程序目录下已经生成了data文件夹,其中便包含刚才拖动添加的图片。当然也可以直接在程序目录下新建data文件夹,并复制文件进去,这在添加大文件时比较方便。

1 图像

将图像画到屏幕上需要3个步骤:

  1. 向data文件夹中添加图像文件;
  2. 用一个PImage变量存储图像;
  3. 使用loadImage()函数将图像读取到变量中。

之后使用image()函数即可显示出图像,第一个参数为要显示的图像,第二、三个参数为显示的位置,第四、五个参数为显示的宽和高。第四、五个参数还可以传入mouseX和mouseY,这样图像的宽高就会随鼠标移动而变化。

2 字体

使用“工具”中的“创建字体”,可以生成在processing使用的vlw字体文件,同样存放在data文件夹中,使用方法和图像类似,text()函数的第四、五个参数可以指定文本显示区域的宽和高。

3 形状

形状指的是通过illustrator等软件生成的svg文件,使用方式和图像类似,使用之前也需要把svg文件添加到data文件夹中,以下使用media文件夹中的network.svg,和图像中的image()函数类似,这里使用shape()函数显示形状。

 4 三个P5机器人

应该猜到了吧,又到了P5机器人时间,不过这次我们用svg素材,不用再自己画了,使用到的文件包括media文件夹中的robot1.svg、robot2.svg、robot3.svg和lunar.jpg,三个P5根据mouseY而移动。

5 运动

Processing的默认帧率是60帧/秒,所以运动的效果其实是视觉暂留的结果,使用frameRate()函数可以设置帧率。来一个简单的循环移动的例子。

6 随机

使用random(min, max)可以生成一个随机float值,来个随机抖动的例子。

接下来,用sin()和cos()画一个蚊香。

7 平移、旋转、缩放

translate(x, y)、rotate(rad)和scale(ratio)分别对坐标轴进行平移、旋转和缩放变换,请注意是对坐标轴进行,而不是针对某个元素。下面的例子组合了平移和旋转,尝试交换平移和旋转的调用顺序,看看结果有何不同。

再来看一个缓慢甩动的连接臂,组合了多个平移和旋转。

8 随机运动的P5

果然又来了,看看P5是如何随机运动的吧,虽然有点鬼畜……

22 2016-06

发表评论