KEMBAR78
Coding for | PDF
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

  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
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
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
                                                                             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);
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:              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];
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);
                                                                      }
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);
                                                                                 }
                                                                               }
that’s it for now ....
we will get into this more in the coming classes




                                 design and information architecture/ysdn 3006

Coding for

  • 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 fornow .... we will get into this more in the coming classes design and information architecture/ysdn 3006