Week 02 :: Scripting Fundamentals

<< back to Procedural Morphology homepage

Algorithms

Algorithms, Pseudocode and Getting Going

Algorithms are sequences of instructions for solving a problem

Algorithms can be used as a form of 'pre-coding' useful in developing an approach to a problem later translated into computer code

Algorithms can be created in natural language, diagrams, flow-charts or pseudo-code

Pseudocode is an informal way of expressing an algorithm using structure of code but omits details not needed to understand the algorithm

Pseudocode is useful transition state between natural language or diagramed algorithm to actual code

Basic Syntax

Expressions and Statements

Processing is Whitespace agnostic

Expressions are a group of variables, values, functions, etc, that evaluate to return a value.

Expressions group mathematical operations together into useful lines of code

Statements
are the building blocks of code. Expressions alone are not complete 'thoughts' in code until something happens with the expression.

Terminators end statements of code

Function calls are complete statements // rect() or println() for example

processing provides shape primitive functions for drawing simple shapes // for example rect(), triangle(), ellipse()

Structure

void setup() {} // creates a function that executes once at beginning of your program

void draw() {} // creates a function that executes until the program is stopped

Comments

Use comments to document your code or prevent lines of code from being compiled

Single Line Comments: //

Multi-Line Comments: /* ... */

Debugging Techniques

Use comments to temporarily remove lines of code.

Use println() to write to the text console in the processing environment

Variables

Variables are a way to store information in the computer's memory

Variables are an address to that portion of memory that contains the data

Variables have 3 parts: type, name and value

Types

Integers // whole numbers

Floats// decimal numbers

Characters // single characters

Strings // groups of characters

Boolean // true or false

Data Typing and Conversion

Variable Scope

Math

Operators

Symbols to execute a mathematical operation

Multiplicative: * / %

Additive: + -

Relational: < > <= >=

Equality: == !=

&&

Logical OR: ||

Assignment: =

Logical Operators (OR, AND, NOT)

Within a mathematical expression, the Order of Precedence will determine the order in which operators are performed

Shorthand Operators

++ -- Increment and Decrement

+= -= *= /= %= Operator with assignment

Functions

Processing includes many higher level math functions that you can call. Below are a few you might find useful.

See the processing language reference for a complete set.

abs() absolute value

dist() distance between 2 points

ceil() round up to next highest integer

round() round a float to the nearest inetger

lerp() linear interpolation

Trig

Review

Trig functions are very useful in creating computer graphics. Ira Greenberg's trig primer may be useful to you to remind yourself about the basic rules of trig.

Angle Conversion

Trig functions in processing take radians as their argument.

Radians = Degrees * π/180

Degrees = Radians * 180/π

............................

An easy short hand for working in radians is that 1/2 a circle (180 degrees) is the same as PI (π)

180° = PI

0° = 0 radians

45° = PI / 4 ~or~ PI * 0.25

90° = PI / 2 ~or~ PI * 0.5

135° = PI * 0.75

270° = PI * 1.5

360° = 2 * PI

.............................

Processing includes handy conversion functinos:

radians()

degrees()

Functions

sin() Given an input angle(in radians) returns a value between -1 and 1. Return value starts at 0 and descends. |
cos() Given an input angle(in radians) returns a value between -1 and 1. Return value starts at -1 and ascends. |
atan2() Returns the radian angle toward a point given [y,x]. Note the reversal of the coordinate pair. |

Conditionals

Branch code and run different blocks of statements based on a boolean condition

If Statement

If/Else Statement

Loops

Structures for repeating tasks until a condition has been met

For Statement

Embedded For Statment

Clock Examples

Example: Time01

int h;

int
m;

int
s;

void draw() {

background(204);

// get time

s = second(); // Values from 0 - 59

m = minute(); // Values from 0 - 59

h = hour(); // Values from 0 - 23

// draw the time

line(s, 0, s, 33);

line(m, 33, m, 66);

line(h, 66, h, 100);

}

Example: Time02

float hourHeight = 100.0;

float hourWidth = 40.0;

float minHeight = 100.0;

float minWidth = 60.0;

float secHeight = 100.0;

float secWidth = 60.0;

int h;

int
m;

int
s;

void draw() {

noStroke();

background(220);

// get time

s = second(); // Values from 0 - 59

m = minute(); // Values from 0 - 59

h = hour(); // Values from 0 - 23

// 12 hour clock

h = h % 12;

// draw the time

fill(255, 0, 0, 128);

ellipse(33, 50, h/12.0*hourWidth, h/12.0*hourHeight);

fill(0, 255, 0, 128);

ellipse(50, 50, m/60.0*minWidth, m/60.0*minHeight);

fill(0, 0, 255, 128);

ellipse(66, 50, s/60.0*secWidth, s/60.0*secHeight);

}

Example: Time03

int h;

int
m;

int
s;

void setup() {

size(200,200);

}

void draw() {

background(200);

noStroke();

// get time

s = second(); // Values from 0 - 59

m = minute(); // Values from 0 - 59

h = hour(); // Values from 0 - 23

// 12 hour clock

h = h % 12;

// draw the hours

fill(255);

for(int i=0; i < h; i++) {

rect(20, 30 + i*10, 155, 5);

}

// draw the mins

fill(51);

for(int i=0; i < m; i++) {

rect(105, 20 + i*10, 30, 5);

}

// draw the secs

fill(0);

for(int i=0; i < s; i++) {

rect(120, 40 + i*3, 25, 1);

}

}

Assignment for next week.

Set up your website

Pratt provides web space for everyone with an email address. Email me your URL for the class once you're done.

See the directions.

Exercise #2: Interpretive Clock

Create an applet that displays time using graphical intrepretation rather than traditional digital numeric display. Use the time data to drive a graphical system rather than focus on mapping the graphical system to the time data.

hour()

year()

minute()

month()

day()

second()

See some clock inspiration...

Reading