John Wang

Assignments

Assignment 1

• Asst01_16

Assignment 2

• [1]Using beginShape() and endShape(), create a composition with five or more vertices.
• [2]Using beginShape() and endShape(), create a composition with ten or more vertices.
• [3]Create an image different from A2-02, but using the same vertex data.
• [4]Write a function with one parameter and demonstrate it visually.
• [5]Write a function for drawing triangles and visually demonstrate its flexibility.
• [6]Write a function with three or more parameters and visually demonstrate its flexibility.
• [7]Create a dynamic animation using the cos() function as a generator for motion.
• [8]Create a dynamic animation using the cos() and sin() function as a generator for motion.
• [9]Move two visual elements across the screen using the random() function as a generator of movement. Give each element a unique nonlinear motion.
• [10]Create an event that begins when the mouse is pressed and ends when the mouse is released.
• [11]Create a responsive image that behaves differently when the mouse is moving and the mouse is dragging.
• [12]Create a button that changes the color of the background when it is clicked.
• [13]Program your moving elements from A2-09 but use classes to represent the two visual elements.

• [14]Create a subclass of one of the asteroids classes that adds a new capability. Some examples of what you could do: create a subclass of Rocket (or ArmedRocket) that shoots flame when the thrusters are fired and/or plays a sound when thrusters are fired, create a subclass of Asteroid that know when it's been hit (instead of doing this test in loop()), create a subclass of Asteroid that splits into two smaller Asteroids when it's hit.

Assignment 3

A3-01

• A3_01

Create a subclass of PImage that implements a mosaic( int blockSize ) method. The blockSize parameter specifies how big the mosaic block is (e.g. blockSize = 4 would mean the mosaic block size is 4 pixels by 4 pixels). The mosaic method should replace each block of pixels in the image (e.g. if blockSize = 4, each block of 4 by 4 pixels) with the average color value of the pixels in that block. Look at the Pixelate->Mosaic filter in photoshop for an example of what this image operation does. Demonstrate your new class by drawing an image with several different block sizes.

• A3_02

A3-02 Write a small app that demonstrates kinetic text. Your app should allow the user to type something and move the text around in some way while they type. For example, the user might type text on a line, but slowly the words or letters start drifting apart, or perhaps the line starts bending, or the words and letters flutter to the bottom of the screen, etc. Of course you shouldn't exactly copy any of the typographic in Processing or that you find on the web (though using such examples for inspiration, as a place to start modifying code, etc. is fine).

Assignment 4

This is a graphics assignment that will ask you to use a "widget set" of sliders, menus, and buttons to control the display. Widget Sets are a collection of classes that provide many of the standard Graphical User Interface tools in a convenient package. The Widget Set gives you a simple programming system, and lets you put together the GUI without having to worry about the details of how to manage the contents of menus and sliders.

For the Drawing editors, Add at least two sliders that control the properties of the marks that the user is drawing. If your editor draws in a random location, you must allow the user to now set the location of the mark that the user is now making. Add a button to clear the screen Add a pull-down menu that enables some sensible choice, such as shape to draw, or whether to draw filled/unfilled. You could use either the ControlP5 widgets or the Spring GUI widgets

• A4

// This code doesn't work on web broswer at moment. However this code should work in your machine with webcam,control P5 and JMyron library.

• Sample_1
• Sample_2
• Sample_3

Projects

Project 1 - Display the progress of time in a non-traditional way

• color

Project 2 - What graphical tools would you creates?

Part 1: Proposal

The aim of this project is to create drawing tools based on physical movement in order to explore the balance between person and tools. I would to utilize movement and gesture of hand to create visual images by webcam. Before next Thursday I would like to found out how to use webcam as a receiver. The outcome of this project will including 3 types of hand gesture that manipulate different functions of graphic tools. Creating images such as line drawings, geometry shapes and animation.

Part 2: http://www.sfu.ca/~jcwang/Iat_800_John_w/Project__2/applet/

// This code doesn't work on web broswer at moment. However this code should work in your machine with webcam,control P5 and JMyron library.

• Sample_1
• Sample_2

Project 3 - Build Something Cool!

Part 1 - Proposal

• proposal

Working Progress

- Nov,22,2009 - I have been playing around 2D Ribbons and color detection this week. The 2D ribbon originally from Eric Natzke’s. Color detection is made by James Alliban. This color detection sketch allows the user to select colours from webcam input. The input is then analysed and a rectangle is drawn around all pixels close to the chosen colour.

• 2D Ribbons
• Color Dection

Layout design *Layoutdesign

- Nov,27,2009 - Here are some of my codes for this week.

• color detection with ribbons
• color detection with music note

- Dec,04,2009 -

• Figure – 1 A screen shoot of Pdraw in color detection mode.

• Figure – 2 A bunch of curved ribbons is created by spinning movement.

• Figure – 3 A piece of drawing is created by 2D Ribbons brush with low transparency.

• Figure – 4 A psychedelic geometric drawing is created with random stroke brush.

Part 2

Investigating a physical drawing instrument tasted Synesthesia

• Paper
• Code

//// The webcam input doesn't work on web broswer at moment.