User Tools

Site Tools


courses:2010.10.21.intro_prototyping

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
courses:2010.10.21.intro_prototyping [2010/11/03 02:57]
130.239.148.172
courses:2010.10.21.intro_prototyping [2010/11/04 04:07] (current)
130.239.149.26
Line 1: Line 1:
 +====== oct 21: Introduction to programming with Processing: Processing IDE, drawing with code ======
 +
 +Chapters 1 and 2 from the [[http://​www.learningprocessing.com|Learning Processing]] book. Preview at [[http://​books.google.com/​books?​id=yrR1YoiM2EAC|Google Books]]
 +
 +==== Processing IDE ====
 +
 +History ([[http://​dbn.media.mit.edu|DBN]]),​ why Processing, comparison to other programs.
 +
 +//​Processing is a programming language, development environment,​ and online community that since 2001 has promoted software literacy within the visual arts. Initially created to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing quickly developed into a tool for creating finished professional work as well.//
 +
 +from the Processing [[http://​processing.org/​about/​|website]]
 +
 +==== Drawing with code ====
 +
 +  * cartesian coordinates vs screen coordinates.
 +  * english language vs code language
 +  * simple shapes (point, line, rectangle, ellipse)
 +  * colors (grayscale, RGB, alpha, others)
 +  * fill(), stroke(), smooth()
 +
 +
 +==== Writing code in Processing IDE ====
 +
 +  * syntax
 +  * comment (single line, multilines)
 +  * default structures/​functions:​ setup() and draw()
 +
 +==== Example file made during the course ====
 +<code java>
 +//  made this sketch on my first day of Processing
 +
 +int circleSize = 10; //​ initialize my variable
 +
 +void setup() {
 +  size(600, 400); // size of the window
 +  frameRate(25);​
 +  smooth(); // want some smooth lines
 +  background(255);​ // set the background
 +}
 +
 +void draw() {
 +  // clear background
 +  background(255);​
 +  ​
 +  // increment size
 +  circleSize = circleSize + 10;
 +
 +  // check if too big, reset to initial size
 +  if(circleSize > 300) { 
 +    circleSize = 10;
 +  }
 +  ​
 +  // draw green circle
 +  noStroke();
 +  fill(0, 255, 0, 50);
 +  ellipse(100,​ 200, 300, 300);
 +
 +  // draw red circle, follows mouse cursor
 +  fill(200, 0, 0);
 +  rect(mouseX,​ mouseY, circleSize, circleSize);​
 +}
 +</​code>​
 +
 +==== Resources ====
 +
 +  * [[http://​processing.org/​learning/​gettingstarted/​index.html|Getting Started]]
 +  * [[http://​processing.org/​reference/​index.html|Processing language reference]]
 +  * [[http://​toxiclibs.org/​|Toxic Libraries]] Karsten Schmidt, Processing guru + Computational Designer
 +  * [[http://​www.flight404.com/​blog/​|Flight 404]] Robert Hodgin, inpiration work made with Processing
 +  * [[http://​www.rmx.cz/​monsters/​|Processing Monsters]]
 +  * [[http://​rhizome.org/​tinysketch/​|Tiny Sketch]] 200 Character Processing Competition
 +  * [[http://​www.openprocessing.org/​|OpenProcesing]] Online community to share and discuss Processing sketches
 +==== Homework for next session ====
 +
 +Draw a visual representation of yourself only using code in Processing. Do a greyscale version first, then a second one with colors. ​
 +
 +**Upload your Processing file/folder below (before November 2 23h59), editing this wiki page:**
 +
 +Name, {{:​courses:​pointslines.pde|myProcessingFile}}
 +
 +==== Exercises ====
 +  * {{:​courses:​miguel_nov02a.zip|1st Exercise by Miguel Peres}}
 +  * {{:​courses:​beautiful_sketch.zip|Camille'​s homework}}
 +  * {{:​courses:​portrait_oct28b_headBob.zip|Jess'​ Processing File}}
 +  * {{:​courses:​sketch_avatar1_nov02a.rar| Sharon'​s avatar}}
 +  * {{:​courses:​portraits_alexis.zip|Alexis'​ portraits}}
 +  * {{:​courses:​sketch_2b.zip| Maria Zenkevich homework}}
 +  * {{:​courses:​vivian_lo_avatar.zip||Vivian'​s avatar}}
 +  * {{:​courses:​myAvatar_20101103.zip|Carol'​s avatar}}
 +  * {{:​courses:​avator_lynnbui.zip|Lynn'​s Avatar}}
 +  * {{:​courses:​box_face.zip|Clayton'​s Avatar}}
 +  * {{:​courses:​linus_avatars.zip| Linus Avatar(s)}}
  
courses/2010.10.21.intro_prototyping.txt · Last modified: 2010/11/04 04:07 by 130.239.149.26