Evan's learning notes

IDEA9103 Design Programming

Chapter 6 – Translate, Rotate, Scale 转换原点 旋转 缩放 — March 31, 2017

Chapter 6 – Translate, Rotate, Scale 转换原点 旋转 缩放

Advertisements
Chapter 5 – Response 对输入设备的响应 — March 26, 2017

Chapter 5 – Response 对输入设备的响应

Intro

想要程序对输入设备做出响应,那么这个程序必须持续运行,在processing中,这个函数叫 draw()。

 

Once and Forever

draw()函数循环自上至下运行,直到程序被停止,每次的运行被称为一帧 frame。默认每秒60帧。

Example 5-1 draw()

屏幕快照 2017-03-26 19.56.41

例子: println(frameCount);

名称:frameCount

解释:frameCount是系统自带变量,显示运行到现在一共输出了多少帧。在setup()中初始为0。

屏幕快照 2017-03-26 19.57.40

例子: println(frameRate);

名称:frameRate

解释:frameRate也是系统自带变量,与frameCount不同,frameRate显示当前帧数,虽然默认是60帧,但其实并不稳定,有一点点误差,也跟计算机配置有关。初始值为10fps。

Example 5-2 setup()

setup()函数只运行一次,通常,该函数被用作初始化变量。第一行通常是size()函数,然后是fill(),和stroke(),或者加载图片和设定字体。size默认值为100*100。

Example 5-3 Global Variable 全局变量

全局变量通常声明在代码头部,在import后。

 

Follow

我们可以追踪鼠标的位置,并用这些数据来移动屏幕上的图形元素。

Example 5-4 跟随鼠标

屏幕快照 2017-03-26 20.16.15.png

例子: ellipse(mouseX, mouseY, 9, 9);

名称:mouseX, mouseY

解释:两个系统变量,分别为鼠标当前位置的x,y轴坐标值,单位为像素。注意图中是一堆小点而不是线。

Example 5-5 跟随鼠标的小点

屏幕快照 2017-03-26 20.17.54屏幕快照 2017-03-26 20.19.37.png

与上一个例子不同,这次只有一个小点跟随鼠标,而不是一堆堆的小点,因为这里使用了background()函数。

background()函数在调用时会清空当前画布。

Example 5-6 连续绘制

屏幕快照 2017-03-26 20.28.14

屏幕快照 2017-03-26 20.28.28

mouseX mouseY 存储了当前帧鼠标位置

pmouseX pmouseY 则存储了上一帧鼠标的位置

这些系统变量可以用line()函数画出连续平滑的曲线。

Example 5-7 用 dist() 函数计算鼠标速度 设定线的粗细

屏幕快照 2017-03-26 20.34.58.png

屏幕快照 2017-03-26 20.38.27

dist() 函数计算两点间距离

strokeWeight() 函数设定线粗

Example 5-8  Easing 缓和技术

在上一个例子中,鼠标的位置被直接用来绘制图形,这样动态的绘制非常灵敏,但线条又有些生硬,有时我们想要更松散一点,让绘制跟鼠标产生一些延迟,有一种更流体的感觉。这种技术叫做easing。

屏幕快照 2017-03-26 20.54.41.png

屏幕快照 2017-03-26 20.56.55.png

屏幕快照 2017-03-26 20.55.44.png

控制台中实时的输出了目标位置和实际绘制位置。

Example 5-9 用easing技术绘制更流畅的线条

屏幕快照 2017-03-26 21.02.22.png

屏幕快照 2017-03-26 21.06.13.png

从图中可以看出,我们确实得到了更平滑的曲线,因为绘制产生了计算延迟,而不是用鼠标位置实时绘制。

根据以上的例子 我自己又改进了两个版本

版本1 静态随机颜色绘制曲线

屏幕快照 2017-03-26 21.19.14

版本2 动态随机颜色绘制曲线 自动的哦

屏幕快照 2017-03-26 21.24.57.png

这还有个gif预览效果 画质被压缩的好差啊。。。

randomColorLineD.gif

 

Click 点击鼠标

变量名:mousePressed

变量类型:boolean

