homework assignments

final project

assignment | code

For my final project I played with particle systems and vector fields. Each element uses imported drawings rather than the dreaded circles. The numbers 1 through 6 control the different larger graphics that represent a varied selection of vector fields. One can move the individual elements by pressing any of those numbers and so can try to create different behaviors in the particles.


algo | final project from clewis on Vimeo.

week 11

assignment b | code

try using the spring system (springs and springs with internal forces, etc) and combine them with something else we’ve covered, like vector fields, force emitters, etc. Can you make something really interesting combing springs and other forces?

here is a first attempt of playing around with the spring system. it would seem i was more interested at first just playing with the aesthetics of it. lots of circles, i know, i know, but it was just playing around.


day 11 | HW 1a from clewis on Vimeo.


assignment b.2| code

below is another attempt at playing with the spring code. I built the spring system based on the following diagram.

I did all kinds of stuff like having lines radiate from the particles, had ellipses based on the springs, added repulsion forces on timers so that they moved back and forth across the page, the mouse had an attraction force and would grab the first particle if the mouse was depressed -- this is what creates the entertaining stretching when the repulsion forces are moving the particles one way, but the mouse is keeping the first one in place.


algo | day 11 springs b from clewis on Vimeo.

Below is interaction with the original construct.


algo | day11 spring from clewis on Vimeo.

Below is how the shape first started. I then added supports through the exterior points since the shape would unwind itself.


algo | day 11 spring original from clewis on Vimeo.

assignment c |

Take a moment and play with soda constructor. http://sodaplay.com/ Save a good model and include a screenshot on your homework page. there is info here:


day 11 | HW c SodaPlay1 from clewis on Vimeo.
day 11 | HW c SodaPlay 2 from clewis on Vimeo.

assignment d | code

now, with that inspiration (hopefully) use the spring example with muscles (ie, springs that have their rest length changing) to make a creature that does something interesting.

This spring animation employs the slow increase and decrease of spring distance between particles. Using the same formation created for homework problem b, I then played with what it would be to expand these individual distances at varied rates and then bring it all back to the original shape. One issue that I discovered was when the particles would find themselves in the same space -- this causes the springs to vibrate out of control. I spent a great deal of time problem-solving this issue by adjusting the damping, the springiness, the rates at which the particles move, and also the level of repulsion that each particle would enact on another. It would seem that it is in an ok place now, but using the spacebar key to reset the particles and also using the cursor which has an attraction force on it both help to get the particles to calm down. Not exactly a creature, but was definitely


algo | day11 HWd from clewis on Vimeo.

week 10

assignment a | code

take a look at the flocking code, especially changing the parameters relating to flocking (see particle.cpp for the definitions of the radius and strength of the different forces). Can you make the flocking more interesting? Find the most interesting parameters (and remember, every particle doesn’t have to have the same values, they can be different) and then work to use this in an interesting composition. For example, can you include other forces in addition to the flock simulation to make it more interesting? Don’t forget about the other things you’ve learned, like the point recorder and sin/cos, etc.

assignment a.1 | code

I finally succeeded in getting the ATAN rectangle to work with a particle system. Very pleased about that. The size of the rectangle is also dependent on the angle used in the ATAN formula. This makes the rectangles going to the left ful sized and the ones going the right quite small. I added a randomness to the separation force, as well. This makes some (only some) of the particles incredibly jumpy to be near other particles. The color is based on the particle's position in the vector with the most recently added particles being hot pink. Lastly, There are little X's that lead ahead of the particles since they are drawn in the particle class rather than the rectangle class that has the xeno on it. This creates a more interesting tension between the two pieces as one flies ahead and the other accelerates to meet it.


algo | day10 HWb1 from clewis on Vimeo.
algo | day10 HWb from clewis on Vimeo.

assignment a.2 | code

This interaction was created by setting the damping to be very high for this particle system. The repulsion force set for each of the particles evens the spacing back out no matter what the mouse pointer does. The "sparkling" effect was created by making the color and size of the particles dependent on the force being acted on it. Obviously, the particles being moved by the mouse position show the most change, but the rest of the particles will continue to to sparkle as their individual repulsion forces settle them back in position.


algo | day10 HWb2 from clewis on Vimeo.

assignment a.3 | code

I'm pretty excited about this animation. Somewhere along the line, it finally clicked how I should incorporate the point recorder into the particle system. Just like the Atan, I felt like I was wasting a lot of time getting nowhere with it, but finally - triumph. To create this animation, I set an attraction force in the center of the screen and made the damping really low. This makes the particles pretty bouncy around the center of the screen. I then added the point recorder with rectangles of increasing size. There are some other little details in there, but that's the bulk of it.


algo | day10c from clewis on Vimeo.

assignment c

use the vector output code to make a poster or print. think about how the forces we have learned can be used to create structure and meaning, and then how capturing that vector wise could be employed in an interesting way. Make something super great. we will take a look after thanksgiving at the prints.

week 9

based on the code we covered in class (particles responding to attraction and repulsion forces, a grid of particles and force emitters) make 3 reactive compositions. Please try as hard as possible to make the particles and forces drawn more interesting then just circles on the screen. you can use the velocity length and angle to control an object, and draw trails with a point recorder, etc.

assigment a | code

So, I've been trying to do a number of different things to animate the particles. First of all, I was trying to add atan to the movement. I brought in the rectangle class and tried to borrow the code to get the rectangles to turn... not sucessful... at all. Oh well. In the meantime, I changed the colors, fill, size, etc. I was trying to get the shapes to be sensitive to the mouse, but unfortunately it again just didn't work out. I wanted to post this to show progress, but am going to begin anew with another example since I've kindof worked this one to the bone. I really wanted it to do the atan!


algo | day9 HWa from clewis on Vimeo.

assignment b | code

In this animation I was playing more with particles being part of a bezier curve. I seem to enjoy animations employing this. The particles are also shown as ellipses based on velocity. The color is based on x & y coordinates. I find some of the movements interesting - especially when I change the radius and strength or flip the force.


algo | day9 HWb from clewis on Vimeo.

assignment c | code


algo | day9 HWc from clewis on Vimeo.

week 8

assigment | code

Using the legos, and looking at this: create an animated object representing linear, non-linear, circular, oscillating or any (combination of) motion. Remember the switches we created in class using everyday metallic objects, and create an innovative switch to trigger or modify the animated object. Use electronics, mechanical components and other materials (cardboard, foam, paper, aluminum etc) and play with different controls (inputs) and outputs. Document your animation in video and pictures.

Ok, so this might not be characterized as my best work. I spent lots and lots of time fighting against a servo motor that was not working and then spent another equal amount of time constructing and deconstructing different lego contraptions. Ultimately, I ended up with this arrangement. Tried to add a little humor since I didn't quite capture fantastical movement.


algo | day8 HW servo motors & legos from clewis on Vimeo.

week 7

assignment a

Using the arduino, firmata, and starting from the code from day_7, recreate one of the animations you’ve done in your previous homeworks in a creative way. Use potentiometers and switches to control percentages, triggers and create a nice looking control panel of the screen animation. This is a small assignment, and is meant to get you to play with the variables in code using the potentiometer knobs etc.Document in pictures and videos, and note observations on the effect of playing with the variables.

This animation has taken my previous fireworks animation and added control by the potentiometer. The external input controls both the position on the screen along with the curve of the lines connecting the particles. I changed the line to a bezier and depending on the setting on the potentiometer, the curves are pulled differently. You can see this most visibly between the explosions in the top left corner and those in the bottom right.


Algo | day7 HWa from clewis on Vimeo.

assignment a, second try | code

Here was a second try at this assignment. I was able to incorporate a switch into the control panel.


algo | day 7 another try from clewis on Vimeo.

assignment a, THIRD try | code

Ok. Here is another try here. First of all, I based the animation on the spring system I developed for homework 11. Here's the breakdown: One potentiometer controls the downward gravitational sforce, one switch controls full screen, another potentiometer controls the color of the background. Frankly, I tried to control a lot of things (the distance between points, the damping, the rate at which they are moving) with the potentiometer, but it simply didn't work. So... I was able to improve with each try, but this is all I have at this point.... I'm pretty spent on this one.


algo | day7 hardware again again from clewis on Vimeo.

week 6

assignment a | code

