1. Designing with Code
simple intro/review
of some useful
programming basics
design and information architecture/ysdn 3006

2. Designing with Code
Object Oriented Programming
• OOPs
• Processing, ActionScript, Java, Javascript
• use of objects, functions and methods
Frameworks
• jQuery, Tweener, Hype, Papervision,
• a reusable set of libraries or classes for software systems
Syntax
• grammar “rules” specific to each language
• but all OOPs language have some things in common

3. Designing with Code
Classes
• class defines the properties and methods available
• each object falls under a single class
• eg. MovieClip, TextField,Video - ActionScript
• individual object - instance
Objects
• smaller building blocks - easier to work with
• way to group variables with related functions
• eg. PImage, PFont, PShape - Processing
• specific properties and/or methods

4. Designing with Code
Class radio
} this object is an
instance of radio class
{
volume
}
properties band setVolume
attributes, fields setBand methods
power
setPower actions, behaviours, callout
frequency
setFrequency

5. Designing with Code
Functions
• basic building blocks of OOP
• independent units that work together
• eg. background(), size(), stroke()- Processing
• can be built in or custom

6. Designing with Code
int myWidth = (320*2);
int myHeight = (240 + 240);
Variables int mySquare = 60;
int myCircle = 60;
//show the value of a variable in the console
• types of variables - int, float, println(myCircle);
• a holder for value //sometimes you need more info
println("myCircle" + myCircle);
• value can be an expression used as parameters // formatting like this is called concatenation
println("myCircle" + "" + " — " + myCircle);
background(0);
size(myWidth, myHeight );
rect(30, 30, mySquare, mySquare);
ellipse(130, 60, myCircle, myCircle);
int myWidth = (320*2);
int myHeight = (240 + 240);
int mySquare = 60;
int myCircle = 60;
background(0);
size(myWidth, myHeight );
rect(30, 30, mySquare, mySquare);
ellipse(130, 60, myCircle,
myCircle);

7. Designing with Code
Arrays
• create multiple variables without defining a new name for each
• code shorter, easier to read and update

8. Designing with Code
Arrays
• To make an array, just place brackets after the data type: int[] x;
• The beauty of creating an array is the ability to make 2, 10, or
100,000 variable values with only one line of code. For instance, the
following line creates an array of 2,000 integer variables:
int[] x = new int[2000];
• Arrays can also be made of other data types like images:
PImage[] images = new PImage[32];

9. Designing with Code too many variables
float x1 = -10;
Arrays float x2 = 10;
float x3 = 35;
• create multiple variables without defining a new name for each float x4 = 18;
float x5 = 30;
• code shorter, easier to read and update
void setup() {
size(240, 120);
smooth();
noStroke();
}
void draw() {
background(0);
x1 += 0.5;
x2 += 0.5;
x3 += 0.5;
x4 += 0.5;
x5 += 0.5;
arc(x1, 20, 20, 20, 0.52, 5.76);
arc(x2, 40, 20, 20, 0.52, 5.76);
arc(x3, 60, 20, 20, 0.52, 5.76);
arc(x4, 80, 20, 20, 0.52, 5.76);
arc(x5, 100, 20, 20, 0.52, 5.76);
}

10. Designing with Code Let the array store
the variables
Arrays
float[] x = new float[3000];
• this examples shows 3000 variables in an array void setup() {
• using repetition loop to work with large arrays keeps the code concise size(240, 120);
• need to know the length of the array smooth();
noStroke();
fill(255, 200);
for (int i = 0; i < x.length; i++) {
x[i] = random(-1000, 200);
}
}
void draw() {
background(0);
for (int i = 0; i < x.length; i++) {
x[i] += 0.5;
float y = i * 0.4;
arc(x[i], y, 12, 12, 0.52, 5.76);
}
}

11. that’s it for now ....
we will get into this more in the coming classes
design and information architecture/ysdn 3006