谦谦君子,不饮盗泉之水;儒生脱尘,不为好逸恶劳。
——陆逊《三国杀》
##3.1 屏幕分辨率
主题撇开,我们先说豆子的事情。
As we all known ,不同种类的豆子一般有不一样大小的颗粒。接着理一个常识,按颗粒大小排序:胡豆>豌豆>绿豆。现在,我们把三类豆子分别涂上各种颜色,平铺一层到相同大小的盒子里拼成一副肖像画。那么,谁的画面会显得更逼真和细腻呢?结果不言而喻了。
屏幕分辨率也是这个理。屏幕分辨率就是屏幕上显示的像素个数,分辨率640×480的意思是水平方向含有像素数为640个,垂直方向像素数480个。屏幕尺寸一样的情况下,分辨率越高,显示效果就越精美和细腻。
在电脑桌面上右键单击后,点击分辨率选项:
##3.2 Pixels
简单理解,像素是单个染色点,分辨率的尺寸单位。
###笛卡尔坐标系
计算机屏幕左上角坐标为(0,0),横向为x轴,纵向为y轴:
这个坐标系也不是一成不变的。在processing中,translate(x,y) 函数可以平移整个坐标系。x、y 可取正数或者负数。数值的正负决定移动的方向,数值的大小决定移动的距离。例如:向右平移50,向下平移50,可表示为:translate(50,50);
###Processing中与像素相关的函数
/*
*API提供的像素相关的函数,如下:
*/
blend() //混合像素
copy() //复制像素
filter() //选择滤镜筛选
get() //读取像素颜色
loadPixels() //加载像素
pixels[] //像素数组
set() //设置像素点颜色
updatePixels() //更新像素点
下面,我主要介绍pixels[],即包含显示窗口中所有像素值的数组(按字面意思理解)。它有两个配套的函数:loadPixels()与updatePixels()。使用示例:
color pink = color(255, 102, 204);
loadPixels();
for (int i = 0; i < (width*height/2)-width/2; i++) {
pixels[i] = pink;
}
updatePixels();
####相关规则
访问此数组之前,必须加载loadPixels()函数。否则,可能会导致NullPointerException异常。 在再次调用loadPixels()之前,对显示窗口的后续更改将不会反映到像素中。 修改像素后,必须运行updatePixels()函数才能更新显示窗口的内容。
####使用技巧
倘若要在pixels[]中访问某一特定的像素点,那么你必须知晓它int类型的x,y坐标。通过pixels[x+y*width]即可搜索到你想要的像素点。
##3.3 画布设置
一纸诗书天地惭,满腹经纶日月羞。
铺开your sketch,show your 磅礴不羁的想象力吧。
欲言画布,我们绕不开size()函数。
函数size()以像素为单位定义显示窗口宽度和高度的尺寸。如果没有使用size(),窗口将被赋予100 x 100像素的默认大小。
注意: size()函数只能在sketch中使用一次,不能用于调整大小。在具有setup()函数的程序中,size()函数必须是setup()中的第一行代码。
Syntax:
size(width, height) //宽、高
size(width, height, renderer) //宽、高、渲染器
从来没接触过编程的新手要注意, Processing是由上往下的方式依次执行代码的。所以很多属性,如果在之前定义了的,你就没必要在之后再重写了,且后面定义的内容会对之前的进行覆盖。
在Processing3中,要全屏运行sketch,请使用fullScreen()函数函数,而不是使用size(displayWidth,displayHeight)的老办法。
最后附上绘制一个漂亮花朵的代码:
/**
* 蓝色花朵
* 出品:维度模态工作室
* 欢迎关注我们的微信公众号
*/
float amount = 20; //画花的步长1-360,数值越小花瓣越多。
float num; //画花的速度,数值越大速度越快。
void setup() {
size(800, 800); //窗口大小800*800个像素
stroke(0, 150, 255); //设置画线的颜色
}
void draw() {
fill(0, 0, 0, 40); //设置填充色
rect(0, 0, width, height); //窗口填黑色,透明度40,为了产生运动残影。
translate(mouseX, mouseY);
for (int i = 0; i < 360; i+=amount) { //画出花瓣
float x = sin(radians(i+num)) * 150;
float y = cos(radians(i+num)) * 150;
float x1 = sin(radians(i+amount-num)) * 150;
float y1 = cos(radians(i+amount-num)) * 150;
noFill(); //不填充
bezier(x, y, x-x1, y-y1, x1-x, y1-y, x1, y1);
bezier(x, y, x+x1, y+y1, x1+x, y1+y, x1, y1);
fill(0, 150, 255); //填充色蓝色
ellipse(x, y, 5, 5); //在花瓣上画一个小圓
ellipse(x1, y1, 5, 5); //在花瓣上画一个小圓
}
num += 0.5;
}