Art 315 dr j r parker art digital media lab lec 10 fall 2010
This presentation is the property of its rightful owner.
Sponsored Links
1 / 40

Programming for Artists PowerPoint PPT Presentation


  • 37 Views
  • Uploaded on
  • Presentation posted in: General

ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 10 Fall 2010. Programming for Artists. Intro to Processing. In the previous lecture we discussed scripting , in which the program is specified by typing text. The text represents something to be carried out, a process.

Download Presentation

Programming for Artists

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Art 315 dr j r parker art digital media lab lec 10 fall 2010

ART 315

Dr. J. R. Parker

Art/Digital Media Lab

Lec 10 Fall 2010

Programming for Artists


Intro to processing

Intro to Processing

  • In the previous lecture we discussed scripting, in which the program is specified by typing text.

  • The text represents something to be carried out, a process.

  • The text has a specific structure that allows it to be unambiguous about the process being described.

  • Processing uses scripts only.

  • This is programming in the sense that even engineers are used to.


Processing

Processing

  • A script is a test version of a program in Game Maker, and is attached to an object, like a sprite.

  • A script has to communicate the same things as does the point-and-click mouse program, so there must be symbols (text) that do this.

  • A script (program) is written in a scripting language (programming language), which has a fixed set of these symbols and has a syntax (structure). Scripts are the more familiar type of computer program.


Running processing

Running Processing

  • Click on Processing.exe (in windows)

  • Now type the program into the white part

  • Or copy and paste it from a text file.

  • Or use File->Open


Running processing1

Running Processing

  • Here’s a simple Processing program.

  • It calls a function that draws an ellipese.

  • Run it by pressing the start button.


First program

First Program

  • Draws a circle (a degenerate ellipse) at (50,50) in a default window.


Errors

Errors

  • Errors in the program results in

  • an error message for you

  • (missing ‘;’)

  • And one for a Java programmer. This system is written in Java, and gives Java errors.


Errors1

Errors

  • We can get errors in GameMaker too.

  • This type, a compilation error, is the result of a typing mistake or misunderstanding of the sequence of things needed in the program.

  • Syntax; program can’t execute until the grammar and punctuation is right.


Errors2

Errors

  • Unexpected token: null

What the hell does that mean?

Are we not simply missing a ‘;’?

The Processing system does not know what we are missing or

exactly what is wrong. If it did, it could fix it.

All it knows is that it got to the end of your text and seemed to

Not be done yet. Reached the end of the file and did not have a

Complete program. Expected more, got ‘null’.


Errors3

Errors

  • Computer reported errors are frequently like this. There are two reasons:

  • 1. As we stated, the program can’t always figure out what is wrong, only what it expected next or what it did not get.

  • 2. The programmers writing these systems do not have a good idea of the context of the system of the user. Error messages must be written using the user’s vocabulary and expressing concepts in a form that follows the user’s view of the system.


Errors4

Errors

Nothing we can do, so we need to live with it.


Processing1

Processing

  • All programs in processing are scripts.

  • All output is as graphics.

  • This is unlike other languages, where output is text by default and graphics is hard.


Basic code

Basic Code

  • We have seen a simple program. All it did was to use a function to draw an ellipse.

  • The first thing we need to do is to become familiar with the stable of built-in operations offered by Processing. Then we don’t have to look them up all of the time.

  • ellipse is one such built-in


Coordinates

Coordinates

(0,0)

  • The coordinates used in Processing are those of GameMaker.

  • 0,0 is upper left. These are screen coordinates.

Y increasing

X increasing


Essential functions

Essential Functions

line (15, 25, 100, 100)

Draws a line between the two points specified as (x,y) values.

point (120, 180)

Draws a single point.

rect (ulx, uly, lrx, lry)

Draws a rectangle

ellipse (x, y, xx, yy)

Draws an ellipse

Look up:

triangle, quad, curve, arc


Essential functions1

Essential Functions

size (640, 480)

Make the window 640 pixels wide by 480 high.

background (255, 0, 0)

Sets background color (to red in this case).

stroke (0, 0, 200)

Sets line (stroke) color. (To blue, in this case) nostroke() means none.

fill (0, 255, 0)

Sets fill color (green here) nofill() means do not fill.

You all OK with RGB color??


Drawing modes rect ellipse

Drawing Modes – Rect, Ellipse

  • Specifying a rectangle can be done 3 ways:

  • Default: CORNER upper left coordinates and the height and width are specified

  • CENTER: the coordinates of the center, plus width and height are specified.

  • CORNERS : upper left/lower right are specified


Drawing modes rect ellipse1

Drawing Modes – Rect, Ellipse

(2,2)

  • CORNER

  • rect(2,2,5,3)

  • CENTER

  • rect(2,2,5,3)

  • CORNERS

  • rect(2,2,5,3)

Width, height


Drawing modes rect ellipse2

Drawing Modes – Rect, Ellipse

(2,2)

  • CORNER

  • rect(2,2,5,3)

  • CENTER

  • rect(2,2,5,3)

  • CORNERS

  • rect(2,2,5,3)

Width, height


Drawing modes rect ellipse3

Drawing Modes – Rect, Ellipse

(2,2)

  • CORNER

  • rect(2,2,5,3)

  • CENTER

  • rect(2,2,5,3)

  • CORNERS

  • rect(2,2,5,3)

(5,3)

lrx, lry


Drawing

Drawing

  • Cartoons are often made

  • from simple shapes.

  • Perhaps we can make an

  • approximation to Bender

  • using what we know about

  • Processing


Bender

Bender

  • Our version in Processing is

  • not identical to the template, or course.

  • This is done by simply drawing primitive objects in the right places.

  • Pretty dull.


