SlideShare a Scribd company logo
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

More Related Content

PDF
Collada Reference Card 1.4
PDF
SVGo workshop
PDF
SVGo: a Go Library for SVG generation
PDF
2011 11-mozcamp
PDF
DojoX GFX Session Eugene Lazutkin SVG Open 2007
PPTX
JavaFX and Scala - Like Milk and Cookies
PDF
Intro to HTML5 Canvas
PPT
Cleaner APIs, Cleaner UIs with Visage (33rd Degrees)
Collada Reference Card 1.4
SVGo workshop
SVGo: a Go Library for SVG generation
2011 11-mozcamp
DojoX GFX Session Eugene Lazutkin SVG Open 2007
JavaFX and Scala - Like Milk and Cookies
Intro to HTML5 Canvas
Cleaner APIs, Cleaner UIs with Visage (33rd Degrees)

What's hot (19)

PPTX
Drawing with the HTML5 Canvas
PDF
tutorial5
PPTX
Introduction to HTML5 Canvas
PDF
C# v8 new features - raimundas banevicius
PDF
The Ring programming language version 1.5.1 book - Part 46 of 180
PDF
XNA L09–2D Graphics and Particle Engines
PPTX
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
KEY
Objective-C Crash Course for Web Developers
PDF
Html5 canvas
KEY
Gazr
PDF
Rubyconfindia2018 - GPU accelerated libraries for Ruby
PDF
Statistical Schema Induction
PPTX
OpenCascade Technology Overview: Visualization
PDF
Mongoseattle indexing-2010-07-27
PPT
HTML5 Canvas
PDF
Indexing and Query Optimizer (Richard Kreuter)
PPT
JavaScript Obfuscation
PDF
Html5 game programming overview
PDF
Encontra presentation
Drawing with the HTML5 Canvas
tutorial5
Introduction to HTML5 Canvas
C# v8 new features - raimundas banevicius
The Ring programming language version 1.5.1 book - Part 46 of 180
XNA L09–2D Graphics and Particle Engines
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Objective-C Crash Course for Web Developers
Html5 canvas
Gazr
Rubyconfindia2018 - GPU accelerated libraries for Ruby
Statistical Schema Induction
OpenCascade Technology Overview: Visualization
Mongoseattle indexing-2010-07-27
HTML5 Canvas
Indexing and Query Optimizer (Richard Kreuter)
JavaScript Obfuscation
Html5 game programming overview
Encontra presentation
Ad

Similar to Coding for (20)

PDF
Creative Coding 1 - 2 Variables
PPT
JavaYDL13
PDF
Introduction to programming - class 3
PDF
Java Reference
PPTX
Classes, objects in JAVA
PPT
JavaYDL2
PPT
Implementation of interface9 cm604.30
PPT
Ch2 Liang
PDF
Operating Systems - Dynamic Memory Management
PPT
Lecture on graphics
PDF
Clean Code Tutorial maXbox starter24
PPT
PDF
MzTEK Programming - Part 2
PPTX
Java class 4
PPTX
Learn Creative Coding: Begin Programming with the Processing Language
PPTX
Learn Creative Coding: Begin Programming with the Processing Language
PDF
Creative Coding 1 - 3 Conditions
PPT
java graphics
PPTX
Generative Coding Lecture notes using coding
PDF
Introduction to Coding
Creative Coding 1 - 2 Variables
JavaYDL13
Introduction to programming - class 3
Java Reference
Classes, objects in JAVA
JavaYDL2
Implementation of interface9 cm604.30
Ch2 Liang
Operating Systems - Dynamic Memory Management
Lecture on graphics
Clean Code Tutorial maXbox starter24
MzTEK Programming - Part 2
Java class 4
Learn Creative Coding: Begin Programming with the Processing Language
Learn Creative Coding: Begin Programming with the Processing Language
Creative Coding 1 - 3 Conditions
java graphics
Generative Coding Lecture notes using coding
Introduction to Coding
Ad

Recently uploaded (20)

PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
PPT
Machine printing techniques and plangi dyeing
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
PPTX
Special finishes, classification and types, explanation
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PPTX
joggers park landscape assignment bandra
PDF
The Advantages of Working With a Design-Build Studio
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
PPTX
12. Community Pharmacy and How to organize it
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
DOCX
The story of the first moon landing.docx
PDF
Quality Control Management for RMG, Level- 4, Certificate
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPTX
building Planning Overview for step wise design.pptx
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
Machine printing techniques and plangi dyeing
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
Wisp Textiles: Where Comfort Meets Everyday Style
Special finishes, classification and types, explanation
Fundamental Principles of Visual Graphic Design.pptx
joggers park landscape assignment bandra
The Advantages of Working With a Design-Build Studio
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
12. Community Pharmacy and How to organize it
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
BRANDBOOK-Presidential Award Scheme-Kenya-2023
The story of the first moon landing.docx
Quality Control Management for RMG, Level- 4, Certificate
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
DOC-20250430-WA0014._20250714_235747_0000.pptx
building Planning Overview for step wise design.pptx
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf

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