Vicky

Assignments

Assignment 1

A1-01: Draw three lines.

A1-02: Draw five lines.

A1-03: Draw three ellipses.

A1-04: Control the position of two lines with one variable.

A1-05: Control the position and size of two lines with two variables.

A1-06: Control the properties of two shapes with two variables.

A1-07: Create a simple, regular pattern with six lines.

A1-08: Program your pattern from Assignment 1-07 using while().

A1-09: Draw a layered form with two new loops.

A1-10: Redo Assignment 1-05 using mouseX and mouseY as the variables.

A1-11: Draw two visual elements that each move in relation to the mouse in a different way.

A1-12: Draw three visual elements that each move in relation to the mouse in a different way.

A1-13: Move a visual element across the screen. When it disappears off the edge, move it back into the frame.

A1-14: Draw a visual element that moves in relation to the mouse, but with a different relation when the mouse is pressed.

A1-15: Using if and else, make the mouse perform different actions when in different parts of the window.

A1-16: Develop a kinetic image which responds to the mouse.

Assignment 2

A2-01: Using beginShape() and endShape(), create a composition with five or more vertices.

A2-02: Using beginShape() and endShape(), create a composition with ten or more vertices.

A2-03: Create an image different from A2-02, but using the same vertex data.

A2-04: Write a function with one parameter and demonstrate it visually.

A2-05: Write a function for drawing triangles and visually demonstrate its flexibility.

A2-06: Write a function with three or more parameters and visually demonstrate its flexibility.

A2-07: Create a dynamic animation using the cos() function as a generator for motion.

A2-08: Create a dynamic animation using the cos() and sin() function as a generator for motion.

A2-09: Move two visual elements across the screen using the random() function as a generator of movement. Give each element a unique nonlinear motion.

A2-10: Create an event that begins when the mouse is pressed and ends when the mouse is released.

A2-11: Create a responsive image that behaves differently when the mouse is moving and the mouse is dragging.

A2-12: Create a button that changes the color of the background when it is clicked.

A2-13: Program your moving elements from A2-09 but use classes to represent the two visual elements.

A2-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.

Up to accelerate, left/right to turn. And when the rocket hits the asteroids,they explode.

Assignment 3

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.

Up to increase the blockSize, down to decrease the blockSize.

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

[1]

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.

The standard programming style is to create the widgets you need, lay them out on the screen, and tell each widget what of YOUR functions to call when the user interacts with the widget. Your application must therefore respond to these events.

The assignment is to take your Project 2 and add controls that enable the user to make a setting and use that setting while drawing.

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.

Projects

Project 1

P1: Build a Cool Clock. Display the progress of time in a non-traditional way.

Project 2

THE PROJECT DESCRIPTION:

The contemporary computer scene is dominated by the graphical user interface (GUI). For almost every task, from manipulating text, imagery, sound, video, to configuring a computer's operating system (e.g. control panels), from searching for and organizing information (e.g. the web), to the process of programming (e.g. integrated development environments), there are special purpose GUI tools supporting the task through analogies to embodied interaction with physical objects. But no tool is neutral; every tool bears the marks of the historical process of its creation, literally encoding the biases and viewpoints of its creators, offering affordances for some interactions while making other interactions difficult or impossible to perform or even conceive. While the ability to program does not bring absolute freedom (you can never step outside of culture, and of course programming languages are themselves tools embedded in culture), it does open up a region of free play, allowing the artist to encode his/her own biases and viewpoint. What graphical tools would you create?

Create your own drawing tool, emphasizing algorithmic generation/modification/manipulation.

Explore the balance of control between the tool and the person using the tool. The tool should do something different when moving vs. dragging (moving with the mouse button down).

The code for your tool should use at least one class.

Part 1 Proposal

My inspiration of making this drawing tool is derived from an old Chinese puzzle called the Tangram, which consists of seven flat shapes. The objective of the puzzle is to form a specific shape (given only in outline or silhouette) using all seven pieces, which may not overlap, and it is also the purpose of my drawing tool to let users design their own interesting forms.

Here are the Tangram and one of the possible transforms.

http://www.sfu.ca/~xza57/xza57/IAT800/Project2/Part1/1.jpg

http://www.sfu.ca/~xza57/xza57/IAT800/Project2/Part1/2.jpg

Part 2

P2

Action1: use the left mouse button to click the tangram icon, the tangram form will be displayed in the drawing area. Action2: press the left mouse button and drag the mouse to move each form. Action3: press the right mouse button to rotate the forms clockwise. Action4: press the center mouse button to rotate the forms anti-clockwise. Action5: use the left mouse button to click the example image icon to see big example images.

Final Project

THE PROJECT DESCRIPTION:

Build Something Cool! In this project, you will build something of interest to you using the Processing system. The project consists of two parts, with weekly status updates until classes end.

Part 1 Proposal

Proposal 1

For this project, I would like to make a short film of visual design and it will consist of several scenes. In each scene, I would use graphics algorisms to determine the position and the movement of the objects. In addition, I would also add an adjustable sound track to the film so that the users can change the sound volume when they interact with the objects in the film through mouse and keyboard.

The task of the design is consists of two steps:

1. Make the film by using math library, animation library and geometry library.

2. Add sound track by using sound library.

The main challenge in my case is the implementation of the complicated formation of the objects. In terms of fallback, I think I could make the objects less complicated and I will make sure they can work properly.

[2]

Proposal 2

The project is a simple application that visually reflects different art forms. The idea is derived from a biological food chain.

Part 2 [3]

Use mouse left key to press the node which has a plus sign to extend it and use mouse right key to close it. Pay attention to the node of industrial design, press it to activate another interface.