ºÝºÝߣ

ºÝºÝߣShare 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¡± speci?c to each language
                      ?   but all OOPs language have some things in common
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
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
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, ?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);
Designing with Code

  Arrays
  ?   create multiple variables without de?ning 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 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);
                                                                      }
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

What's hot (19)

Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
Henry Osborne
?
tutorial5
tutorial5tutorial5
tutorial5
tutorialsruby
?
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
?
C# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusC# v8 new features - raimundas banevicius
C# v8 new features - raimundas banevicius
Raimundas Banevi?ius
?
The Ring programming language version 1.5.1 book - Part 46 of 180
The Ring programming language version 1.5.1 book - Part 46 of 180The Ring programming language version 1.5.1 book - Part 46 of 180
The Ring programming language version 1.5.1 book - Part 46 of 180
Mahmoud Samir Fayed
?
XNA L09¨C2D Graphics and Particle Engines
XNA L09¨C2D Graphics and Particle EnginesXNA L09¨C2D Graphics and Particle Engines
XNA L09¨C2D Graphics and Particle Engines
Mohammad Shaker
?
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and VisageHacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Stephen Chin
?
Objective-C Crash Course for Web Developers
Objective-C Crash Course for Web DevelopersObjective-C Crash Course for Web Developers
Objective-C Crash Course for Web Developers
Joris Verbogt
?
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvas
Gary Yeh
?
Gazr
GazrGazr
Gazr
kuro7
?
Rubyconfindia2018 - GPU accelerated libraries for Ruby
Rubyconfindia2018 - GPU accelerated libraries for RubyRubyconfindia2018 - GPU accelerated libraries for Ruby
Rubyconfindia2018 - GPU accelerated libraries for Ruby
Prasun Anand
?
Statistical Schema Induction
Statistical Schema InductionStatistical Schema Induction
Statistical Schema Induction
Johanna Voelker
?
OpenCascade Technology Overview: Visualization
OpenCascade Technology Overview: VisualizationOpenCascade Technology Overview: Visualization
OpenCascade Technology Overview: Visualization
River Wang
?
Mongoseattle indexing-2010-07-27
Mongoseattle indexing-2010-07-27Mongoseattle indexing-2010-07-27
Mongoseattle indexing-2010-07-27
MongoDB
?
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
Robyn Overstreet
?
Indexing and Query Optimizer (Richard Kreuter)
Indexing and Query Optimizer (Richard Kreuter)Indexing and Query Optimizer (Richard Kreuter)
Indexing and Query Optimizer (Richard Kreuter)
MongoDB
?
JavaScript Obfuscation
JavaScript ObfuscationJavaScript Obfuscation
JavaScript Obfuscation
n|u - The Open Security Community
?
Html5 game programming overview
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview
?? ?
?
Encontra presentation
Encontra presentationEncontra presentation
Encontra presentation
Ricardo Dias
?
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
Henry Osborne
?
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
?
C# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusC# v8 new features - raimundas banevicius
C# v8 new features - raimundas banevicius
Raimundas Banevi?ius
?
The Ring programming language version 1.5.1 book - Part 46 of 180
The Ring programming language version 1.5.1 book - Part 46 of 180The Ring programming language version 1.5.1 book - Part 46 of 180
The Ring programming language version 1.5.1 book - Part 46 of 180
Mahmoud Samir Fayed
?
XNA L09¨C2D Graphics and Particle Engines
XNA L09¨C2D Graphics and Particle EnginesXNA L09¨C2D Graphics and Particle Engines
XNA L09¨C2D Graphics and Particle Engines
Mohammad Shaker
?
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and VisageHacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Stephen Chin
?
Objective-C Crash Course for Web Developers
Objective-C Crash Course for Web DevelopersObjective-C Crash Course for Web Developers
Objective-C Crash Course for Web Developers
Joris Verbogt
?
Rubyconfindia2018 - GPU accelerated libraries for Ruby
Rubyconfindia2018 - GPU accelerated libraries for RubyRubyconfindia2018 - GPU accelerated libraries for Ruby
Rubyconfindia2018 - GPU accelerated libraries for Ruby
Prasun Anand
?
Statistical Schema Induction
Statistical Schema InductionStatistical Schema Induction
Statistical Schema Induction
Johanna Voelker
?
OpenCascade Technology Overview: Visualization
OpenCascade Technology Overview: VisualizationOpenCascade Technology Overview: Visualization
OpenCascade Technology Overview: Visualization
River Wang
?
Mongoseattle indexing-2010-07-27
Mongoseattle indexing-2010-07-27Mongoseattle indexing-2010-07-27
Mongoseattle indexing-2010-07-27
MongoDB
?
Indexing and Query Optimizer (Richard Kreuter)
Indexing and Query Optimizer (Richard Kreuter)Indexing and Query Optimizer (Richard Kreuter)
Indexing and Query Optimizer (Richard Kreuter)
MongoDB
?
Html5 game programming overview
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview
?? ?
?
Encontra presentation
Encontra presentationEncontra presentation
Encontra presentation
Ricardo Dias
?

