Processing 像素與畫布【秒懂小白篇】


謙謙君子,不飲盜泉之水;儒生脫塵,不為好逸惡勞。
——陸遜《三國殺》

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM