BTC640/ProcessingBasics

Lecture

We're going to learn the basics by implementing this: http://littlesvr.ca/processing/squarespiral.html

If you look at the code you may think this is so simple it's not worth your time, but this is a first implementation in a library you haven't used before, possibly in a language you haven't used much, so there's a lot to learn by implementing it.

Links

• http://processingjs.org/learning/
• http://processingjs.org/articles/jsQuickStart.html
• http://processingjs.org/reference/

Lab

You will modify and extend my first example. You can start from my code in the square spiral example above.

Make each segment (the short line drawn per frame) a different colour, specify the colour using numbers for R,G,B.

Continuing from that - pick 4 colours and make the lines on each side gradients of that colour. You can find a dynamic colour wheel online to help you understand what mixtures of RGB create different shades of the same colour. With red green and blue this is pretty simple, other colours (which are combinations of two or more of the basic three) will take a bit more work to figure out.

Degree students (optional for diploma students): add 4 dropdown fields to the page (not to the sketch) that will allow the user to change which side of the square gets which colour shade. You can select the same colour for more than one side. Remember that your .pde can have any javascript you like in it.

Add the same screenshot (or more than one if you like) to BTC640/ProcessingBasics/Lab2012-1. Please do not overwrite other people's screenshots, choose a unique filename.

Submit your .pde file and a screenshot of the fully rendered square.