Designing with Code

simple intro/review of some useful programming basics

design and information architecture/ysdn 3006

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

Designing with Code

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

Classes• class defines the properties and methods available

• each object falls under a single class

• eg. MovieClip, TextField, Video - ActionScript

• individual object - instance

Designing with Code

Class radio

volumebandpowerfrequency

setVolumesetBandsetPowersetFrequency

methodsactions, behaviours, callout }

propertiesattributes, fields {

this object is aninstance of radio class }

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

Designing with Code

Variables• types of variables - int, float,

• a holder for value

• value can be an expression used as parameters

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

int myWidth = (320*2);int myHeight = (240 + 240);int mySquare = 60;int myCircle = 60;//show the value of a variable in the consoleprintln(myCircle);//sometimes you need more infoprintln("myCircle" + myCircle);// formatting like this is called concatenationprintln("myCircle" + "" + " — " + myCircle);background(0);size(myWidth, myHeight );rect(30, 30, mySquare, mySquare);ellipse(130, 60, myCircle, myCircle);

Designing with Code

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

Designing with Code

Arrays• To make an array, just place brackets after the data type:

• 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:

• Arrays can also be made of other data types like images:

int[] x;

int[] x = new int[2000];

PImage[] images = new PImage[32];

Designing with Code

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

float x1 = -10;float x2 = 10;float x3 = 35;float x4 = 18;float x5 = 30;

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

too many variables

Designing with Code

Arrays• this examples shows 3000 variables in an array• using repetition loop to work with large arrays keeps the code concise• need to know the length of the array

float[] x = new float[3000];void setup() { size(240, 120); 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); }}

Let the array storethe variables

that’s it for now .... we will get into this more in the coming classes

design and information architecture/ysdn 3006