Create 3 compositions using the vector field. These can be interactive or static (meaning, the VF can change or not based on user input) based on input from the mouse, keyboard, or video / camera (as shows in the last example). Think about drawing and using the particles in an interesting way (not just circles, but how do draw images, use atan2, etc). Play with the damping forces inside of the particles. Make an interesting and unique field for the particles to move on. Be sure to experiment with turning off the drawing of the field.

  • changed the force in the update to have a constant motion upwards within the particle class
  • added a loop to the particle update so that if the pos.y reaches below 1 then the particle will recycle to the bottom of the page again
  • changed the background
  • set an if statement in the draw function of the particle class so that if the velocity is a certain speed the solid circles change to outlined circles

    • I like the look of it, but it seemed to slow down a bit. Thinking it might not have liked the transparency being applied to every circle


    algo | day6 HW1a from clewis on Vimeo.

    assignment b | code

  • doubled the circles used in the particles and applied transparency
  • created a field of random sized vector field circles of various types that change when you click the space bar
  • continued with the method of making the particles loop back to the top of the page once they reach the bottom.
  • fought for a long time on this one. spent a great deal of time trying to get a photograph to apply vector fields, but that was not entirely successful. I think I sped along a little fast when really I learned more by experimenting with this.
  • the video for this is a little choppy. I closed all other programs, but it still didn't seem to want to run at full capacity when it was being filmed.
  • AND lastly, the animation looks completely lackluster in video. it was far easier to see the changes in animation when you're the one pressing the spacebar. oh well.

    • algo | day6 HW1b from clewis on Vimeo.

    assignment c | code

  • this one is essentially example b, but with some minor changes. for one, I shrank the window size -- make the video file a little smaller. not sure why I was working with such a large window and all these darn particles, but it has a tendency to slow down the video a great deal.
  • i started the setup the same way, but made the initial vector field dead center in the screen and a black hole of sorts. once i click the space bar, though, the vector fields change to a smorgasbord of random fields.

    • algo | day6 HWc from clewis on Vimeo.

    assignment d | code

    • week 5

    assignment a | code code

    create a looping fireworks animation (non interactive). You will need to reset or restart particles every so often. (and then we’ll figure out how to save this as a screen saver for your mom!)

    Not exactly fireworks... although the particles are in there. I started playing with the shape of the particles -- making them into little triangles. I tried to rotate the little guys, but it did not exactly work out. Instead I just continued to play with manipulating force. It came out with a kind of unsettling animation, but kept it for effect. I added the lines to play with the sunburst effect. One vertex of the line was positioned at the initial (x,y) point and the other is attached to the (x,y) of the particle.


    algo | day5 HW1a from clewis on Vimeo.
    algo | day5 HW1b from clewis on Vimeo.

    assignment b | code

    since you know how to position things in a circle using the formula: x = x_orig + radius * cos (angle); y = y_orig + radius * sin (angle); think about how you could use sinusoidal information to start all the particles with some interesting positions / velocities. Instead of using random, use sinusoidal information (in any way you want) to make the sarting positions/velocities of these objects interesting. can you use sin/cos to make the movement or drawing of the particle more interesting?

    In this animation I was trying to recreate the floating feeling of bubbles. I played with changing the colors with each click, but ultimately ended up with a more simple blue and white animation since the changing colors began to make my head hurt. The lissajous was created through manipulating the sinusoidal information, of course.


    algo | day5 HW2 from clewis on Vimeo.
    algo | day5 HW2 sinusoidal particles from clewis on Vimeo.
    algo | day5 HW 2b from clewis on Vimeo.

    assignment c | code code

    description

    my commentary


    algo | day5 HW3a from clewis on Vimeo.
    algo | day 5 HW3b from clewis on Vimeo.

    assignment d | code

    hook up the memoryRect code to a particle so that the particle draws a trail of where it has been. see if you can make this trail fade out (like a comet) : ) Use alpha or some other method…

    my commentary

    assignment | code

    I am using velocity and position in the mouse examples w/ particles. Can you move a step further and figure out a creative use for acceleration? You can calc accel for the mouse. Figure out some novel use for it…

    my commentary

    week 4

    assignment a | code

    using the point recorder code, create multiple point recorders insted of just one. Every time you draw, create another point recorder. Create a clear function. Can you use these multiple point recorders to create something interesting ? shoot a short video.

    At the moment, my solution to this assignment looks like a drawing canvas. The second video incorporates color into the mix. I placed the ofSetColor() within the clear function for this one. I spent a little more time thinking about how to arrange the ofSetColor() function so that the color would not change for all of the lines. Set in the for loop which draws all of the point recorders, the color changes slowly in gradient. It is not stable for infinity, however -- it begins to stay at orange at a certain point, I think.


    Algo | HW4_1 Point Recorder from clewis on Vimeo.
    algo | HW4_1b Point Recorder from clewis on Vimeo.
    algo | HW4_1c Point Recorder from clewis on Vimeo.

    assignment b | code

    right now the playback of the point recorder is just one point (at time t), can you create a second point (at time t-1, for example) as in Scott Snibbe’s motionsketch ? It would be nice to use the total duration to figure out to space out multiple playbacks so they are equally divided.

    To create this animation I changed the point recorder to create circles instead of vertices. Also, I layered on another circle and set the timing a little differently by controlling the increments within the for loop.


    algo | day4 HW2a Point Recorder with Changed Timing from clewis on Vimeo.

    assignment c | code

    in the last example, point recorder is use to control the property of sound synthesis. can you use it to control some other properties of media, like playback position of a movie or opacity of some images? Think about all of the parameters you can get from the playback unit and how you can use them. Make some playful, creative system.

    week 3

    assignment a | code

    make a composition using the animation techniques that is a tribute to john whitney |

    I continued with the circle motif for the John Whitney-inspired animation. I played with sin and cos to control size and speed.


    algo | day3_HW1 John Whitney from clewis on Vimeo.

    assignment b | code

    Since we talked in class about this idea of a relationship between sound and visual synthesis (and harmony) find a piece of music (can be any duration as long as there are multiple notes - a short snippet, or a long song) and make a composition that is a visual equivalent of that sound. Think about how the make a visual equivalent using the techniques we talked about this week.

    So... I got caught in the web of perpetual revisions. I experimented with a number of different movements, but frankly they were all a bit off.

    assignment c

    try to use sin and cos to emulate a natural phenomenon (ie, something you see in the natural world). be sure to provide some documentation (video / picture / text) of what this phenomenon is.

    Attempting to animate the motion of waves, I played with an array of bezier curves. Although not exactly like video of waves, I feel like the motion and the speed really gives the feeling of it. Here's the link to video of waves

    assignment d | code

    make the lissajous example work based on mouse motion. it would be a *smart thing* to convert the mouse position into floating point numbers between 0 and 1. (for example, float pct_x = (float)mouseX / (float)ofGetWidth() ). we LOVE numbers between 0 and 1. allow mousex to control the speed of the signal (ie, what angle is multiplied by) to the x half of the circle code and mouse y to control the signal to the y portion of the circle equation. take a screen shot of the best looking combination.

    assignment e | code

    extend the xeno / atan2 code, making a creature which follows the mouse. think of how you could use sinusoidal animation techniques to give the object some “life” - breathing, blinking, etc.

    week 2

    assignment a

    fastest non moving speed | code

    Evaluation: I changed the speed setting down to 0.000005f. This variable was what slowed down the movement to a near standstill. It finally finished the span after about 50 minutes and change.

    minute 0::::: minute 0 :::::
    minute 15::::: minute 15 :::::
    minute 32::::: minute 32 :::::
    minute 40::::: minute 40 :::::
    minute 48::::: minute 48 :::::
    minute 52::::: minute 52 :::::

    assignment b

    fastest still perceptible speed | code

    Evaluation: I found that 0.047f was the fastest speed I could set the box while continuing to have smooth animation.


    Algo | Fastest Moving Speed from clewis on Vimeo.

    assignment c

    click to change pta and ptb | code

    Evaluation: This one turned out to be successful, I think. The motion is what was requested, however I would like to start thinking more along aesthetic lines. I ended up leaving this one with exactly the same black background and green box.

    assignment d

    shaper controls something else besides position | code

    Evaluation: I had some fun playing with this one although I would have like to have taken it further. I played with some transparency and tried to set another box inside as well as making the center of the box be 0 in terms of controlling the motion. In the end, I left it as a successful solution to the assignment, but one that could still be expanded upon.

    assignment e

    multiple xenos | code

    Evaluation: There was certainly a moment when I thought I just might not get this one. Well, I think that I did. Yay. In addition, I varied the color and staggered the boxes. This one is a fun worm.

    week 1

    assignment a

    videos of linear and nonlinear motion


    algo | LinearNonLinear Motion Tests from clewis on Vimeo.

    assignment b

    flip book

    evaluation : next time I would set out to find footage with easier shapes to follow. there are some moments when you can see a fish moving through the masses, but unfortunately it can get a little muddy during other portions.


    algo | flipbook from clewis on Vimeo.