OUCC Tutorials: blockly image [1 of 5]
How to program with OUCC's Blockly Image Task tool
Photographs can be stored in a number of forms. The most common is probably JPG. In JPG images the photo is stored as a long list of pixels.
A pixel is a dot of colour that appears on your computer screen. Each pixel's colour is made by mixing the three primary colours of light: Red Green and Blue. One byte of data is used for each component. This means that there are 256 shades of each of the three colour components available. If the value of the red component is 0, there will be no red colour used to make the pixel. If all three components are 0 then the pixel will be a black dot as no colour is used to make it. This is represented by: 0,0,0.
Here are some other colours:
Red: 255,0,0
Green: 0,255,0
Blue: 0,0,255
White: 255,255,255
Grey: 125,125,125
This is how the colours add:
Other data is also stored. The width of the photo, for example, is stored as a number of pixels and so tells the program that displays the image when to start a new line of pixels.
In programming languages that can manipulate the colour values of the pixels, it is possible to reference individual pixels by their x,y coordinates. (Remember that the coordinates are from (0,0) in the top left corner.) It is usually easier though to loop through all the pixels with the for P in pixels block:
Inside this loop, you can then add blocks that alter each colour value of P in the image. Try this simple program that sets the R value of every pixel to 255 in the workspace below:
There are getter and setter blocks provided in Blockly for a variety of pixel and image properties so try them and out and see if you can produce some of the filters provided in applications such as Photoshop.
Example 1 - Make an image black and white
Example 2 - Make another black and white image
Example 3 - Make the flowers yellow
Taking things further