Week 11 Day 2 - Research, Processing and Images
Processing and Arduino
Remember that the code to input data from Arduino to Processing is:
import processing.serial.*;
Serial myPort; // Create object from Serial class
String val; // Data received from the serial port
float Pos = 0; //used to store the value of the sensor data
void setup() {
String portName = Serial.list()[2]; //change the 0 to a 1 or 2 etc. to match your port
myPort = new Serial(this, portName, 9600);
size(800, 600); //create a window to draw in
background(150);
}
void serialEvent (Serial myPort) {
int sensorData = myPort.read(); // get the sensor data
//println(sensorData); // used to see what the sensor data is - just testing
Pos = sensorData; //use the sensor data to do something (later)
}
void draw() {
//this is the infinite loop where you do something with the sensor data
}
Processing and Images
1. To load an image, first make sure the image is the right size to fit the processing window. Use Photoshop, Image menu - Image Size... to resize it.
2. In the global variable area of the code (very top), add a variable of type PImage
PImage img; // Declare a variable of type PImage
3. In the setup( ) function, load up the image into the variable you created (img):
img = loadImage("Armadillo2.jpg");
//this only puts the image in the variable and does not show it
4. In the draw( ) function add the code to actually put the image on the screen:
image(img,0,0); //the first variable holds the image info and the second two are x, y of the position of the image
5. Optionally, you can use two more parameters to resize the image (height, width)
image(img,0,0, 200, 300);
Loading Multiple Images in Processing
If you want to load two images - one on top of the other so we can experiment with transparency, you can load one into the background.
Exercise:
1. Create a new Processing sketch and save it.
2. Find two image on the Internet and download and store in the new Processing folder
3. Open in Photoshop and make sure the tree is .png with a transparent background and the landscape is .jpg
4. Resize them to be a good size.
Add to top of code:
PImage treeImage;
PImage landscapeImage;
Add to setup( ):
treeImage = loadImage("tree.png");
landscapeImage = loadImage("landscape.jpg");
Add to draw( ):
background(landscapeImage);
image(treeImage,0,0);
Test it. Adjust the x and y and add height and width to get the tree to look right in the landscape.
Changing the Brightness and Transparency
Try the following image processing code on your tree - in the draw( ) function:
Tint - Brightness of the image
255 means it will look the same and 0 is black, try other numbers:
background(landscapeImage);
tint(100); image(treeImage,0,0);
***If I redraw the background each time in the loop, the tree will appear transparent. If I do not, the tree will redraw over and over and not appear to be transparent.
Tint with Alpha - Brightness and transparency of the image
127 means it will be 50% transparent:
tint(100, 127);
Tint with three values - Brightness of the red, green, and blue values
tint(0, 127, 255);
Tint with four values - Brightness of the red, green, blue and alpha values
tint(0, 200, 127, 127);
Moving, Rotating and Scaling images
We are not really moving the image, we are moving the canvas (coordinate system) that the image is drawn on.
The coordinates of the image remain the same, and the whole image shifts.
Sample code:
In the draw( ) function:
background(landscapeImage);
tint(0, 0, 255, 127);
image(treeImage,200,400);
pushMatrix();
translate(100, 0);
tint(255);
image(treeImage,200,400);
popMatrix();
pushMatrix - saves the current position of the coordinate system
popMatrix - restores it to the previous position
translate - takes two arguments - x, y - and moves the whole coordinate system
This is nice because I can use a loop to make multiple trees:
void draw() {
background(landscapeImage);
for (int i=0; i < 924; i = i+100) {
pushMatrix();
println(i); // comment this out afterwards
translate(i, 0);
tint(255);
image(treeImage,0,600, 100, 100);
popMatrix();
}
}
Rotation and Scale
Let's try that same thing but rotate and translate the tree.
We can use radians or convert degrees to radians using the radians(degrees) function.
void draw() {
background(landscapeImage);
pushMatrix();
translate(70, 70);
rotate(radians(30));
scale(2.0);
image(treeImage,100,100, 150, 100);
popMatrix();
}
The order you scale and rotate and translate matter and will affect the results.
Let's try to add a variable in a loop to change the rotation:
void draw() {
background(landscapeImage);
int rot=0;
for (int i=0; i < 924; i = i+100) {
pushMatrix();
translate(i, 70);
rotate(radians(30+rot));
scale(2.0);
image(treeImage,100,100, 150, 100);
popMatrix();
rot=rot+15;
}
}
Exercise:
1. Get Arduino data to alter the parameters of the image
2. Get Arduino data to alter the translation, rotation or scale
Additional Resources
Processing Transformations Links to an external site.
Working with Pixels Links to an external site.
Assignment:
Due Tuesday: Arduino Sketch affecting Images