Week 02 :: Scripting Fundamentals

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

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()

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

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

Multiplicative: * / %
Additive: + -
Relational: < > <= >=
Equality: == !=
&&
Logical OR: ||
Assignment: =

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 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.

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
.............................

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);
    }
}

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

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()


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.