Unit 2 Lecture/Reading
Instructor/Author: Richard H.Technical Terminology Used in the Course
What is a computer application?
A computer application is a unit of instructions that command the computer to do actions.What is a programming language?
A programming language is the language humans can use to command the computer to perform actions. Software Development is the field of writing and managing computer programs with programming languages.What is JavaTM?
JavaTM is an object oriented programming language. Object oriented is a term that means we can instruct the computer using items that are very "noun" and "verb" like. Objects can have functions (also known as methods) and attributes (also know as properties).In a simplistic way we can think of objects as the nouns and functions or methods as the verbs. Objects also have attributes.
What is Processing?
Processing is an Application Programming Interface (API) and authoring environment that runs on top of Java. Processing also provides an Integraed Development Environment that is written in Java and can compile your sketch programs. You can download versions of Processing that includes the Java environment you need. Processing in licensed under a Creative Commons license. Processing is closely tied to two individuals, Casey Reas and Ben Fry.What is a JavaTM applet?
A Java applet is a special Java application that can run on a web browser and looks like it is running on the web page.For this course, you will write several Java applets using Processing. Each of your applets will be located in its own web page. By default a web page and applet you create with Processing will make available links to the source code for the application. In this course, you will hypertext link to them from a central web home page.
A Java application that is not an applet runs in a window of its own.
Getting the most out of Processing
The Processing Reference Manual is installed on your computer when you install Processing. It is located at [Processing Instillation Folder]/reference/index.html . The great thing about Processing is that it has a simple but effective getting started guide and usage guide. Most functions of the Processing API (Application Programming Interface) have small demonstration programs to help illustrate their use. The getting started guide is the Environment section of the Processing Reference Manual. The usage guide is the Language section of the Processing Reference Manual. In the Language section, change the "Viewing Options" to "Complete A-Z" to see all the methods, objects and attributes available.Drawing a non-moving (static) image: Basic Mode
Read the Environment section of the Processing Reference Manual. Processing allows the artist to create static (non-moving) images by typing drawing actions directly into the source code editor. This form of drawing is called "Basic Mode". In Basic Mode, there are no user created functions. Because you will need to create functions very soon, this course will quickly bypass Basic Mode.The following source code uses Basic Mode to draw a single rectangle to the screen.
rect(30, 20, 55, 55);
In Processing, the default background color is a light gray. The default line color or stroke color is black. The default fill color (for shapes) is white. The default canvas size is 100 pixels width and 100 pixels height. These are the defaults, you can change these properties by typing in commands to change these properties.
The window screen canvas controlled in your Processing program is a two dimensional (2-D) coordinate system. Each pixel of the canvas has an x and y value. The canvas window can be considered a cartesian coordinate system that you may have used to graph lines in Math classes. However, the canvas window in Processing is a little different than the one you used in Math classes. In Processing, the canvas window's (0,0) x, y origin is located at the upper left corner of the canvas. The positive x direction begins at the origin and travels to the right. The positive y direction begins at the origin and travels down to the bottom of the canvas.
Shapes: Drawing ovals, rectangles, lines, triangles and stars.
Processing calls an oval or a circle an ellipse.
The following source code will draw a single ellipse (oval) to the screen.
ellipse(56, 46, 55, 55);
The following source code will draw two ellipses (ovals) to the screen.
ellipseMode(CENTER); ellipse(35, 35, 50, 50); ellipseMode(CORNER); fill(102); ellipse(35, 35, 50, 50);
Ovals can operate under two modes: CENTER or CORNER mode. In CENTER mode the ellipse's x and y attributes are considered the center of the oval. In CORNER mode the ellipse's x and y attributes are considered the top left of an imaginary box that contains the oval. The fill(...) method changes the current color that will be used to fill a shape. In the example above the color is gray.
Processing has a built in rectangle function.
The following source code will draw a single rectangle to the screen.
rect(30, 20, 55, 55);
The following source code will draw two rectangles to the screen.
rectMode(CENTER); rect(35, 35, 50, 50); rectMode(CORNER); fill(102); rect(35, 35, 50, 50);
Rectangles can operate under two modes: CENTER or CORNER mode. In CENTER mode the rectangle's x and y attributes are considered the center of the rectangle. In CORNER mode the rectangle's x and y attributes are considered the top left of the rectangle.
Processing has a built in triangle function.
The following source code will draw a single triangle to the screen.
triangle(30, 75, 58, 20, 86, 75);
The following source code will draw two triangles to the screen.
triangle(10, 55, 38, 0, 66, 55); fill(102); triangle(40, 85, 68, 30, 96, 85);
The Java "for" Loop
In order to execute a block of code actions several times repetitively, Java provides a "for" loop.
Here is a simple example of a "for" loop. "for" loop example sketch
Here is another simple example of a "for" loop. "for" loop example sketch 2
Triangles do not operate using modes.
You can use the following example as a guide to drawing a 5 point star shape.
void setup()
{
drawStar();
}
/*
Modified from example at url:
http://www.csc.liv.ac.uk/~frans/COMP101/AdditionalStuff/GUI/java2D.html
*/
public void drawStar()
{
int xPoints[] = {55, 67, 109, 73, 83, 55, 27, 37, 1, 43};
int yPoints[] = {0, 36, 36, 54, 96, 72, 96, 54, 36, 36};
beginShape(POLYGON);
for (int index = 0; index < xPoints.length; index++)
{
vertex(xPoints[index], yPoints[index]);
}
endShape();
}
Drawing a random Polygon.
void setup()
{
size(200, 200);
background(getRandomColor());
int nNumberOfShapes = (int) ((float) random(10.0f) + 2.0f);
for (int index = 0; index < nNumberOfShapes; index++)
{
drawRandomPoly();
}
}
color getRandomColor()
{
color colorTemp = color(random(255), random(255), random(255));
return colorTemp;
}
public void drawRandomPoly()
{
color colorTemp = getRandomColor();
fill(colorTemp);
//int nNumberOfPoints = (int) (random(1.0f) * 26.0f);
int nNumberOfPoints = (int) ((float) random(4.0f) + 2.0f);
float fRandomX = 0.0f;
float fRandomY = 0.0f;
beginShape(POLYGON);
for (int index = 0; index < nNumberOfPoints; index++)
{
//fRandomX = random(1.0f) * width;
//fRandomY = random(1.0f) * height;
fRandomX = random(width);
fRandomY = random(height);
vertex(fRandomX, fRandomY);
}
endShape();
}
Sprites
Read this description of a sprite. In this course, a sprite will be a JavaTM Class that represents a single visual art element on the canvas stage. A sprite can have many properties. The most common properties are x and y screen location, color, shape, width and height. Other properties that a sprite can be given are direction, speed, transparency, life span (time to live), "Is active?" and movement limitation boundaries. Sprites can also have behavior like rotation, movement, birth, death and animation.Processing does not have a built in sprite class like Macromedia Flash's MovieClip symbol. You can either write your own sprite class or use someone else's sprite class (if you have their permission).
Here is a sample sprite class with support files you can employ to use sprites and eventually animate them.
| JavaTM Source Code File | Description |
| ISpriteMight.java | Interface to a Generic Sprite Class. The first "I" letter in the name is intended to remind us that this is a JavaTM Interface. |
| MovieClip.java | The sprite. An implementation of the sprite interface above. |
| SpriteManager.java | A Manager class with the ability to execute common tasks applied to multiple sprites. |
| Environment.java | An environment or global variable utility class |
| GUtil.java | A graphics utility class |
Using color and black and white.
TODO>>The importance of being random. (Getting variation quickly)
There are so many choices we get to decide from in life. What time to wake up. what to have for lunch. What tv program to watch. What class to sign up for. When we create a piece of art, we have the same large number of choices. For instance, I want to draw a picture on a piece of paper. I need to decide what size paper to draw on?, what type of paper to draw on?, what is the shape and color of the paper I will draw on? What subject will I draw? Will I first draw an outline and then color in the outline or bypass an outline and draw colored shapes. What utensil will I draw with? A pen, pencil, marker, crayon, charcoal stick or brush? What part of the subject should I draw first? What color will the background be? If we are willing to give up some control and allow the computer to make some of our choices for us, we will receive quicker, unexpected, perhaps nice looking results in return, with less decision making effort. Some artists will be in cold sweats from considering having less control over their art. It does take a philosophy shift for some people. You can think of it as being a manager of an art process instead of being the lone worker in the art process. Andy Warhol comes to mind in this philosophy. Andy Warhol's various studios were called "The Factory". Warhol was the ring leader (or manager) of "The Factory" and it's crew. Andy Warhol managed a rock band. Warhol even let others suggest subjects for his paintings.TODO>>
The loop draw enables animation.
void setup() {
size(200, 200);
noStroke();
}
int a = 0;
void draw() {
fill(a);
a = a + 1;
if (a > width) {
a = 0;
}
rect(a, 0, 2, 200);
}
void setup() {
size(200, 200);
noLoop();
}
float x = 0;
void draw() {
background(204);
x = x + .1;
if (x > width) {
x = 0;
}
line(x, 0, x, height);
}
void mousePressed() {
loop();
}
void mouseReleased() {
noLoop();
}
Philosophy: Do it because it feels good.
If you think about it, there are some things we do just because it feels good. Art is one of those things. (Of course, some things that feel good are moral, immoral, legal or illegal. So to stay out of trouble, stick to the legal and moral things.) There is art that I look at that just makes me feel good, happy or inspired to live a better life. I feel good while I am creating, finishing and then showing a good piece of art. Do you consider yourself an artist? What are the qualifications to call oneself or anyone elese an artists? Do you do art because it feels good? Why do you create art?Artist: Wassily Kandinsky
Read about Kandinsky and look at his art on the web. You may need to employ a search engine to locate images of Kandinsky's art on the internet. Notice that Kandinsky uses line, curves, triangles, rectangles and ovals in his art? Although Kandinsky's art elements may not be randomly placed, one could attempt to create a Kandinsky looking image using random placement, random shapes and random colors.Example Applications
Link to Unit 02 Example ApplicationsAssignment #3: Create a computer based artwork inspired by confetti or in homage to Kandinsky.
Example 1: Randomly place randomly colored shapes against a randomly colored background.
Example 2: The following artworks were written with Processing and look like a Kandinsky artwork. example 2a , example 2b
If you want further inspiration, look at the Processing based artworks completed by a class of students located at this link.
Modified: 03/02/2005 RH
Created: 12/05/2005 RH
Created: 12/05/2005 RH
