New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here

Creative Coding — Spring 2016

by: Annie Pluimer

Creative Coding — Spring 2016 MCC-UE 1585

Annie Pluimer
GPA 3.7

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

These notes are from classes and include concepts, step-by-steps, and define concepts used in Processing. This class and these notes refer to the Processing 3 application and use Java.
Creative Coding
Jamie Bianco
coding, Computer Science, Computer, processing, java
75 ?




Popular in Creative Coding

Popular in Media, Culture, and Communications

This 31 page Bundle was uploaded by Annie Pluimer on Friday August 12, 2016. The Bundle belongs to MCC-UE 1585 at New York University taught by Jamie Bianco in Fall 2015. Since its upload, it has received 9 views. For similar materials see Creative Coding in Media, Culture, and Communications at New York University.

Popular in Media, Culture, and Communications


Reviews for Creative Coding — Spring 2016


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 08/12/16
26 JANUARY 2016  [CREATIVE CODING: WEEK 1]    Processing → Java (framework)  used by artists and designers (visual production)    Basics: programming/processing → works with other ‘languages’      Housekeeping  Coding = usually work with a team  Final = a group project  **NEVER EVER MISS CLASS    MCC Media Lab → hours/resources/workshop tutorials    Textbooks → ​2nd​ edition  ‘Getting Started’ : bring this book to class every week    Dan Schiffman (ITP) : helpful video tutorials    ** quizzes will not always be announced    Submit homework to Google Drive (share with Jamie + 2 TAs)    Twitter: @ProfJSBianco  ­ create a separate account for this class  ­ purpose is to show that homework is done  ­ post with a link and the title of assignment  ­ EX: @profjsbianco @hk_mcc @mcc_marcha posted my hw:  _________ (link)    Evaluative Grading vs Non­Evaluative Grading  ­ quizzes ­ meet set of protocols → get an A      Final Projects  Stages → due dates  Grade on ideas = how well you elaborate    Anticipate slope of difficulty  ­ practice/ read/ learn ahead    Class = lesson → workshop → turn in rough draft      Keywords    FUNCTION​: happens when called  line = system function    OBJECT​: self­contained unit of code        autonomous units  to create dynamic interaction    ARRAY​: collection of data (pics, #s, variables)      Excel = CSV sheet    web­scripting = HTML; CSS    **we need basic literacy → aka code language needs to be known    Processing  Requires structure to store: data and sketches  Files: ​.pde  ­ extension of document  ­ Ex: helloworld.pde    Need pathways/ data sources  ­ create ‘processing’ folder    Primary sketch = same name as folder  ­ sketch ​must be​ contained in a folder  ­ data folder → source data runs on    Must send entire folder for homework  ­ may need to compress (if too large)    Open source coding environment = community built out coding  ­ EX: ​Github  ­ repository for open code  ­ extensions = libraries  ­ EX: audio  ­ minim library (processing audio)    Folders:  Tools​ → built into system    Processing Environment  Java → add mode  can ‘translate’ into new ‘languages’    Line #: compose code    Console: to check errors; internal array; not what would play for user    File → sketchbook → shorthand to folder    Sketch → run/stop (program); import library    Tools → create font  ­ words: have to insert font     color selector  ­ Hex #: 6 digits  ­ operates in pairs  ­ white = #FFFFFF  ­ black = #000000  ­ RGB: 0­255 (values)  ­ ex: white = all 255                              black = all 0  ** color has 256 bit channels  ** processing prefers ​RGB    Programming #1 creation step: tell it where it’s going to live  ­ ex: size  ­ pixels: unit of measurement + quality  ­ size requires parameters    semicolon → use at the end of each line of code    press ‘play’ to execute sketch    reads top to bottom unless disrupted     ellipse = circle  ­ float = kind of format for variables  ­ first 2 values = ​mouseX, mouseY = ​radius, diameter    ­ EX: ellipse (100, 300, 100, 20) → off screen b/c size is 200 and 2nd value is 300    setup → runs once; draw → 60x per second    functions = { }    draw = dynamic function  ­ tell it to do something  ­ conditional → if, then    ** color comes before shape  ­ EX: ellipse (100, 100, 50, 50) → first two values are a hard coded location      Homework  1. imagine what you want to make  a. doodle on paper  2. create ‘hello world! i am…’  a. whatever you want from what you learn in the book      9 FEBRUARY 2016  [CREATIVE CODING: WEEK 3]    ** CENTER mode used if coming back from another mode ­­ otherwise it is default mode    Variable ​= space of memory  → contains data  → must declare (type)  → assignment (value)(=)    EX: point(435,165);         point(435,165 + n);    n = n + 15 //reassign n      **beginShape, endShape   → allows you to create a shape  made up of other shapes within  the same function (better  organization)                                COLOR  **look at pg. 43­45 (big book)    Blend Color Values  → blendMode (grayscale)  → colorMode (blend RGB)    (​abs​(mouseX ­ pmouseY))    abs = absolute value → values in coding will not read if negative    pmouseY = previous mouse    ** ​(0,0) → shapes drawn from this position which is located in the very top left corner                                                      ** the translate function will add that amount to the x and y values for the following  positional values      Operators:  /  >    ­ <  * %    step_amount = 5 px    (blue) 10 = 10 + 5 (15)    therefore: blue = blue + step_amount  (0,0,25) → (0,0,40) → (0,0,55) → (0,0,70) ​this creates a gradient    line_y → has to be int / not decimal    float: takes decimals (therefore takes up more memory)  → game designs use int to have faster reactions    int ​+ ​float​ = 2 different types of variables    = : assignment  = = : equals    modulo → % → remainder    EX: 4/3 → remainder of ​1 ​→ therefore 1 is the ​modulo    P ​(parenthesis)  E ​(exponents)  M​ (multiplication)  D ​(division)  A​ (addition)  S​ (subtraction)    **order of operations    Change the value of n:    int n ; n = 1    (later) n = n + 1    n ++ (n plus one)  n ­­ (n minus one) → ​  abbreviations for functions      + =  n += 5 → n = n + 5    n += 3 → n = n + 3    set of same things = ​loop    void draw() {  for ( n = 0; n < 500; n += 10)    first = initialization  second = test  third = update    for( ​→ so long as, I declare, etc.     < ​→ as long as    loop: “do this until you fail my test”    **declare n inside a function  → operates within  → declare originally before changing it      16 FEBRUARY 2016  [CREATIVE CODING: WEEK 4]    **at this point → all code is your own (for homework)    CSV = Comma Separated Variables (aka Excel spreadsheet)    Homework:  Collab assignment  → write in pseudo code (half normal and half code)    Flow chart  → series of moments the user will experience in your final project   → minimum of 3 moments (EX: 1. homepage; 2. about the project; 3. interaction)    Basic Operators: P E M D % A S    EX: for(float x = 10; x < HEIGHT; x += 25);    int i = 20    void setup() {  }    void draw() {  if (keyPressed && i < 400) {                       ​**this ‘&&’ means something will happen if  BOTH   line(i, 80, i +60, 40);                          ​conditions are met  i += 60;            ​→ if key is pressed & i is less than 400 then…    **​know ​for loops​ and ​if statements ​and how they can work together      The rest of class we shopped around for groups for final project and took a quiz      23 FEBRUARY 2016  [CREATIVE CODING: WEEK 5]    *void draw = crucial for interactivity    objects: completely separate within code    REVIEW:    Relational ​and ​Logical ​operators:  PEMDAS ( ​() * / + ­ = += ­= == ++ ­­​ ) ­ order of execution  EX: n += 3 → new ‘n’ is current ‘n’ plus 3    Relational​ (established relationship)  ­ good to test things  ­ (​ , >, ==, <=, >= ) ​   ­ EX: if(!mousePressed ​ ) = if mouse n​ ot pressed or if mousePressed not true  ­ aka ​negation  ­ mousePressed = system function = boolean  ­ test → use ​!=  ­ negation → use (!mousePressed)    Logical  || → or; && → and; ! → not    ­ explicitly 4 logical operations  ­ && → both conditions must be true  ­ || → one or the other must be true  ­ ! → both not true to pass test (inverse logic)  ­ gives double variables  ­ est. initial state    [Where are relational operators used?]  loops  conditionals  event functions    [Where are operators used?]  anywhere    [Where are logical operators used?]  only when talking about booleans  ­ T + F / comparative   ­ conditionals      **if never used a variable before   ­ must declare ‘type’    for loop: repeats / copies / iterates                            **logical operators return boolean variables  ­ once boolean is false = stops    1. Ordinary operators return numerical values  a. int; float  2. Relational operators return numerical and boolean values  3. Logical operators return boolean values    Conditionals  * multiple conditions  ­ check cond #1, #2, #3 (works with e ​ lse if​ statements)    if(boolean condition) ​→​ false → else if(cond) → false → else if(cond) → false   TRUE      ​TRUE TRUE          * populates along the x­axis then once it goes through the conditionals it runs the  second round to populate the next line of ellipses    Nested: first ​for loop ​runs ONCE    second runs until it maxes out @ width   ­ when finished the first loop runs again    * resets Y value: moves first circle down  ­ populates along x­axis                        calculate condition of space inside circles (calculate where mouse is)  ­ else if (mouse in this space)  ­ fill red  ​ ­ else if (mouse is in t ​ his space)  ­ fill green  string = “ “ = double quote = for a sequence of words  char = ‘ ‘ = single quotes = for assignment    *key does not summon an event  ­ key requires nesting  ­ keyCode does not require nesting  TO CHECK OUT:  frameRate  frame ( ​ system variable)  cursor / no cursor  loop / noLoop  easing  mouseButton      2 WEEKS FROM NOW:  Bring in media (pictures) taken with your group relating to your project    THIS WEEK HOMEWORK:  mouse + keyboard events  ­ a lot of interactivity  ­ GROUP ASSIGNMENT    **keep track of your contributions to group project → WORK LOG  1 MARCH 2016  [CREATIVE CODING: WEEK 6]    PHOTOSHOP TUTORIAL    Resize  → image → image size (ideal size ​below 100k) ​     smoother download = lower file size → change resolution to make smaller    *final step before saving for web is resizing  ­ make sure to do this in PS not in processing    File → Export → Save for Web    JPEG does not support transparency (use PNG for this effect)    Photo: use PNG not GIF  ­ GIF is used for motion    *make sure you save in ​data folder f ​ or sketch  ­ otherwise your image will not show up     Resolution removes pixels per inch    *if you have a lot of image  ­ files should be smaller    optimize to file size      Parental if statement:  to assign key values  ­ first activate keyPressed functionality    EX: void draw() {  if (keyPressed){  if ((key == ‘R’) || (key == ‘r’)) {  *code in different casing → ‘R’ and ‘r’  Key = ‘char’ variable  ­ single key stroke is not a string  ​ ­ can only take s ​ ingle character    notation: single parens ‘   ‘   string notation: double parens “    “    void(keyPressed) { → ‘when’  if (keyPressed){ → ‘if’ ‘then’    keyCode = pre­assigned variables to particular keys  ​ ­ specifically tied to s ​ pecial keys  declare var type in ​for loop  ​ if not previously declared    for loop: repetition effect    conditional outside ​for loop  ​ ­ for loop i​ nside draw loop  ­ when roll off circle it will redraw white (selective resetting)    ​ *assign variables w ​ henever you can use lowest possible variable type  → maximizes memory space    LOOK AT BIG BOOK PAGES 89­100  text(key, 100, 200)  ­ shortcut; rather than ‘char’  ­ key = placeholder for char variable  Motion and Animation    easing: makes more fluid movement  ­ up or down movement ​gradually  ­ lower number = slower easing          Images  3 step: declare   void setup → load image   counter → slideshow sequence  ­ set parameters  ­ if(counter > 8)     counter = 1;    ​RESETS TO FIRST IMAGE  *​random sequence: void mousePressed() {      NEW TAB  objects ​must​ be in own tab  ­ because ‘subprogram’  ­ we will learn more about this later      NEXT WEEK:  1. slideshow presentation with group  2. demonstrate aspect of project  3. bring in photos you have taken (in slideshow)    IN CLASS EXAMPLES:              22 MARCH 2016  [CREATIVE CODING: WEEK 8]    **from now on → upload rough draft sketch @ end of class    This week: requirement = sketch with a function (that you invent)           Function has to take ​parameters  → (aka parenthesis FULL with variables)      Function: input it → spits something out    setup/draw = functions = also equal methods = can run functions within themselves    [Can you put a function call in your setup?] → YES    **put function in draw allows for interactivity    Standard frameRate = 60  ­ frameRate goes in setup()  ­ Unless you want to change it partway through     Void = a ​return notation  ­ Void means it will not return anything    Creating your own function:  1. NAME your function  a. Should follow the same format as all other functions we are used to   2. Create your function  a. All the code under the function you named will DEFINE what that function  is  3. Looks very similar to what we’ve been doing  4. Can call this function throughout code from this point                Translation function: moves things over    Adding x+= # → use to move objects incrementally    Universal variable declaration = at the top  ­ Can REDECLARE variables later on in sketch  ­ But does not live outside of the function  ­ Anything that is outside of the modified function will use the initial  value declared at the beginning                                                                                                                  [Does translate take floats or ints?] →     For loops limit the number of iterations  ­ For loops fully execute ; they do not wait  ­ It will execute the entire loop before its done    **mouseX and mouseY are float variables    Void keyPressed() {  Light = random(5, 255);  setup();  } //resets back to setup with a key press  29 MARCH 2016  [CREATIVE CODING: WEEK 9]    **QUIZ AT THE BEGINNING OF CLASS    QUIZ ANSWER:                                    Randomize colors:        OBJECTS    Object: defines a set of variables or functions that work together to do something    Object oriented programming always us to grab a bit of code we’ve written and put it  anywhere in our overall sketch  ­ Modularity in your programming  ­ Break in the linear reading of code    Objects: fields / methods  Main sketch: functions/ variables                                      Building an Object:    1. Declare ​class​ ­ with a capitalized name {  2. Declare ​fields  a. Int a;  b. Int b;  3. Define ​constructor  a. Defining ​Name​(int apples, int bananas) **two parameters in this example {  i. Articulate what these fields are and what their values are  1. a = apples;  2. b = bananas; }  4. Define m ​ ethods  a. void howMuchFruit() {  i. Define what will happen in this method  1. println (“You ate _” + a + “apples and _” + b + “bananas  today”); }  5. Close out entire class with a curly bracket }    **PUT YOUR CLASSES IN SEPARATE TABS    How to Write Main Sketch With Classes:    1. Class instance  a. Name fruit;  2. void setup() {  a. size(100, 100);  b. fruit = newName ( __ , __ ); **this is input ­­ user fills in # values  c. }  3. void draw() {  a. fruit.howMuchFruit();  }    **to just run once ­­ put call of method in setup                          5 APRIL 2016  [CREATIVE CODING: WEEK 10]    OBJECT REVIEW:    ­ Create c ​ lass   ­ Starts with curly bracket  ­ When ENTIRE class is done → end with another curly bracket  ­ Everything within these brackets is the function you created  ­ Variables within a class are called f ​ ields  ­ Define ​constructor  ­ Determine if there are parameters in class  ­ EX: float x, float y, float speed, int r, int g, int b  ­ Assign values to fields  ­ C​reate m​ ethods (known as functions in main code)  ­ Name method  ­ Give block of code to be called later in main code      ­ NEX​ T: integrate ​object into ​main sketch  ­ Declare class at top of main sketch  ­ If there will be two instances → declare 2 instances  ­ EX: Bounce ball1         Bounce ball2  ­ Parameter values correspond to fields in class tab  ­ call class forward in draw function via methods  EX: ball1.move();         ball1.bounce();                    ball1.display();    OBJECTS:                                                              MAIN CODE:  1. Create block 1. Declare class  2. Assign fields 2. Assign/ initialize  3. Constructor 3. Call (via methods)  a. Fields → values  4. Methods         ARRAYS:  Simply: a set of predefined variables of predefined single type  EX: int array; PImage array  ­ Any variable type is usable  ­ Can have a set of variables of any type   ­ In any one given array → only one variable type  ­ Notation to declare array = []    Notation:  ­ Int [] x = new int [ ]   ­ Can DECLARE, ASSIGN, and CALL in one line  ­ Things that can change:  ­ Variable type  ­ Name  ­ Values  ­ Syntax for hard­coded values = curly brackets  ­ EX: int [ ] x = {1, 2, 3, 4};    **​More you can use variables → more flexible your code will be    **Computer counting starts at 0  ­ Do not assume the jump from 0­1    **Be careful where you put arrays  ­ Infinite loops can crash your computer!!  ­ In setup → put noLoop() to check for this     **​constraint in for loop matches constraint for array    Strings → use double quotation marks    Hard­coded values → use curly brackets                                                                                              USING IMAGES:          **when integrating array with object → load images in constructor not setup!    SEE EXAMPLE BELOW:                                                                                                    HOMEWORK: ​MAKE AN ARRAY  1. FIVE ELEMENTS  2. ONE AUTHORED FUNCTION  3. USE FOR LOOP TO CONTROL YOUR ARRAY 


Buy Material

Are you sure you want to buy this material for

75 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Bentley McCaw University of Florida

"I was shooting for a perfect 4.0 GPA this semester. Having StudySoup as a study aid was critical to helping me achieve my goal...and I nailed it!"

Amaris Trozzo George Washington University

"I made $350 in just two days after posting my first study guide."

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."


"Their 'Elite Notetakers' are making over $1,200/month in sales by creating high quality content that helps their classmates in a time of need."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.