My Code is Broken, Now What?

Posted on November 7, 2012 by Mimi

Good Coding Habits and Debugging Techniques for the 21st Century

Finding yourself stuck for hours at a time on code that just won’t work?

Feel like you have a clear picture of what you want in your head but having trouble getting started capturing it in code?

The residents will be running a one-hour workshop on simple techniques to

Break down your ideas into more code-able chunks
Track down problems in your code (debugging)
Prepare your code to ask for help

We will walk through examples, build them, comment them and debug them together.

BYOBC (Bring your own broken code!) We’ll be working with code from here. (We will be working with Processing, but techniques apply to all programming languages.)

The workshop will take place during the first hour of the Monday ICM Help Session to run this workshop. Monday Nov 12th 2-3PM, Conference Room

ICM Help Session Week 8: Data

Posted on November 5, 2012 by Mimi

Today we mostly walked through how to get “live” data from the internet.

Strings are just an array of characters
Operations on Strings – loadStrings(), join(), split(), match(), matchAll()
Basic Processing Functions – http://processing.org/reference/

Getting Data

Formats

CSV: Comma Separate Files

Mostly stuff you download
Tables, spreadsheets
Line breaks represents rows of data
For each row, column values are separate by commas
A lot of “static” or periodically released data comes in this format (e.g. Goverment data that’s released once a year, etc)

XML: Extensible Markup Language

Looks like html, data is encapsulated in between “open and close tags”
<TITLE>Beauty and the Beast</TITLE>

JSON: Javascript Object Notation

Data format native to Javascript
Very user-friendly in terms of readability
Data stored as key-value pairs (e.g. Title: Beauty and the Beast)
Values can be Strings, Arrays (lists) or another Object containing key-value pairs
Most “live” constantly updated data is now released in JSON (e.g. Tweets, NYT, etc)

If you’re wondering about how to get data, try googling, API and JSON or API and XML with the the name of the service you’re interested in.

We focused mostly on JSON…

Processing doesn’t know about the JSON data format. So you’ll need to use Jer Thorpe’s library to parse any JSON you get from the web.

Jer walks through pulling data from the NYT by using the NYT API. At a high-level, here are the main steps:

