[Image5]:Image Processing

Key Point

• In Processing,each image is stored as a one-dimensional array of colors.
• When an image is displayed to the screen,each element in the array is drawn as a pixel.
• The number of the element in the array is determined by multiplying the width of an image by its height.
• image & stored array

Pixels

key

• The loadPixels() function must be called before pixel[] array is used.
• After the pixels have been read or changed,they must be updated by updatePixels()

將0~59秒map成0~255

• map(second(),0,59,0,255)

每跑一個frame就+1

• frameCount

將一維陣列的索引值轉成(x,y)座標系統

• pixels[y*width+x]=color(0)  等效於 set(x,y,color(0))
• pixels[5075]-->y:5075/width、x:5075%width

操控圖片的pixel

• PImage.loadPixels()
• PImage.pixels[y*width+x]
• PImage.updatePixels()

Convolution

key

• another way to modify an image is to change the value of each pixel in relation to the neighboring pixels.

• A matrix of numbers called a convolution kernel is applied to every pixel in the image—neighboring pixels are multiplied by the corresponding kernel value and added together to set the value of the center pixel.
• Page389:3x3kernal->閃過四周一個pixel

Exercises

• Write your own image filter by modifying the values of pixels[].
• Explore different kernels to convolve an image and write a program to display 

  your most interesting discovery.
• Load an image and use its data to generate an animation that refl ects the 

  original image.

Reference

• Casey Reas & Ben Fry : Page382

[Image4]:Filter、Blend、Copy、Mask

Filtering 

• Filter(BLUR,parameter):高斯模糊

• Filter(POSTERIZE,parameter):色相分離

• Filter(THRESHOLD,parameter):pixel value 超過門檻就變黑低於就白

• Filter(INVERT):將每個pixel的值設成原本的inverse value

• Filter(GRAY):變灰

• Filter(ERODE,parameter):將亮的地方縮小

• Filter(DILATE,parameter):將亮的地方膨脹

規則:先畫再Filter

• line(0,30,100,60);-->BLUR
• filter(BLUR,0.3);
• line(0,50,100,80);

PImage類別有內建filter function

• PImage.filter(INVERT)

Blending

從目前畫面擷取要的地方再與原圖混合

• blend(x,y,width,height,dx,dy,dwidth,dheight,ADD)

在目前畫面中加入img，但留下兩張畫面中最暗的pixel

• blend(PImage,x,y,width,height,dx,dy,dwidth,dheight,DARKEST)

將img2加到img中

• img.blend(img2,x,y,width,height,dx,dy,dwidth,dheight,ADD)

顏色混合

• c1 = color(102)
• c2 = color(51)
• c3 = blendColor(c1,c2,MULTIPLY)
• red(c3)->102*51/255=20

複製目前畫面指定區域並貼上

• copy(x,y,width,height,    cx,cy,cwidth,cheight);

將PImage 貼到目前畫面

• copy(PImage,x,y,width,height,     cx,cy,cwidth,cheight)

PImage內建copy function

• PImage.copy(x,y,width,height,  cx,cy,cwidth,cheight)
• PImage.copy(PImage2,x,y,width,height,  cx,cy,cwidth,cheight)

Masking:原圖上加上一遮罩，此遮罩黑色部分擋住原圖(黑色，因為光線被擋住)，遮罩白色部分讓原圖顯現(中空)

在img上加上imgMask遮罩

• img.mask(imgMask);

Exercises

• Load an image and alter it with filter().
• Load three image and combine them with blend().
• Load two image and use copy() with mouseX and mouseY to combine them in a way that reveals the relationship between the images. 

Reference

• Casey Reas & Ben Fry : Page374

[Color2]:Components

color(red,green,blue,transparency):取得r、g、b 、transparency值

• red(color)
• green(color)
• blue(color)
• transparency(color)

切換成HSBMode

• colorMode(HSB,300,100,100)、color(hue,saturations,brightness):切換成HSBMode
• hue(color)、saturation(color)、brightness(color):取得H、S、B值
• background(PImage):圖片設為背景
• PImage.width、PImage.height:取得照片的寬高
• imageColors[y*img.height+x] = img.get(x,y):填完一row向下移

Exercises

• Write a program to print the red,green and blue values of each pixel in an image to the console.
• Design a composition that changes based on mouseX value. Make the color for each element of the composition also change in relation to this variable.
• Load an image and use its colors to set the palette for a composition.

Reference

• Casey Reas & Ben Fry : Page348

[Typography2]:Motion

Word Setting

• Pfont font:宣告字型資料型態
• font = loadFont(“Eureka-48.vlw”):讀取字型檔
• textFont(font,int):設定文字字型，大小
• text(String,x,y):以(x,y)座標為起點，打上String字
• fill(0,opacity):調整透明度
• textSize(number):設定字型大小
• textWidth(String) 、 textWidth(Char) : 取得文字框框寬度

Rotate word

• pushMatrix()~popMatrix():保存座標系
• translate(x,y):將中心點轉到(x,y)，到時將以(x,y)為中心旋轉
• rotate(angle):整個畫面旋轉angle度
• textAlign(CENTER):將文字框框的起點設在中心位置

String and Char

• String.charAt(i):取得字串的第i個位置的字元
• char[] letters ， letters = String.toCharArray() : 將String拆成一個個的字元存進字元陣列裡
• float[] y ， y = new float[size] :動態設定浮點數陣列與其長度

Exercises

• Select a noun and an adjective. Animate the noun to reveal the adjective.
• Use a transformation functions to animate a short phrase.
• Select a verb and animate each letter of the word to convey its meaning.

Reference

• Casey Reas & Ben Fry : Page354

[Image3]:Pixels

Read Pixels

• PImage tree = loadImage(“tree.jpg”):讀取一張JPG圖片存於PImage
• get():取得整個畫面的pixel，存於PImage
• get(x,y):取得(x,y)座標的pixel，存於color
• get(x,y,width,height):取得以(x,y)為起點，(width,height)大小的區域pixel，存於PImage

Write Pixels

• image(PImage,x,y,width,height):繪製PImage以(x,y)為起點，(width,height)為大小
• set(x,y,color):設定(x,y)座標處的pixel value
• set(x,y,image):設定以(x,y)座標為起點，貼上image
• PImage.set(x,y,color):設定圖片x,y處的pixel value
• constrain(mouseX,0,50):將變數滑鼠座標X值限制在0到50之間

Exercises

• Load a image use get() to create a collage by overlaying difference sections of the same image.
• Load a image and use mouseX and mouseY to read value of the pixel beneath the cursor.Use this value to change some aspect of the image.
• Draw a shape in the display window. Copy a section of the window to another by using get() and set() within for structure.

Reference

• Casey Reas & Ben Fry : Page348