Design Principles by David Gelb 124250 views
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” speciﬁc to each language • but all OOPs language have some things in common
3. Designing with Code Classes • class deﬁnes 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 • speciﬁc properties and/or methods
4. Designing with Code Class radio } this object is an instance of radio class { volume } properties band setVolume attributes, ﬁelds 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, ﬂoat, 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 deﬁning 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 deﬁning 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
Design Principles by David Gelb 124250 views
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” speciﬁc to each language • but all OOPs language have some things in common
3. Designing with Code Classes • class deﬁnes 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 • speciﬁc properties and/or methods
4. Designing with Code Class radio } this object is an instance of radio class { volume } properties band setVolume attributes, ﬁelds 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, ﬂoat, 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 deﬁning 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 deﬁning 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