正在加载
请稍等

菜单

Home 码农菜园 前端视界 爱上Processing-1 基础
Home 码农菜园 前端视界 爱上Processing-1 基础

爱上Processing-1 基础

前端视界 by   阅读量 5,001

Processing是早有耳闻、最近在学的一门语言,来三个传送门,官网资源网站processing.js。看的是这本书,爱上Processing,特点是字大纸厚页书少,看起来就像看连环画一样,边看边做些笔记。

1 界面

安装好后并运行Processing,在mac上的界面是这样的,从上到下依次是工具栏、文本编辑器和控制台,在工具栏里有两个大大的按钮,运行和停止。

processing界面

2 动手

来写一行代码吧,写完之后运行一下,就能看到一个圆,四个参数分别代码圆中心的x、y,圆的宽和高。

再来一个例子,生成一个480*120的窗口,并在鼠标所在位置画圆,如果鼠标按下则用黑色填充,否则用白色。

3 画图

下面列举一些常用画图函数:

  • size(width,height),设置画图窗口的宽和高;
  • point(x,y),画一个点;
  • line(x1,y1,x2,y2),画直线;
  • triangle(x1,y1,x2,y2,x3,y3),画三角形;
  • quad(x1,y1,x2,y2,x3,y3,x4,y4),画四边形;
  • rect(x,y,width,height),画矩形;
  • ellipse(x,y,width,height),画椭圆;
  • arc(x,y,width,height,start,stop),画扇形,start和stop为弧度,可取PI、HALF_PI、TWO_PI、QUARTER_PI等,适用加法,或者用radians(180)。
  • strokeWeight(w),设置线宽;
  • strokeJoin(ROUND|BEVEL),转折方式,圆角转折、棱角转折;
  • strokeCap(SQUARE|ROUND),线的边缘,方形的线、圆形的线;
  • background(c),设置背景填充色,c取值范围0~255,传入三个整数则对应RGB,传入第四个整数则为透明度;
  • fill(c),设置图形填充色,c取值范围0~255,传入三个整数则对应RGB,传入第四个整数则为透明度;
  • stroke(c),设置图形描边色,c取值范围0~255,传入三个整数则对应RGB,传入第四个整数则为透明度;
  • smooth()、noSmooth()、noFill()、noStroke(),开启平滑、关闭平滑、关闭填充、关闭描边;
  • beginShape();vertex(x,y);endShape(CLOSE),画任意多边形,可以有多个vertex;

现在,来画个Processing的P5机器人吧,大概是这么个东西。

P5机器人

22 2016-06

发表评论