Similar to Coding for (20)

Lec2
Lec2Lec2
Lec2
Amba Research
?
tutorial5
tutorial5tutorial5
tutorial5
tutorialsruby
?
Oop c++class(final).ppt
Oop c++class(final).pptOop c++class(final).ppt
Oop c++class(final).ppt
Alok Kumar
?
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
deanhudson
?
Introduction to c#
Introduction to c#Introduction to c#
Introduction to c#
OpenSource Technologies Pvt. Ltd.
?
????C(pdf)
????C(pdf)????C(pdf)
????C(pdf)
sunwooindia
?
Cassandra Tutorial
Cassandra TutorialCassandra Tutorial
Cassandra Tutorial
mubarakss
?
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
Daniel Cousineau
?
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentation
sharp-blade
?
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
Spiffy
?
MATLAB & Image Processing
MATLAB & Image ProcessingMATLAB & Image Processing
MATLAB & Image Processing
Techbuddy Consulting Pvt. Ltd.
?
Adding Riak to your NoSQL Bag of Tricks
Adding Riak to your NoSQL Bag of TricksAdding Riak to your NoSQL Bag of Tricks
Adding Riak to your NoSQL Bag of Tricks
siculars
?
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentation
sharp-blade
?
Introduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicoxIntroduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicox
David Rodenas
?
Forking Oryx at Intalio
Forking Oryx at IntalioForking Oryx at Intalio
Forking Oryx at Intalio
Antoine Toulme
?
°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý
°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý
°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý
Yuichi Higuchi
?
DIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptx
DIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptxDIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptx
DIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptx
MdMojnuMiah3
?
Spark schema for free with David Szakallas
Spark schema for free with David SzakallasSpark schema for free with David Szakallas
Spark schema for free with David Szakallas
Databricks
?
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
David Isbitski
?
C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016
C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016
C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016
DataStax
?
Oop c++class(final).ppt
Oop c++class(final).pptOop c++class(final).ppt
Oop c++class(final).ppt
Alok Kumar
?
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
deanhudson
?
Cassandra Tutorial
Cassandra TutorialCassandra Tutorial
Cassandra Tutorial
mubarakss
?
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
Daniel Cousineau
?
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentation
sharp-blade
?
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
Spiffy
?
Adding Riak to your NoSQL Bag of Tricks
Adding Riak to your NoSQL Bag of TricksAdding Riak to your NoSQL Bag of Tricks
Adding Riak to your NoSQL Bag of Tricks
siculars
?
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentation
sharp-blade
?
Introduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicoxIntroduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicox
David Rodenas
?
°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý
°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý
°ä´Ç³¦´Ç²õ2»å¤òʹ¤Ã¤¿¥²©`¥à×÷³É¤ÎÊÂÀý
Yuichi Higuchi
?
DIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptx
DIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptxDIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptx
DIGITAL_SIGNAL_AND_IMAGE_PROCESSING_USIN.pptx
MdMojnuMiah3
?
Spark schema for free with David Szakallas
Spark schema for free with David SzakallasSpark schema for free with David Szakallas
Spark schema for free with David Szakallas
Databricks
?
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
David Isbitski
?
C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016
C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016
C* for Deep Learning (Andrew Jefferson, Tracktable) | Cassandra Summit 2016
DataStax
?

Recently uploaded (20)

Python_Full_Course_Presentaerertionpptxsre
Python_Full_Course_PresentaerertionpptxsrePython_Full_Course_Presentaerertionpptxsre
Python_Full_Course_Presentaerertionpptxsre
sivayadav2204
?
Excellenseaa 126 HOUSING REFERENCES.pptx
Excellenseaa 126 HOUSING REFERENCES.pptxExcellenseaa 126 HOUSING REFERENCES.pptx
Excellenseaa 126 HOUSING REFERENCES.pptx
aaryandoshii4
?
Untitled desigggggggggggggggggggggn.pptx
Untitled desigggggggggggggggggggggn.pptxUntitled desigggggggggggggggggggggn.pptx
Untitled desigggggggggggggggggggggn.pptx
beliganiokurtvincent
?
OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdf
OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdfOLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdf
OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdf
DimejiFakorede
?
234.ppt dise?o caracterisiticas y tecnicas diferentes espacios
234.ppt dise?o caracterisiticas y tecnicas diferentes espacios234.ppt dise?o caracterisiticas y tecnicas diferentes espacios
234.ppt dise?o caracterisiticas y tecnicas diferentes espacios
mabel perez
?
EIKT V. IVA. LIST IT studen. _B.pptx
EIKT V.  IVA.   LIST IT studen.  _B.pptxEIKT V.  IVA.   LIST IT studen.  _B.pptx
EIKT V. IVA. LIST IT studen. _B.pptx
amarjain991
?
Promoting Sustainable Development of Hill Areas --Issues and Options
Promoting Sustainable Development of Hill Areas --Issues and OptionsPromoting Sustainable Development of Hill Areas --Issues and Options
Promoting Sustainable Development of Hill Areas --Issues and Options
JIT KUMAR GUPTA
?
DT Presentationhdghgdwgjkwgjkwgjqjggqjehe
DT PresentationhdghgdwgjkwgjkwgjqjggqjeheDT Presentationhdghgdwgjkwgjkwgjqjggqjehe
DT Presentationhdghgdwgjkwgjkwgjqjggqjehe
dipanshu1721
?
Designing for Ecosystem Transitions - Morgenbooster
Designing for Ecosystem Transitions - MorgenboosterDesigning for Ecosystem Transitions - Morgenbooster
Designing for Ecosystem Transitions - Morgenbooster
1508 A/S
?
Ajay Goswami-complete Design-27-01-17.pptx
Ajay Goswami-complete Design-27-01-17.pptxAjay Goswami-complete Design-27-01-17.pptx
Ajay Goswami-complete Design-27-01-17.pptx
lndev2k
?
Grade 7 powerpoint for HTML and CSS introduction
Grade 7 powerpoint for HTML and CSS introductionGrade 7 powerpoint for HTML and CSS introduction
Grade 7 powerpoint for HTML and CSS introduction
ChristopherPurcia1
?
89_Theories_ of Child_ Development.pptxhhhh
89_Theories_ of Child_ Development.pptxhhhh89_Theories_ of Child_ Development.pptxhhhh
89_Theories_ of Child_ Development.pptxhhhh
Noorien3
?
13 Best Fonts for YouTube Thumbnails & Banners for 2025
13 Best Fonts for YouTube Thumbnails & Banners for 202513 Best Fonts for YouTube Thumbnails & Banners for 2025
13 Best Fonts for YouTube Thumbnails & Banners for 2025
INKLUSIVE Design Agency
?
Norpar Pipenet fire fighting PRESENTATION.ppt
Norpar Pipenet fire fighting PRESENTATION.pptNorpar Pipenet fire fighting PRESENTATION.ppt
Norpar Pipenet fire fighting PRESENTATION.ppt
ballabammoune1
?
Wondershare Filmora Crack Version 2025??
Wondershare Filmora Crack Version 2025??Wondershare Filmora Crack Version 2025??
Wondershare Filmora Crack Version 2025??
Designer
?
The Future of Graphic Design trends .pdf
The Future of Graphic Design trends .pdfThe Future of Graphic Design trends .pdf
The Future of Graphic Design trends .pdf
anandhithaas2018
?
Prospectus_2023_(13-01-2023) (1).pdfhhhhh
Prospectus_2023_(13-01-2023) (1).pdfhhhhhProspectus_2023_(13-01-2023) (1).pdfhhhhh
Prospectus_2023_(13-01-2023) (1).pdfhhhhh
abduljaleelbaat48
?
Wilcom Embroidery Studio Crack Version 2025?
Wilcom Embroidery Studio Crack Version 2025?Wilcom Embroidery Studio Crack Version 2025?
Wilcom Embroidery Studio Crack Version 2025?
Designer
?
tabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptx
tabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptxtabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptx
tabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptx
GitaWardhani1
?
ºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptx
ºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptxºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptx
ºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptx
SithamparanaathanPir
?
Python_Full_Course_Presentaerertionpptxsre
Python_Full_Course_PresentaerertionpptxsrePython_Full_Course_Presentaerertionpptxsre
Python_Full_Course_Presentaerertionpptxsre
sivayadav2204
?
Excellenseaa 126 HOUSING REFERENCES.pptx
Excellenseaa 126 HOUSING REFERENCES.pptxExcellenseaa 126 HOUSING REFERENCES.pptx
Excellenseaa 126 HOUSING REFERENCES.pptx
aaryandoshii4
?
Untitled desigggggggggggggggggggggn.pptx
Untitled desigggggggggggggggggggggn.pptxUntitled desigggggggggggggggggggggn.pptx
Untitled desigggggggggggggggggggggn.pptx
beliganiokurtvincent
?
OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdf
OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdfOLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdf
OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdf
DimejiFakorede
?
234.ppt dise?o caracterisiticas y tecnicas diferentes espacios
234.ppt dise?o caracterisiticas y tecnicas diferentes espacios234.ppt dise?o caracterisiticas y tecnicas diferentes espacios
234.ppt dise?o caracterisiticas y tecnicas diferentes espacios
mabel perez
?
EIKT V. IVA. LIST IT studen. _B.pptx
EIKT V.  IVA.   LIST IT studen.  _B.pptxEIKT V.  IVA.   LIST IT studen.  _B.pptx
EIKT V. IVA. LIST IT studen. _B.pptx
amarjain991
?
Promoting Sustainable Development of Hill Areas --Issues and Options
Promoting Sustainable Development of Hill Areas --Issues and OptionsPromoting Sustainable Development of Hill Areas --Issues and Options
Promoting Sustainable Development of Hill Areas --Issues and Options
JIT KUMAR GUPTA
?
DT Presentationhdghgdwgjkwgjkwgjqjggqjehe
DT PresentationhdghgdwgjkwgjkwgjqjggqjeheDT Presentationhdghgdwgjkwgjkwgjqjggqjehe
DT Presentationhdghgdwgjkwgjkwgjqjggqjehe
dipanshu1721
?
Designing for Ecosystem Transitions - Morgenbooster
Designing for Ecosystem Transitions - MorgenboosterDesigning for Ecosystem Transitions - Morgenbooster
Designing for Ecosystem Transitions - Morgenbooster
1508 A/S
?
Ajay Goswami-complete Design-27-01-17.pptx
Ajay Goswami-complete Design-27-01-17.pptxAjay Goswami-complete Design-27-01-17.pptx
Ajay Goswami-complete Design-27-01-17.pptx
lndev2k
?
Grade 7 powerpoint for HTML and CSS introduction
Grade 7 powerpoint for HTML and CSS introductionGrade 7 powerpoint for HTML and CSS introduction
Grade 7 powerpoint for HTML and CSS introduction
ChristopherPurcia1
?
89_Theories_ of Child_ Development.pptxhhhh
89_Theories_ of Child_ Development.pptxhhhh89_Theories_ of Child_ Development.pptxhhhh
89_Theories_ of Child_ Development.pptxhhhh
Noorien3
?
13 Best Fonts for YouTube Thumbnails & Banners for 2025
13 Best Fonts for YouTube Thumbnails & Banners for 202513 Best Fonts for YouTube Thumbnails & Banners for 2025
13 Best Fonts for YouTube Thumbnails & Banners for 2025
INKLUSIVE Design Agency
?
Norpar Pipenet fire fighting PRESENTATION.ppt
Norpar Pipenet fire fighting PRESENTATION.pptNorpar Pipenet fire fighting PRESENTATION.ppt
Norpar Pipenet fire fighting PRESENTATION.ppt
ballabammoune1
?
Wondershare Filmora Crack Version 2025??
Wondershare Filmora Crack Version 2025??Wondershare Filmora Crack Version 2025??
Wondershare Filmora Crack Version 2025??
Designer
?
The Future of Graphic Design trends .pdf
The Future of Graphic Design trends .pdfThe Future of Graphic Design trends .pdf
The Future of Graphic Design trends .pdf
anandhithaas2018
?
Prospectus_2023_(13-01-2023) (1).pdfhhhhh
Prospectus_2023_(13-01-2023) (1).pdfhhhhhProspectus_2023_(13-01-2023) (1).pdfhhhhh
Prospectus_2023_(13-01-2023) (1).pdfhhhhh
abduljaleelbaat48
?
Wilcom Embroidery Studio Crack Version 2025?
Wilcom Embroidery Studio Crack Version 2025?Wilcom Embroidery Studio Crack Version 2025?
Wilcom Embroidery Studio Crack Version 2025?
Designer
?
tabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptx
tabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptxtabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptx
tabel kuma pneumoniiiiiiiiiiiiiiiiiiiiiiiii.pptx
GitaWardhani1
?
ºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptx
ºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptxºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptx
ºÝºÝߣEgg_83136-Ramadan PowerPoint Presentation PPT.pptx
SithamparanaathanPir
?

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¡± 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