Every Friday from 9:05-10:55, Micah will run a lab in the IDT lab. Sometimes this will be an open lab where Micah will be available to answer questions as you work on your projects, and sometimes he will give presentations on specific features of Processing, Java, or the class libraries.
We will use Processing, an environment built on top of Java. All code you write in Processing is Java, but Processing provides a number of built in classes that make graphical operations easy, as well as a programming environment that supports script-like Java programming (that is, easily being able to write snippets of code and immediately execute them). Processing has been installed on the Macs and PCs in the IDT lab. Additionally, it will probably be useful to have Processing on your own machine. Please download it here (Processing 0125 beta). Documentation can be found here.
Later in the class we will look at "raw" Java, that is, what you need to do to make stand-alone Java programs that don't use Processing. This will also help us to understand how Processing works, and how you might build something like Processing yourself.
|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.
|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 draw()), create a subclass of Asteroid that splits into two smaller Asteroids when it's hit.
|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: 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 examples 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).
| A4-01: Use HTMLParser or Swing to follow links on a
webpage recursively and visually represent this process. The recursion
should run at a depth of at least four. Ideas: use IMDB to create a
link between actors via their movies (Six Degrees of Kevin Bacon!) and
display their headshots. Do a Google search of a term, then a Google
search of the first word in the description of its top result, then a
Google search of the first word in the description of its top
result...(or do it with Google Images and their image names or alt
tags). Go to a random Wikipedia article and follow the first link to
another Wikipedia page in its article content, go to that page and
follow the first link to another Wikipedia page in that article
content, etc. Or you can play with the CNN example. Your recursion can
be as narrow or broad as you see fit (follow one link on a page and its
children vs. following all the links on a page and all their children),
but make sure to balance breadth of recursion with processing speed for
a meaningful experience.
A4-02: Using Switchboard, create a hybrid search engine that returns results from multiple web services upon the submission of a search term by a user. For example, if a user enters "Halloween", a set of results from del.icio.us, AllMusic, and Amazon (in the form of text and/or images) will appear relating to Halloween. You can determine how you want the results to appear, or you can allow a user to choose which web service he or she would like to query.
due Friday, November 9th
| A5-01: Modify image collage to,
instead of grabbing images, grab headlines from several news sources
and display them. This gives you practice in looking at the html source
for multiple sites (e.g. New York Times, CNN), determining how a piece
of information is represented, and writing the parse code to grab that
piece of information.
A5-02: Write an html parser that looks for keywords (you pick the keywords) in the text (not within a tag) of a page and counts how many times different keywords appear. You can imagine that this might be the beginning of an information visualizer that visualizes pages as a function of different keywords that appear.
due Friday, November 30th
| A6-01: Modify the Braitenberg
vehicle so that it has a different visual appearance.
A6-02: Create a vehicle that responds to multiple sense modalities. The best way to do this is to overlay multiple sensory fields, each with its own source types (e.g. sound, light, heat, etc.).
A6-03: Make vehicles also be sources, so that vehicles respond to each other. One way to do this is to place a moving light source on each vehicle. You can choose to make the light source visible, or sum the moving sources into an invisible sensory field (if you don’t want glowing circles or some such appearing around vehicles).
A6-04: Have your vehicles interact with the environment in some way. For example, when a vehicle runs into a source, perhaps it destroys the source. Other vehicles could create sources. Vehicles could lay trails that other vehicles respond to. A vehicle could have multiple ways of moving (flying under certain conditions, moving on the ground under other conditions, etc).
From the central heartbeat of the central processor, to the obsessive timestamping of files and blog entries, to ever present clock displays, time is a fundamental feature of computation. Display the progress of time in a non-traditional way. It is OK to consider large temporal scales (e.g. seasons), but smaller temporal scales should also be displayed (or be available to be displayed, perhaps as a function of user input). You may make use of mouse input if you wish.
* Industrious Clock. The conceptual strategy is to re-present the standard, numeric presentation of time in a non-traditional medium (video representations of paper and pencil). http://yugop.com/ver3/stuff/03/fla.html
* Maeda's Clocks. A quicktime video of several screen-based clocks developed by designer John Maeda. The conceptual strategy employed in this series of clocks is to visually redesign standard hands or numeric representations of time. http://dm.lcc.gatech.edu/~mazalek/courses/fall07/lcc6310/resources/example_maeda.mov
* Last Clock. The conceptual strategy is to take slices of a live video feed and arrange them in concentric circles representing seconds (outer ring), minutes (middle ring) and hours (inner ring). This way a trace of what has been happening in front of the camera is left behind. http://www.lastclock.co.uk/
* Pingpong Clock. The conceptual strategy used here is to tie the passage of time with events in an auto-played game that unfolds on screen. In this case, the players score the time in a game of pong. The left player scores the hours, and the right player scores the minutes. http://www.burovormkrijgers.nl/ http://dm.lcc.gatech.edu/~mazalek/courses/fall07/lcc6310/resources/pong-clock.mov
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, dreams, and political realities 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 climb up and down the dizzying tower of
abstraction and encode her own biases, dreams and political realities.
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
Drawing Tool Examples:
|Literary machines are potential
literature, procedurally producing textual traces in response to
interaction. Examples of literary machines include interactive fiction,
nodal hypertexts, interactive poetry (often with animated typography),
and chatterbots. Create a literary machine. The literary machine must
include algorithmic elements, such as animated typography, generated
text, conditional responses as a function of the previous interaction
trace. It must respond to external inputs (e.g. user interaction). Your
piece may include conjunctions of text and imagery.
|Hypertext was conceived as a computer-aided form of reading and writing whose structure matches that of the human mind (a tangled web of association), thus enabling humans to make sense of the exponential growth of knowledge experienced in the 20th century. The World-Wide Web, while a rather anemic implementation of hypertext, makes up for these deficiencies by providing us a with a sneak preview of what it might be like to have a truly global repository of knowledge. But making sense of the world is not just a matter of structure, but of process, of the dynamic construction of meaning. And as we've been discovering together, computation is fundamentally a process medium. What would you do to the web? Create an applet that dynamically does something to one or more web pages (e.g. collage, systematic distortion, re-layout, ironic superposition, etc.).|
field of artificial intelligence (AI) builds computational systems that
model the intelligent behavior of people and animals. AI architectures
can be extremely generative, able to produce complex responses to
environmental changes, including user interaction. In computational
art, AI approaches have been used to build work ranging from robotic
sculpture, to drawing and painting generators, from generative
interactive stories to music composition. In the popular art form of
computer games, AI approaches are used extensively to build tactical
and strategic opponents, non-player characters, and player modeling
systems. In this project, build a collection of simple AI agents that
interact with the user, each other, and their ecosystem, to give the
illusion of life. You can build upon the provided framework of
Braitenberg vehicles, which can produce complex agent behaviors, or
code your own simulation.
Provided: Braitenberg starter code
While computer-based interactive games (a.k.a. video games) have been a pop-cultural force since the arcade scene of the
late 1970s and early 1980s, in recent years video games have been recognized as a major emerging art form, poised to have
as much cultural impact on the 21st century as cinema did on the 20th. The game industry is making Hollywood-sized amounts
of money, with designers of the most popular games achieving a geeky sort of celebrity. Museums and galleries are offering
exhibitions of “art games”, computer-scientists are beginning to treat games as technical objects worthy of serious
attention, and in humanities departments around the world, games studies is a hot new topic. What kind of game would you
create? Create a simple game. Your game should be a "regular" Java applet (i.e. do not use Processing).