[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