值:true/false

 

变量名:mouseButton

值:LEFT CENTER RIGHT

 

Location 使用鼠标位置的几个案例

Example 5-14 The Bounds of a Circle 判断鼠标是否在圆内

 

Example 5-15 The Bounds of a Rectangle 判断鼠标是否在圆内

 

Type 按下键盘

keyPressed

key

 

Map() 映射

把一个值从一个范围映射到另一个范围

Chapter 4 – Variables 变量 — March 18, 2017

Chapter 4 – Variables 变量

Intro

既然是编程,该来的总是会来。本章讲解变量,我就挑几个我不是太熟悉的记一下吧,太琐碎的写着浪费时间。

Making Var

这里介绍了两种变量类型,int和float。

Processing Var

介绍了两个系统自带的变量,width和height。分别是画布的宽和高,方便使用。

Math

简单的运算,加减乘除,注意优先级。

For loop

和其他编程语言语法一样,略略略。

Example 4-10

屏幕快照 2017-03-18 22.44.39.png

Example 4-12 Pins and Lines

Example 4-13 Halftone Dots

屏幕快照 2017-03-18 23.12.02.png

Robot 2

在robot 1的基础上把参数换成了变量名

总结

本章介绍变量概念,数学运算,for循环语句。还介绍了几个有趣的实例,利用for循环生成一些看起来很奇妙的图案,最后散点的案例比较有意思,只用了短短5行代码,如果这个图案用ps手工绘制不知道要花多长时间lol,coding还真懒人的利器呢。

Chapter 3 – Draw 定义并绘制简单的图形 —

Chapter 3 – Draw 定义并绘制简单的图形

Intro

最开始用软件画图就像在纸上画图一样,有着严格的步骤。但当新的概念引入之后,这些简单的图形将会扩展动画和交互元素。这一章介绍简单的图形绘制方法。

计算机屏幕由很多个发光单元组成,这个单元称为“像素”。每个像素都有自己的坐标值。在Processing中,画布的最左上角的坐标值为(0, 0)。如果一张长宽各200px的画布,那么最右下角的坐标值是多少呢,是(199, 199),而不是(200, 200)。因为在计算机领域,我们通常从0开始计数而不是1。

The Display Window 画布

Function函数是Processing程序的基本构成单元之一,虽然是基于java语言的,这里却并没有被叫做method,但称作方法我认为也没问题。

Example 3-1: Draw a Window 画布

例如几乎每个Processing程序都会有size()函数,控制画布大小,它有两个参数分别为宽和高。size(宽,高)。默认画布大小为100 * 100px。

屏幕快照 2017-03-18 15.43.02

Example 3-2: Draw a Point 点

屏幕快照 2017-03-18 15.46.05

语法:point(x坐标,y坐标);

画布中央有个小点。

Basic Shapes 基本图形

直线

屏幕快照 2017-03-18 20.54.14

语法:line(x1, ,y1, x2, y2);

起始点坐标(x1, y1)

结束点坐标(x2, y2)

三角形

屏幕快照 2017-03-18 20.58.20

语法:triangle(x1, ,y1, x2, y2, x3, y3);

分别为三个顶点坐标。

四边形

屏幕快照 2017-03-18 21.06.52

语法:quad(x1, ,y1, x2, y2, x3, y3, x4, y4);

四个顶点坐标。

矩形(对边相等)

语法:rect(x, y, width, height);

左上角顶点坐标(x, y),和宽高。

圆形(不一定是正圆)

语法:ellipse(x, y, width, height);

圆心坐标(x, y),和宽高(不是半径)。

扇形/弧形

屏幕快照 2017-03-18 21.42.47.png语法:arc(x, y, width, height, start, stop);

这里要注意,start和stop的单位有两种,表示弧度的PI,或者表示角度的radians(180),PI = 180度。0度位置在3点钟方向。radians()函数将参数角度转换成了弧度。

再注意:start < stop,否则画不出来。

例如:arc(90, 60, 80, 80, radians(90), radians(60)); //这段代码就画不出来

Drawing Order 绘制顺序

屏幕快照 2017-03-18 21.13.17.png

