Processing 像素与画布【秒懂小白篇】

2023-10-18 20:23| 来源: 网络整理| 查看: 265

谦谦君子，不饮盗泉之水；儒生脱尘，不为好逸恶劳。 ——陆逊《三国杀》

##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; }

【本文地址】

公司简介

联系我们