Course Home | Documentation | Lab Hours/Tutoring | Projects | Quizzes | Schedule | Submit
Saint Louis University

Computer Science 1050
Introduction to Computer Science: Multimedia

Michael Goldwasser

Spring 2016
Dept. of Math & Computer Science

Module 11 : Arrays

Topics

New processing syntax:

Resources

In-Class Activities

Try to recreate any of the following sketches.

Recolor as a Group
In this demonstration, every time the mouse is pressed, a 50x50 square is drawn with its center at the mouse location. In addition, whenever a key is pressed, a new random fill color is chosen and all of the squares are redrawn with that new color. Because of our needs to redraw all of the squares, we need to keep track of where all of those squares were originally drawn.

Our internal storage consists of the following two global arrays for max of N=1000: 

int x[] = new int[N];  // x[j] is x-coordinate of center of square j
int y[] = new int[N];  // y[j] is y-coordinate of center of square j
and then an explicit count of how many squares have thus been drawn.

Implementation: code

Drawing a Polygon
In this sketch, we allow the user to interactively define a polygon by clicking on vertices. While the process is underway, we display the partial polygon as an unfilled polyline with circles drawn at each vertex. If the user clicks over the first vertex, that designates that the polygon should be closed. At this point, we remove the circles and draw the final polygon filled with orange. After that point, further mouse presses are ignored.

For convenience, our implementation has an additional feature that it resets if the key 'r' is pressed.

Implementation: code

Drawing a Polygon with Guideline
This sketch adds one additional feature to the previous version. It includes a live view of a new edge that would be added to the polygon if the user were to click at the current mouse location. (Although this only happens after the first vertex has been chosen.)

Implementation: code

Clickable Circles
In this demonstration, 100 circles of radius 25 are drawn, with randomly chosen positions and colors. The user can click on a particular circle to recolor it. Note that we take care to make sure that when circles overlap, a mouse click only effects that circle which is visible at the clicked location.

Our internal storage consists of the following three global arrays for N=100: 

int x[] = new int[N];     // x[j] is x-coordinate of circle j 
int y[] = new int[N];     // y[j] is y-coordinate of circle j
color c[] = new color[N]; // c[j] is color of circle j

For convenience, typing 's' will shuffle the scene.

Implementation: code

Dragable Circles
As a variant of the previous sketch, in the following we wish to allow the user to click and drag an individual circle to change its location. (The circle's "depth" relative to other circles should remain unchanged).

The key to implementing this is:

  1. At the moment the mouse is first pressed, identify which (if any) circle is the one that should be dragged. We recommend maintaining an integer variable "current" which is the index of the currently selected circle, and to have it be set to -1 to designate that no circle was selected.
  2. Within mouseDragged(), if there is a currently selected circle, change its coordinates based on the difference between the current and previous mouse locations.

Implementation: code

Dragable Polygon
Apply the dragging technique from the previous sketch to the earlier sketch that allows the user to create a polygon. In the following sketch, once the polygon has been completed, the user can go back and drag individual vertices to change the shape of the polygon. (For convenience, we still allow 'r' to reset the entire sketch.)

Implementation: code

Rainbows
If it were just for the geometry of the following rainbow, we would not need arrays but could figure out the pattern of the arcs using a standard loop. But there is no particular mathematical pattern to the choice of colors for the seven bands of the rainbow. So instead, we rely upon the following explicit declaration of the desired colors: 

color[] palette = {color(255, 0, 0), color(255, 127, 0), color(255, 255, 0),
                   color(0, 255, 0), color(0, 0, 255),   color(111, 0, 255),
                   color(143, 0, 255)};
Now, use a loop that goes from 0 to 6, drawing the red arc during pass 0 using palette[0], the orange arc during pass 1 using palette[1], and so on.

Implementation: code

Twinkle Twinkle Little Star
In this sketch, we start by randomly picking the location of some number of stars. To provide some animation, we decide to randomly vary the "brightness" of each star, which is modeled by allowing some random level of transparency. However, if every star picked a random level of brightness in every frame, its too chaotic.

Instead, we want to have most stars keep their brightness level stable, and thus we need to store those values within an array. Then, we can provide some controled variety by picking a few stars at random during each frame and to pick new brightnesses for those stars.

To get you going, here is the basic sketch of the house without stars.

Implementation: code

Stretching Ellipses
In an earlier module, we had an exercise in which we allow the user to "stretch" the shape of an ellipse while dragging the mouse. Because the outline of the shape changes and is not yet set, it was necessary to repaint the background at each step. At the time, we only allowed one ellipse to be drawn because we had no way to keep track of multiple ellipses while repainting.

In this version, we use arrays to keep track of the relevant parameters for each ellipse, allowing us to repaint all previous ellipses while stretching the boundary of a new one.

Adding to the functionality, we allow the following keyboard actions:

Implementation: code

Fireworks
We use a simple version of what is known as a "particle system" to create a model for fireworks.

When the mouse is released, we spawn 200 particles at that location, each with a randomly chosen angle, speed, lifespan, and color. We let those particles continue until all of them exceed their lifespan (measured in number of frames). Once that simulation is done, then a new mouse release is allowed to spawn a new explosion.

In our implementation, we are using a bit of low-level trigonometry for the angular motion, but that could otherwise be implemented using Processing's transformations (e.g. rotate, translate, scale).

Implementation: code

Sample Quiz Question

Michael Goldwasser
CSCI 1050, Spring 2016
Last modified: Thursday, 18 February 2016
Course Home | Documentation | Lab Hours/Tutoring | Projects | Quizzes | Schedule | Submit