Bender1

Bender

stroke (0);

line (141, 213, 238, 212);

line (125, 194, 143, 213);

line (252, 190, 238, 212);

// Erase

noStroke ();

triangle (126, 193, 142, 212, 145, 201);

triangle (251, 190, 236, 211, 235, 200);

stroke(255);

fill (0); stroke (0);

ellipse (128, 161, 154, 197);

ellipse (226, 160, 250, 196);

rect (141, 161, 240, 197);

line (141, 161, 239, 160);

line (144, 197, 240, 197);

noStroke ();

// Eyes

fill (255);

ellipse (139, 167, 181, 199);

  • // Jim Parker

  • // Art 315

  • // Fall 2010

  • // Bender!

  • size (300, 300);

  • background (128);

  • stroke (0);

  • fill(190);

  • // Antenna

  • triangle (187, 100, 191, 40, 195, 100);

  • ellipse (191, 39, 8, 8);

  • ellipseMode (CORNERS);

  • ellipse (176, 100, 205, 128);

  • // Head

  • ellipse (138, 108, 238, 170);

  • rectMode (CORNERS);

  • rect (139, 131, 236, 280);

  • // Visor

  • ellipse (122, 157, 155, 205);

  • ellipse (210, 155, 255, 205);

  • line (135, 157, 230, 156);

  • noStroke ();

  • rect (135, 158, 158, 205);

  • rect (210, 157, 240, 206);


Bender continued

Bender (continued)

ellipse (200, 166, 240, 199);

fill (0);

rect (144, 180, 150, 186);

rect (205, 180, 211, 186);

// Mouth

stroke (0);

fill (255);

ellipse (146, 230, 181, 265);

ellipse (146, 246, 165, 265);

ellipse (200, 230, 227, 264);

rect (159, 230, 216, 265);

noStroke (); // Erase

ellipse (146, 240, 159, 263);

stroke (0);

  • // Vertical teeth

  • line (173, 230, 173, 266);

  • line (187, 230, 187, 266);

  • line (202, 230, 202, 266);

  • line (148, 245, 159, 242);

  • line (159, 242, 173, 241);

  • line (173, 241, 187, 241);

  • line (187, 241, 202, 242);

  • line (202, 242, 216, 242);

  • line (216, 242, 226, 244);

  • line (148, 256, 159, 254);

  • line (159, 254, 173, 253);

  • line (173, 253, 187, 253);

  • line (187, 253, 202, 253);

  • line (202, 253, 216, 254);

  • line (216, 254, 222, 256);


Bender2

Bender

  • This is not how Processing code is generally written, but it does give us a chance to become familiar with the basic drawing stuff.

  • Processing has variables, functions, events, IF statements, and flow of control, just as GameMaker does and as does C and Java.


Processing modes

Processing Modes

  • Processing operates in static mode or dynamic mode.

  • In static mode, processing draws a picture on the screen. (EG bender)

  • In dynamic mode it draws pictures repeatedly, in succession. IE animation, as in GameMaker.


Dynamic mode

Dynamic Mode

  • Involves two parts.

  • An initialization step that is always executed once, at the beginning of the program.

  • A drawing step, that happens every fraction of a second.

  • We need to write code for both parts.


Programming for artists

Dynamic mode

Initialization step is named setup:

void setup ()

{

// initialization here

}

Void?

Parentheses?

These enclose the

script that does

the initialization.

Like the triangles

In GameMaker.


Programming for artists

Dynamic mode

Initialization step is named setup:

void setup ()

{

size (300, 400);

}

Example: set the window size

once, at the beginning of the

program.


Dynamic mode1

Dynamic Mode

  • Drawing at each step.

  • void draw ()

  • {

  • // Stuff that draws things each iteration.

  • // Runs forever.

  • }


Dynamic mode2

Dynamic Mode

  • Drawing at each step.

  • void draw ()

  • {

  • int x, y;

  • background (200);

  • stroke (0);

  • fill (175);

  • rectMode (CENTER);

  • rect (20, 30, 50, 50);

  • rect (30, 90, 50, 50);

  • }


Output

Output

This is a static drawing. It does

Not show off the animation.

Lets draw the rectangles where

the mouse cursor is.


Mouse

Mouse

mouseX and MouseY are

Variables defined by the system.

They are like those in

GameMaker.

  • void draw ()

  • {

  • background (200);

  • stroke (0);

  • fill (175);

  • rectMode (CENTER);

  • rect mouseX, mouseY, 50, 50);

  • }


Output1

Output


Let s make a small change

Let’s make a small change …

void setup()

{

size(300,400);

background (200);

}

void draw ()

{

// background (200);

stroke (0);

fill (175);

rectMode (CENTER);

rect (mouseX, mouseY, 50, 50);

}

Move the background call

From ‘draw’ to ‘setup’.

What will happen??


Explain

Explain??


Variables

Variables

  • Variables need to be declared before they can be used.

  • Declarations are simple, and merely tell Processing that the name is to be used and what kind of thing it can contain (an integer? Character? Real number?)


Variables1

Variables

void draw ()

{

r = random (255);

g = random (255);

b = random (255);

a = random (255);

noStroke ();

fill (r,g,b,a);

ellipse (random (200), random(200),

20, 30);

}

  • Here’s an example:

  • float r, g, b, a;

  • void setup ()

  • {

  • size (200, 200);

  • background (0);

  • smooth();

  • }


Output2

Output


New things

New things

  • Cause the size of the ellipses to vary too.

  • Draw rectangles too.

  • Specify colours – red range, blue range, etc.

  • ** Color depends on mouse position **


  • Login