Ramsey Nasser's Algo Page

Student website for the Fall 2010 Algorithmic Animation class at Parsons The New School for Design

Homework 8 - Flocking

Somewhat, kind of holiday themed. A Thousand Ribbons uses flocking agents to draw ribbon like trails behind them, changing in width depending on speed and color depending on angle.

Homework 7 - Particle-Particle Interaction

This funny little guy really wants to get out of the sketch window. A particle system that has translucent triangles drawn between its points, with perlin noise moving the whole thing and repulsion forces maintaining overall shape.

Homework 6 - Vector Fields

These vector fields are created from an image like the following:

Depending on the red and green values of each pixel, a vector is created using the following code:

for(int i=0,j=0; i < byteCount; i++,j=i/Bpp) {
  switch(i%3) {
    case 0: // red
      field[j].x = (pixels[i] - 128) / 32.0;
    case 1: // green
      field[j].y = (pixels[i] - 128) / 32.0;
    case 2: // blue
      // field[j].z = pixels[i] - 128;

Homework 5 - Particles

This is a very simple fireworks animation. It is made different by the trail that the firework leaves behind as it is fired from the ground. The firework particle maintains its state in an enum and switches from "launching" to "exploding" when appropriate.

To assign particles interesting starting positions using sin and cos, I drew the nuclear pictogram. Geometrically, the pictogram is nothing more than two concentric circles with the outer one missing slices. Each particle was initialized with an angle and a radius from the center of the window. Controlling these two parameters achieved the effect.

For example, the particles in the center circle are generated by this code:

for(int i = 0; i < PARTICLE_COUNT*2; i++) {
  float a = ofRandomuf() * TWO_PI;
  float r = sqrt(ofRandomuf()) * INNER_RADIUS;
  particles.push_back( new particle(ofGetWidth()/2 + cos(a)*r, ofGetHeight()/2 + sin(a)*r) );

The sqrt was Kurt's idea, and it makes the distribution more uniform. One of the outer slices is generated by this code:

for(int i = 0; i < PARTICLE_COUNT*5; i++) {
  float a = PI/3 + ofRandomuf() * 3*PI/8;
  float r = INNER_RADIUS + PADDING + sqrt(ofRandomuf()) * OUTER_RADIUS;
  particles.push_back( new particle(ofGetWidth()/2 + cos(a)*r, ofGetHeight()/2 + sin(a)*r) );

Which is identical except for calculation of the angle and radius.

Instead of rendering particles as dots, this project draws colored lines between them to create retro-looking folds. The particles are connected by drawing a line through them all. Every particle maintains a history of its positions. This is used to draw the trail. The code is not optimized at all, so it runs pretty slow, but it still generates cool stills!

Homework 3 - Whitney and Trigonometry

My Whitney tribute attempts to reproduce his awesome, multicolored text-coming-together effect.

A whole solar system! This sketch uses crazy nested matrixes so that each planetoid inherits the transformation of its parent. Takes advantage of the fact that everything is one color, so no depth checking needs to be done. In the lower right, you can see that planet's moon as a moon. Awesome.

This life-like dead fish works by drawing itself as separate segments, then rotating each segment around the axis perpendicular to the viewer's line of sight. Click to make the fish come to you.

Homework 2 - Movement, Shapers and Xenos

Point A/Point B. Self explanatory.

Fastest perceivable motion. Speed controlled by mouseX and mouseY, one takes big steps while the other affords more fine control.

To determine what was "visually perceivable" as motion, I set up a visually dominant, stationary focal point (the "Look Here" circle) and a muted moving circle. I felt that staring at the moving circle, my eyes were actively looking for movement and so the moment a pixel flipped on the rightmost edge of the circle, I would notice. This setup allowed me to measure perceivable motion in my peripheral vision which I felt was more "fair".

Homework 1 - Introduction

My name written in both English and Arabic, for fun. I used ofBeginShape and ofEndShape with ofCurveVertex calls between to draw the.

void testApp::mousePressed(int x, int y, int button){
  mousePoints[currentPoint++] = new ofPoint(x, y);
  // print points to console, copy in to code to save
  cout << "ofCurveVertex(" << x << ", " << y << ");\n";

To generate the shapes I wanted correctly, I maintained an array of ofPoints called mousePoints and built it up using coordinates from mouse clicks, printing out the relevant code as in the snippet above. I could then just copy and paste the ofCurveVertex calls into my code afterwards.