程序从上到下编译,所以最后绘制的图形永远在最上面图层。

Shape Properties 图形属性

Set Stroke Weight 线粗细

屏幕快照 2017-03-18 21.16.46.png

语法:strokeWeight(像素);

Set Stroke Cap 线端点样式

屏幕快照 2017-03-18 21.25.21.png

语法:strokeCap(类型);

类型:SQUARE/ROUND/PROJECT

Set Stroke Joins 线段连接处样式

语法:strokeJoin(类型);

类型:MITER (默认 45度角拼接) BEVEL (边角磨成斜边) ROUND(圆滑边角)

Drawing Modes

改变图形函数传参的方式 后面章节大概会详细讲吧 看看就行了

On the Corner

语法:ellipseMode(类型);

类型:RADIUS(半径) CENTER(中心点) CORNER(矩形左上角顶点) CORNERS(矩形左上角顶点和右下角顶点)

除此之外还有rectMode(),imagemode(), shapeMode()。

Color

控制背景(默认灰色而不是白色),图形填充,线的颜色。

background(颜色值);

fill(颜色值);

stroke(颜色值);

单一值:0是黑色,128是中度灰,255是白色。

RGB

(红, 绿, 蓝),(0, 0, 0) 是黑色,(255, 255, 255)是白色。

(255, 0, 0) 红 (0, 255, 0) 绿 (0, 0, 255) 蓝

noFill(); 不填充颜色

noStroke(); 不描边

在 工具-颜色器 选择颜色更方便

Set Transparency 透明度

透明度也叫alpha值 取值范围0 – 255,0全透明 ,不显示,255实心不透明。

Custom Shapes 自定义形状

语法:

beginShape();  //开始自定义图形

vertex(x, y);  //每个顶点的坐标 注意连线顺序

endShape(CLOSE);  //结束图形绘制 封闭图形

总结

本章介绍了设置画布大小,基本形状绘制,绘制顺序,还讲解了3个形状属性,分别是线条粗细,端点样式,连接样式。还介绍了绘画mode,比如用矩形的传参方式画圆。颜色值可以是单一的0-255的灰度,也可以是RGB的彩色值。还介绍了透明度,不填充,不描边等函数。最后介绍了自定义图形的绘制方法。本章最后还有一个画机器人的练习,但是我觉得纯靠脑子计算绘图的坐标然后用代码输入有点智障。。。希望后面会介绍一些黑科技吧。

Chapter 2 – Starting to Code 创建第一个Processing程序 — March 17, 2017

Chapter 2 – Starting to Code 创建第一个Processing程序

Intro

此章节开始介绍了如何在各个操作系统下安装Processing软件。

另外,学习编程的最快方法不是阅读,而是动手实践!

Your First Program

屏幕快照 2017-03-18 13.57.28

Processing最新版是Processing 3.3。这个软件是Processing的开发环境PDE(Processing Development Environment),就像Java的Eclipse,Swift的Xcode。界面异常简洁,不像其他IDE一样一打开就是一大堆不明所以的按钮菜单,LOL。所以表怕,Processing应该非常好上手。白色区域编辑代码,左上方两个按钮为运行,停止运行。下方黑色区域是控制台,用于输出调试信息。也可以点击Errors查看当前代码中存在的语法错误。

Example 2-1: Draw an Ellipse 画一个圆

屏幕快照 2017-03-18 13.58.07

代码效果:圆心坐标(50,50)宽高都为80px;

语法:ellipse(圆心x轴坐标, 圆心y轴坐标, 宽, 高);

Example 2-2: Make Circles 点击鼠标 让圆变色

屏幕快照 2017-03-18 17.14.08

代码效果:圆心在鼠标坐标,宽高80px,圆是白色,点击鼠标变成黑色。

void setup()    方法调用,软件运行只调用一次,用于设置画布等初始状态。

void draw()    方法调用,每秒30帧循环执行,可更改帧率,在画布上每秒绘制30次。

size();    画布大小

fill();    填充颜色 要先填充颜色 再绘制要填充的图形

ellipse();    画圆

mousePressed    鼠标被按下

