Note: The following content is community-contributed and managed.
Mobile Processing Step by Step
by Mark Philipp
The following text has been extracted from the PDF and currently lacks formatting.
Step 1 At first you have to install the latest version of Java on your computer. For Windows you will find it here: http://www.java.com. On Mac OS X a version of Java is already installed. Please check the version. You find the latest version on http://www.apple.com.
Step 2 Download and install the WTK (Wireless Tool Kit) for building mobile phone applications. For Windows you have to use the SUN WTK on: http://java.sun.com/products/j2mewtoolkit/ For MaOS X you have to download the Mpowerplayer SDK on: http://www.mpowerplayer.com/products-sdk.php
Step 3 Download and install the Mobile Processing IDE (Integrated Development Environment or Integrated Design Environment): http://www.mobile.processing.org Start Mobile Processing. Choose Preferences from the main drop-down menu. In the Preferences dialog box, go to the Mobile tab, and enter the location of the Wireless Tool Kit. NOTE: You can check and automatically download the latest version of the core, API (Application Programming Interfrace) and libraries over the Internet. Use the HELP menu and choose �check for updates�.
Step 4 Geometric shapes
At first we`ll create a circle (ellipse) on the display:
ellipse(75, 75, 100, 100);
ellipse draws an ellipse on the display. The parantheses () are grouping and countaining parameters and expressions. In this case the X-coordinate,Ycoordinate, width and height of the ellipse. The ; (semicolon) is a statement terminator which separates elements of the program. A statement is a complete instruction to the computer and the semicolon is used to separate instructions. Please change X-coordinate,Y-coordinate, width and height and see what will be happen.
The next geometric shape we will create is a rectangle:
rect(30, 20, 55, 55);
rect draws a rectangle to the screen. The first two parameters in the paranthesis are setting the location, the third sets the width, and the fourth sets the height.
If we want to create a quad, we need more parameters. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees:
quad(38, 31, 86, 20, 69, 63, 30, 76);
The parameters in the parethesis are:
38: x-coordinate of the first corner 31: y-coordinate of the first corner 86: x-coordinate of the second corner 20: y-coordinate of the second corner 69: x-coordinate of the third corner 63: y-coordinate of the third corner 30: x-coordinate of the fourth corner 76: y-coordinate of the fourth corner
Another important geometric shape is a triangle. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point.
triangle(30, 75, 58, 20, 86, 75);
The parameters of the triangle are (x1, y1, x2, y2, x3, y3):
x1: x-coordinate of the first point y1: y-coordinate of the first point x2: x-coordinate of the second point y2: y-coordinate of the second point x3: x-coordinate of the third point y3: y-coordinate of the third point
We see that it is very easy to create simple geometric shapes like ellipses, rectangles,quads and triangles. But if we want to create more complex shapes, we have to use vertices.All shapes are constructed by connecting a series of vertices. We use vertex() to specify the vertex coordinates for points, lines, triangles, quads, and polygons and it is used exclusively within the beginShape() and endShape() function like this:
beginShape(POLYGON); vertex(20, 20); vertex(40, 20); vertex(40, 40); vertex(60, 40); vertex(60, 60); vertex(20, 60); endShape();
beginShape() begins to set vertices for a shape and endShape() stops it.
The value of the MODE parameter (in this example �POLYGON�) defines the type of shape. The parameters available for beginShape() are LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and POLYGON. If there is no MODE specified, POLYGON is used. After calling the beginShape() function, a series of vertex() commands must follow. The parameters for the vertex are the X- and the Ycoordinate.
Here some different examples for the Mode parameters of beginShape():
beginShape(LINES); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
or
beginShape(LINE_STRIP); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
or
beginShape(LINE_LOOP); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
or
beginShape(TRIANGLES); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); endShape();
or
beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape();
or
beginShape(QUADS); vertex(30, 20); vertex(30, 75); vertex(50, 75); vertex(50, 20); vertex(65, 20); vertex(65, 75); vertex(85, 75); vertex(85, 20); endShape();
Step 5 Curve
For some projects it is necessary to design a curve. Mobile Processing offers different choices:
curve() ,bezier() ,curveVertex() and bezierVertex()
curve(x1, y1, x2, y2, x3, y3, x4, y4) draws a curved line on the screen. The first and second parameters specify the first anchor point and the last two parameters specify the second anchor. The middle parameters specify the points for defining the shape of the curve:
curve(5, 26, 73, 24, 73, 61, 15, 65);
Longer curves can be created by setting a series of curve() functions together:
curve(5, 26, 73, 24, 73, 61, 15, 65); curve(73, 24, 73, 61, 15, 65, 15, 65); curve(5, 26, 5, 26, 73, 24, 73, 61);
bezier(x1, y1, x2, y2, x3, y3, x4, y4)draws a Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point. The middle parameters specify the control points which define the shape of the curve:
bezier(85, 20, 10, 10, 90, 90, 15, 80);
With curveVertex(x, y) we can define vertex coordinates for curves. This function may only be called between beginShape() and endShape() and can only be used with the drawing types POLYGON, LINE_LOOP, and LINE_STRIP:
beginShape(LINE_STRIP); curveVertex(84, 91); curveVertex(84, 91); curveVertex(68, 19); curveVertex(21, 17); curveVertex(32, 100); curveVertex(32, 100); endShape();
bezierVertex(x1, y1, x2, y2, x3, y3) defines vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() can only be used with the drawing types POLYGON, LINE_LOOP, and LINE_STRIP:
beginShape(LINE_STRIP); vertex(30, 20); bezierVertex(80, 0, 80, 75, 30, 75); endShape();
Step 6 Color
Drawing is boring without color. At first we dye the background with
background(55);
The values o - 255 define a value between black and white.
The background() function sets the color used for the background of the Processing window. The default background is light gray.
We can also use the following parameters:
background(color) for any value of the color datatype . For example:
background(350);
Or background(value1,value2,value3). Value1 for the red or hue value (depending on the current color mode),value2 for the green or saturation value (depending on the current color mode) and value3 for the blue or brightness value (depending on the current color mode). For example:
background(255, 204, 0);
With fill() we set the color used to fill shapes. For example, if you call fill(204, 102, 0) and draw a rectangle it and all subsequent shapes will be filled with orange:
fill(204, 102, 0); rect(30, 20, 55, 55);
The parameters you can use are the same as by background(): fill(gray), Fill(color) or fill(value1,value2,value3).
Note: the value for the parameter "gray" must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255.
The colorMode() changes the way Processing interprets color data. By default, fill() and background() colors are set by values between 0 and 255 using the RGB color model. It is possible to change the numerical range used for specifying colors and to switch color systems. For example, calling colorMode(RGB, 100) will specify that values are specified between 0 and 100. The limits for defining colors are altered by setting the parameters range1, range2, and range 3.
With stroke() we can draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode().
For example:
stroke(204, 102, 0); rect(30, 20, 55, 55);
The parameters we can use are once more:
stroke (gray) stroke(color) and (value1,value2,value3)
For some projects it is helpful to use filling geometry. For this we can use noStroke() and noFill(). For example:
noStroke(); rect(30, 20, 55, 55);
or
rect(15, 10, 55, 55); noFill(); rect(30, 20, 55, 55);
Note: If both noStroke() and noFill() are called, nothing will be drawn to the screen.
Step 7 Working with Text
Before we can screen text or words on the display we have to import a font in the data directory of the sketch. Use �Tools� in the Mobile Processing IDE and go to �Create Font�. Select a font, size,etc and click on the �OK� - Button. The font is now in the directory of the sketch as a .mvlw-file. The next step is to use PFont.PFont is the font class for Processing. A class is a grouping of related methods (functions) and fields (variables and constants). For example:
PFont font; font = loadFont("Arial-Black-48.mvlw"); textFont(font); text("Hello!", 1, 50);
loadFont() loads a font into a variable of type PFont. In this example �Arial Black� with size 48. textFont() sets the current font we loaded with loadFont(). This font will be used in all subsequent calls to the text() function, which draws text to the screen. In this case �Hello!� . The parameters are the X-, and Y-coordinate of the text. If the font was loaded from the mobile phone (not a bitmap font created with Mobile Processing), you can change the color of the text with the fill() function. To change the color of a bitmap font, you must reload it with the color specified in loadFont().
You have also the possibility to align the text with textAlign(). It sets the current alignment for drawing text. The parameters LEFT, CENTER, and RIGHT set the display characteristics of the letters in relation to the values for the x and y parameters of the text() function:
PFont font; font = loadFont("Arial-Black-48.mvlw"); textFont(font); textAlign(RIGHT); text("right", 115, 50); textAlign(CENTER); text("center", 90, 90); textAlign(LEFT); text("left", 90, 130);
For a wrap you can use the function textWrap().This function takes text in a String object and returns an array of String objects containing the text split into lines that will fit in the specified width when rendered with the current font. A string is a sequence of characters, an array is a list of data. Objects are instances of classes:
textWrap(stringdata, width)
If a height is also specified, the array will only contain lines that will fit in the box: textWrap(stringdata, width, height) Note: Any text that would not fit will be ignored !
Step 8 Images
If we want to work with images, it is necessary to have an datatype for storing. This is PImage. Mobile Processing allows to display .png (portable network graphic) images. The images we want to use must be located in the data directory of the current sketch. We can use �sketch� in the Mobile Processing IDE. With �Add File� you can add the images to the data directory.
The PImage object contains properties for the width and height of the image.
loadImage() loads the image into a variable of type PImage. In our example, we load the image in setup() to preload it when the program starts. ses, load all images in setup() to preload them when the program starts. Loading images in draw() can dramatically reduce the speed of a program.
The setup() function is called once when the program is started. It is used to define initial enviroment properties such as screen size, background color, loading images, etc. before the draw() function begins executing. Variables declared within setup() are not accessible within other functions, including draw(). There can only be one setup() function for each program and it should not be called again after it's initial execution.
The draw() funktion is called directly after setup() and continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called:
PImage b; void setup() { b = loadImage("myimage.png"); } void draw() { image(b, 0, 0); noLoop(); }
image() diplays the image to the screen. The parameter of image() are:
The image to display (in our example b),the destination of the X-coordinate, the destination of the Y-coordinate. noLoop() stops Processing from continuously executing the code within draw().
We are now able display all kinds of shapes, text and images. But for a modern application we need a little bit more action. The best way for action on a mobile phone is to use the keys. In the next Steps we will have some fun with it.
Step 9 Keyboard
The keyPressed() function is called once every time a key is pressed. As a general rule, nothing should be draw within the keyPressed() block:
int value = 0; void draw() { fill(value); ellipse(50, 50, 50, 50); } void keyPressed() { if(value == 0) { value = 255; } else { value = 0; } }
int is the datatype for integers and numbers without a decimal point. Integers can be as large as 2,147,483,647 and as low as -2,147,483,648. They are stored as 32 bits of information. The first time a variable is written, it must be declared with a statement expressing its datatype. Subsequent uses of this variable must not reference the datatype because Processing will think the variable is being declared again.
The Keyword void is used to indicate that a function returns no value. Each function must either return a value of a specific datatype or use the keyword void to specify it returns nothing.
The equality operator �==� determines if two values are equivalent. The equality operator is different from the assignment operator �=�. The assigment operator assigns a value to a variable. The �=" sign does not mean "equals", but is used to place data within a variable.
The keyReleased() function is called once every time a key is released. As a general rule, nothing should be draw within the keyReleased() block:
int value = 0; void draw() { fill(value); ellipse(50, 50, 50, 50); } void keyReleased() { if(value == 0) { value = 255; } else { value = 0; }
For games or other applications it is sometimes necessary to specify a special key. This makes the system variable key possible. It always contains the value of the most recently pressed key on the keyboard:
void draw() { if(keyPressed) { if (key == '5') { fill(0); } } else { fill(255); } ellipse(50, 50, 50, 50); }
Note: The system variable KEY is not for detecting the arrow keys !
Step 10 Animation
There are many ways for building animimations on the display. At first we use the second() function:
void draw() { background(255,204,0); int s = second(); ellipse(60+s, 10+s, 25, 25); ellipse(80-s, 100-s,25,25); fill(0+s*4); triangle(57,30+s,20,40+s,27,30); rect(90+s,120-s,25,25+s); }
Processing communicates with the clock on your computer. The second() function returns the current second as a value from 0 - 59. We use this to change the parameter of the geometric shapes and the fill() function.
For the next example we additional use millis() and the %(modulo) operator:
void draw() { int s = second(); int m = millis(); fill(m % 255); ellipse(25+s, 25+s, 5+s, 5+s); }
millis() returns the number of milliseconds (thousandths of a second) since starting an applet. This information is often used for timing animation sequences. The %(modulo) operator calculates the remainer when one number is divided by another. It is extremely useful for keeping numbers within a boundary such as keeping a shape on the screen.
You can also work with the redraw() function. This functions allows the program to update the display window only when necessary, for example when an event registered by keyPressed() occurs:
int x = 0; void setup() { size(200, 200); noLoop(); } void draw() { background(255,204,0); ellipse(x, 10, x, 20); } void keyPressed() { x += 5; redraw(); }
redraw() executes the code within draw() one time. In structuring a program, it only makes sense to call redraw() within events such as keyPressed().
Calling it within draw() has no effect because draw() is continuously called anyway.