DONWLOAD JSON LIBRARY: Put the entire “json” folder from the zip file into Processing>>libraries.
Go get yourself an API Key from the NYT. (You’ll need to log in with a NYT account.) The API key is basically a big long string of letters and numbers and it’s how NYT associates the data requests you’re making with you (in case you do something bad
Try running this example.

Resources

Your JSON data is going to come back as one continuous string of characters. Use this to format it nicely with line breaks and indentation so it’s easier to read.
Dan’s latest write up on working with text and data, updated for Processing 2.0.
Documentation on how to construct queries for getting NYT data.

Where to get Data

Putting Objects into Arrays

Posted on October 18, 2012 by Steve

Here’s a small Processing sketch to exhibit working with arrays of Objects. I’ve split the sketch up in to 2 sections, “setting” a Point to each position in the array and then going through the array and getting the object out of the array.

If you have any questions, please put them in the comments and I’ll do my darnedest to answer.

class Point { int year; int population; float rateOfChange; Point(int _year, int _population){ year = _year; population = _population; } } Point[] points; void setup() { size(400,400); points = new Point[10]; println("SET 'points'"); for(int i=0; i < points.length; i++) { int newYear = 1900 + i*5; int newPop = (int)random(30000); println(i + " " + newYear + " " + newPop); // Create a new Point instance and set its year and population Point newPoint = new Point(newYear, newPop); // Store newPoint into the points array. points[i] = newPoint; } println("GET from 'points'"); for(int i = 0; i < points.length; i++) { // Get the ith Point from the points array and store it as 'tempPoint' Point tempPoint = points[i]; // Print out attributes of tempPoint println(i + " " + tempPoint.year + " " + tempPoint.population); } }

ICM Help Session Week 4: Functions

Posted on October 1, 2012 by Craig

This week’s help session focused entirely on functions – What are they? How do we use them? And how can we write our own?

Here’s a link to all the CODE.

Arrow Sketch

arrow_01 - draw an arrow with hardcoded values
arrow_02 - substitue the hardcoded values with variables
arrow_03 - create new functions outside of the draw loop to draw and move the arrow, use a void function (no return value) and an int function (returns an integer value) to execute this
arrow_04 - add a second arrow into the draw loop

Snowman Sketch

snowman_functions – create a function to draw a snowman, draw 100 snowmen in a 10 x 10 grid, move the snowmen

Thursday’s ICM Help Session | CODE
We went over objects, passing data into an object’s functions from the draw() loop and even functions that return data so that one object can communicate with another object.

We made this very avant-garde sketch of two balls where one ball stops and goes whenever the other ball bounces off the top or bottom.

Geometry Help and More!

Posted on September 28, 2012 by Mimi

Next Session: Thursday Oct 11th 6-7:30PM Room 15

Are you waking up in the middle of the night wondering…

How do I draw more awesome curves?
How do I make stuff that goes in a circle-like manner (e.g. sun rays)?
How do I create “Photoshop” effects (e.g. drop shadows)?
How do I create more interesting motion effects?
How do I make cool patterns?

Come to the residents’ workshop on Geometry Help and More!

We’ll de-mystify some of Processing’s basic geometry functions to “do more with less code.”

We will begin with absolute basics and assume no prior knowledge of anything.

This session should be helpful for people working in JS too as we’ll cover concepts that translate easily to other languages.

Monday Oct 8th 1-2PM Conference Room

ICM Help Session Week 3: Loops, Modulo, Buttons and Sliders

Posted on September 25, 2012 by Mimi

Code Examples Here

How to make a Slider | Code

This is a great example for understanding the following Processing functions:

constrain() – How to make the slider button not fall off the ends of the slider.
Using variables to keep a bunch of shapes together relative to the mouse. (Our slider button is a complex shape comprising of 2 circles and 2 lines, all moving together relative to the y-location of the slider bar and the x-location of the mouse.)

Using Loops to Generate Patterns | Code

% modulo - Use division to create “regular” patterns, e.g. alternating rectangles by only filling a rectangle with “black” if the index number of the rectangle (in the loop) can be divided by 2 without a remainder. (e.g. 0, 2, 4, 6, 8, 10, 12, etc…)

Interactive Buttons | Code

We went over this example which shows 4 different kinds of interactive buttons working side by side.

Momentary click
Turning a button ON and OFF
Mouseover or Hover effect
Momentary click plus Mouseover or Hover effect

Concepts convered include:

Using booleans to keep track of on/off states
What’s the difference between mousePressed and mousePressed()?

mousePressed is a Processing variable like mouseX that tells you if the mouse button is pressed down.

mousePressed() is a function that runs code you write ONE TIME when you click the mouse.

This sketch illustrates it.

So then can you guess what’s the difference between keyPressed and keyPressed()?

Teaser For Next Week

How do you create a grid of on/off switches?
Approach 1
Approach 2 (with hover state)
Approach 3 (randomly placed cells with drawing via objects)

ICM Help Session Week 2: Variables, Conditionals, and Interaction

Posted on September 17, 2012 by Mimi

What we covered in Week 2′s ICM Help Session:

Here’s the example we created together during the help session.

Variables

What are they useful for? Storing information your program needs to run, especially information that changes over time (e.g. location of a ball).

- Declaring variables : Telling your computer you want memory to store information. (To make variables “global”, declare them at the top of the sketch outside of setup and draw)
- Initializing (Setup) : What values do you want your variables to start with when you run your program?
- Running (Draw): How do you want your variable values to change over time?

Conditionals

I want one thing to happen if and only if something else happens.

- && and || (ands and ors)
- >,=,

Random

- I want my ball to bounce around randomly. I want my ball to change color randomly.
- Why do “randomly” generated things look so evenly spread out?

Creating Counters

I want something to happen, but only for 5 seconds.

Mouse/Keyboard Interaction

- Interrupts the draw loop to run code when you interact with your keyboard or mouse
- mousePressed(), keyPressed(), etc…

STATE SWITCHES

Here is an example of how to use a boolean, conditionals, and mousePressed to create a simple state switch- changing the color of a circle from one to another.

Click the mouse over the circle!

Week 1 ICM Help Session, part 2

Posted on September 13, 2012 by Lia

Here are some helpful keyboard shortcuts:

CMD + R: runs the sketch
CMD + SHIFT + R: runs the sketch fullscreen
CMD + K: opens the data folder
CMD + T + selection: formats your code
CMD + / for (un)commenting out code
CMD + ] indents current line or selected text
CMD + [ outdents current line or selected text

Week 1 ICM Help Session

Posted on September 10, 2012 by Lia

GENERAL REFERENCES

tutorial in processing.org

ICM Git Repository – Examples from Class and More! – Great place to get started with HWs. – Click the “ZIP” file to download the whole enchilada.

Processing Reference – If you have a question that starts with, “How do I…?” check here first.

Instructions for uploading your homework to the web.

WHERE TO FIND CODE EXAMPLES WITHIN THE PROCESSING APP

Go to the menu File>>Examples…>>Basics.

DRAWING CURVES, ARCS

There were A LOT of questions about drawing curves

curves in processing.org (arcs, splines, bezier)
drawing in processing (coordinate system, simple shapes)
working with color

Anatomy of a Circle

Radians and Degrees, scanned from Getting Started With Processing (Reas, Fry 2010)

The Unit Circle

If you are more comfortable working with degrees, you can convert from Degrees to Radians with the radians() function. So instead of saying

arc(50, 15, 80, 80, HALF_PI, PI);

you might write:

arc(50, 75, 80, 80, radians (90), radians (180));

and it would be the same thing.

UPDATE (9/18) Dan Shiffman posted an example with different usages of arc() here.

PRINTING YOUR MOUSE COORDINATES TO THE CONSOLE

Drawing in Processing can be tedious if you always have to estimate where your coordinates should be. Wouldn’t it be great if you could use the coordinates of your mouse position to tell you where you need to draw?

Type this within the DRAW loop:

println (“X: ” + mouseX + ” Y: ” + mouseY);

now move your mouse pointer around the sketch and check your console for the coordinates!

Recursions

Posted on September 5, 2012 by Antonius

A student asked me how to do recursions (on the first week of ICM!!).

I asked her to go through the first 3 Processing tutorials, make something more simple, and taught her some cool tricks. I forget just how ambitious ITP students can get. But then I kind of went on a tangent and instead of writing the Processing JS tutorial I promised, I made this sketch. It’s a good test to see how well the ProcessingJS plugin works, I guess. If you don’t see anything, even after a couple page refreshes, let me know.

The Residents Blog

Category Archives: ICM