mouseX    鼠标当前x轴坐标

mouseY    鼠标当前y轴坐标

0 – 255    黑色 – 白色

Show

运行快捷键:Cmd + r

停止:Esc

Save and new

快捷键:Cmd + s

文件格式:.pde

Share

快捷键:Cmd + Shift + e

输出成一个可双击运行的文件,以供分享。

Examples and Reference

Processing里有多个案例代码可供使用,在file – examples目录下。

在代码编辑器中鼠标右键方法名并点击查询引用,即可跳转到该方法的文档说明。

总结

本章介绍了Processing的界面,并展示了两段简单的代码,分别是画圆,和通过鼠标实时影响图形绘制。我还记录了一些快捷键,这些快捷键和其他IDE的几乎一样,所以很好记。

Chapter 1 – Hello 关于Processing —

Chapter 1 – Hello 关于Processing

Background 背景

Processing语言诞生于2001年,相比数据结构与文字输出,它更注重于图形和交互。2008年发行了1.0版本,2013年春发行了2.0版。使用了OpenGL,GLSL shaders,并应用GStreamer达到更快的视频回放功能。3.0版本于2015年发行,改进了用户界面并增加了语法纠错功能。本书由Casey Reas和Ben Fry编写,我正阅读的是该书的第二版。书中的技术可以应用于创作游戏,动画和用户界面等方面。而这仅仅是探索Processing语言世界的开始。

Hello这一章节主要是了解Processing的诞生与它所延伸出的家族们,我挑几点记录一下,就不过多叙述了。

Processing是一门用来实现通过软件生成图片、动画、和交互等工作的编程语言。目的很简单,写一行代码,可以在显示器上输出一个圆,再添加几行代码,让这个圆可以跟着鼠标实时移动。再添加一行代码,可以让圆在鼠标按下时改变颜色。我们将以上行为称作“sketching with code”。

通常的编程课程都是先关注于数据结构、算法和理论知识。所有的可视化知识,例如UI与动画,往往都作为结束了所有学习之后的甜点供学生品尝,就像我在利物浦大学读software development本科学位时的体验一样。然而这种体验对于刚刚接触编程语言的人来说并不友好,很多人都会在上了一两节课之后仍然一头雾水。过于抽象的理论知识让人们无法快速理解学习这门编程语言到底能做些什么。

Processing通过创造一系列交互图形来学习编程,虽然学习编程的方式很多,但是直观迅速的可视化反馈给了学习者更多的信心与动力,而且很方便理解。就像之前反复提到过的一样,图形化和社区才是Processing关注的地方。

Sketching and Prototyping 速写与构建原型

Sketching是思考的方式之一,可以在很短的时间内探索更多的idea。在工作中,我们通常在纸上画出草稿,再将结果变成代码。动画和交互的灵感通常被画成storyboard并伴随注释标记。经过一系列的软件绘制,最好的方案将被选中并制作成prototype。通常这个过程是个循环的,制作、测试、改进,在纸上和屏幕上来来回回的切换。

Flexibility 灵活性

像其他编程语言一样,Processing也有很多的软件工具适用于不同领域的工作。它拥有超过100个库扩展,适用于声音、计算机视觉、数字制造、渲染等领域。

Giants 先驱们

人们自从1950年开始就使用计算机绘图了,在可以使用CRT或者LCD显示器输出图像之前,人们使用巨大的绘图机器来绘制图形。Processing的先驱们包括来自设计、计算机图形、艺术、建筑、统计学等领域的人们。

Family Tree 族谱

屏幕快照 2017-03-18 14.56.22

Processing是属于Java的一门方言,一门“面向对象”的编程语言。其语法和Java极其相似,但是Processing添加了一些关于图形和交互的定制功能。这些图形元素基于PostScript(PDF的基础),和OpenGL(3d图形标准)。

其中P5.js 是Processing的JavaScript版本,用于网页端的制作。

Join In

Processing是一门开源语言哦~

总结

第一章简单介绍了Processing的历史背景和应用领域。我的笔记里可能会使用很多该书中的插图,仅供个人用途,版权归作者所有。