Op-Art Handball
Thursday November 8th 8pm - 11pm
Machine Project, Los Angeles

As a result of our current exhibit we are in temporary possession of a giant wall in the middle of the gallery. We’re going to knock it down in a couple weeks at the close of the show, but before we do, we thought it would be “good” idea to invite people over to play handball on it.

To make things more fun, we are going to project animations (made by you) based on the work of famous Op Artist Bridget Reilly on the aforementioned handball wall.

So, here’s what you can do. If you want to play or watch, come to machine on Thursday Nov 8th at 8pm. If you want to submit an animation please read up a bit on Bridget Reilly then make something short and awesome. You can either email us a quicktime or a processing sketch and we’ll assemble it all into one video. Email it to machine at machine project dot com by noon on Wednesday Nov 7th.

more info > http://machineproject.com/2007/10/29/op-art-handball-andor-the-worst-idea-ever/

i did a few of these a few years ago using xscreensaver as a framework, never quite finished them. this is new though, done in the last couple of hours whilst half-watching House and CSI: Miami. more to come if i get the time.

// blimey o'riley
import processing.opengl.*;

public static final int WIDTH = 720;
public static final int HEIGHT = 720;
public static final int RADIUS = 360;
public static final int RADIUS_DELTA = 45;

public static final int SECTIONS = 720;
public static final int SEGMENTS = 72;
public static final int CIRCLES = 8;

Circle[] circle = new Circle[CIRCLES];

float[] sint = new float[SECTIONS];
float[] cost = new float[SECTIONS];

void setup() {
 size(HEIGHT, WIDTH, OPENGL);
 int radius = RADIUS;
 for (int i = 0 ; i < CIRCLES ; i++) {
   circle[i] = new Circle(i, radius);
   radius -= RADIUS_DELTA;
 }
 frameRate(25);
}

void draw() {
 background(255);
 translate(WIDTH >> 1, HEIGHT >> 1);
 for (int i = 0 ; i < CIRCLES - 1 ; i++) {
   for (int j = 0 ; j < SEGMENTS ; j++) {
     int outer = i;
     int inner = i + 1;
     int next = (j + 1) % SEGMENTS;
     float x1 = circle[outer].getX(j);
     float y1 = circle[outer].getY(j);
     float x2 = circle[inner].getX(j);
     float y2 = circle[inner].getY(j);
     float x3 = circle[inner].getX(next);
     float y3 = circle[inner].getY(next);
     float x4 = circle[outer].getX(next);
     float y4 = circle[outer].getY(next);
     // alternate black and white
     noStroke();
     if ((j & 1) == 0) {
       fill(0);
     } else {
       fill(255);
     }
     quad(x1, y1, x2, y2, x3, y3, x4, y4);
   }
 }
 // move circles (not outermost)
 for (int i = 1 ; i < CIRCLES ; i++) {
   circle[i].move();
 }
}

class Circle {
 private static final float RADIUS = 18;  // radius of centre movement. less than half RADIUS_DELTA
 float radius;
 float angle;
 float delta;
 float centreX;
 float centreY;
 public float[] x = new float[SEGMENTS];
 public float[] y = new float[SEGMENTS];
 
 Circle(int index, float radius) {
   this.radius = radius;
   float twist = 0.0;
   if ((index & 1) == 0) {
     twist = 15.0;
   }
   for (int i = 0 ; i < SEGMENTS ; i++) {
     float a = radians(i * (360 / SEGMENTS) + twist);
     x[i] = radius * sin(a);
     y[i] = radius * cos(a);
   }
   // setup movement (degrees)
   angle = random(360);
   delta = random(-4, 4);
   // don't move outer circle
   if (index != 0) {
     move();
   }
//  println("Circle[" + index + "]: [" + centreX + "," + centreY + "] R:[" + radius + "] t[" + twist + "]");
 }
 
 float getX(int i) {
   return x[i] + centreX;
 }
 
 float getY(int i) {
   return y[i] + centreY;
 }
 
 float getCentreX() {
   return centreX;
 }
 
 float getCentreY() {
   return centreY;
 }
 
 void move() {
   angle += delta;
   centreX = RADIUS * cos(radians(angle));
   centreY = RADIUS * sin(radians(angle));
 }
}

That's fantastic and perfect - please send more!

too late?

// more bridget riley. fragment3.
import processing.opengl.*;

public static final int WIDTH = 640;
public static final int HEIGHT = 480;

public static final int COLUMNS = 10;   // number of columns
public static final int DIVISIONS = 30; // number of stripes per column
public static final int OFFSET = 20;    // moving lines are lower

// height of each line
public static final float LINE_HEIGHT = (HEIGHT / DIVISIONS);
public static final float LINE_WIDTH = (WIDTH / COLUMNS);

Line[] lines = new Line[COLUMNS];

void setup() {
 size(WIDTH, HEIGHT, OPENGL);
 for (int i = 0 ; i < COLUMNS ; i++) {
   lines[i] = new Line(i);
 }
}

void draw() {
 background(255);
//  stroke(0);
 fill(0);
 for (int x = 0 ; x < COLUMNS ; x++) {
   // update wobbling
   lines[x].update();
   for (int y = 0 ; y < DIVISIONS - 2 ; y++) {
     float x0 = (x + .5) * LINE_WIDTH + lines[x].getX(y);
     float y0 = lines[x].getY(y);
     float x1 = (x + .5) * LINE_WIDTH + lines[x].getX(y + 1);
     float y1 = lines[x].getY(y + 1);
     if ((y & 1) == 0) {
       quad(x * LINE_WIDTH, y * LINE_HEIGHT, x0, y0, x1, y1, x * LINE_WIDTH, (y + 1) * LINE_HEIGHT);
       quad(x0, y0, (x + 1) * LINE_WIDTH, y * LINE_HEIGHT, (x + 1) * LINE_WIDTH, (y + 1) * LINE_HEIGHT, x1, y1);
       // lines for debugging. look quite nice themselves.
//        line(x * LINE_WIDTH, y * LINE_HEIGHT, x0, y0);
//        line(x1, y1, x * LINE_WIDTH, (y + 1) * LINE_HEIGHT);
//        line(x0, y0, (x + 1) * LINE_WIDTH, y * LINE_HEIGHT);
//        line((x + 1) * LINE_WIDTH, (y + 1) * LINE_HEIGHT, x1, y1);
     }
   }
 }
}

// could probably just be a 2d array
class Line {
 float[] x = new float[DIVISIONS];
 float[] y = new float[DIVISIONS];
 float alpha;
 float delta;
 float period;
 float phase;
 float radius;
 
 public Line(int i) {
   alpha = random(360);
   period = random(-10.0, 10.0);
   radius = (WIDTH / COLUMNS) / 3;
   delta = random(0.5, 4.0);
   phase = random(360);
 }
 
 public void update() {
   alpha += delta;
   for (int i = 0 ; i < DIVISIONS ; i++) {
     float angle = radians(phase + alpha + (period * i));
     x[i] = radius * sin(angle);
     y[i] = OFFSET + i * LINE_HEIGHT;      
   }
 }
 
 public float getX(int i) {
   return x[i];
 }
 
 public float getY(int i) {
   return y[i];
 }
}

Hey, that last one wasn't assaulting my brain enough, so I made a few very, very minor tweaks, sure to induce a headache in all and vomiting in some:

Code:

 // more bridget riley. fragment3.
import processing.opengl.*;
 
public static final int WIDTH = 1024;
public static final int HEIGHT = 768;
 
public static final int COLUMNS = 20;   // number of columns
public static final int DIVISIONS = 100; // number of stripes per column
public static final int OFFSET = 20;    // moving lines are lower
 
// height of each line
public static final float LINE_HEIGHT = (HEIGHT / DIVISIONS);
public static final float LINE_WIDTH = (WIDTH / COLUMNS);
 
Line[] lines = new Line[COLUMNS];
 
void setup() {
  size(WIDTH, HEIGHT, OPENGL);
  for (int i = 0 ; i < COLUMNS ; i++) {
    lines[i] = new Line(i);
  }
}
 
void draw() {
  background(255);
//  stroke(0);
  fill(0);
  for (int x = 0 ; x < COLUMNS ; x++) {
    // update wobbling
    lines[x].update();
    for (int y = 0 ; y < DIVISIONS - 2 ; y++) {
 float x0 = (x + .5) * LINE_WIDTH + lines[x].getX(y);
 float y0 = lines[x].getY(y);
 float x1 = (x + .5) * LINE_WIDTH + lines[x].getX(y + 1);
 float y1 = lines[x].getY(y + 1);
 if ((y & 1) == 0) {  
   quad(x * LINE_WIDTH, y * LINE_HEIGHT, x0, y0, x1, y1, x * LINE_WIDTH, (y + 1) * LINE_HEIGHT);
   quad(x0, y0, (x + 1) * LINE_WIDTH, y * LINE_HEIGHT, (x + 1) * LINE_WIDTH, (y + 1) * LINE_HEIGHT, x1, y1);
   // lines for debugging. look quite nice themselves.
//   line(x * LINE_WIDTH, y * LINE_HEIGHT, x0, y0);
//   line(x1, y1, x * LINE_WIDTH, (y + 1) * LINE_HEIGHT);
//   line(x0, y0, (x + 1) * LINE_WIDTH, y * LINE_HEIGHT);
//   line((x + 1) * LINE_WIDTH, (y + 1) * LINE_HEIGHT, x1, y1);
 }
    }
  }
}
 
// could probably just be a 2d array
class Line {
  float[] x = new float[DIVISIONS];
  float[] y = new float[DIVISIONS];
  float alpha;
  float delta;
  float period;
  float phase;
  float radius;
   
  public Line(int i) {
    alpha = random(360);
    period = random(-10.0, 10.0);
    radius = (WIDTH / COLUMNS) / 3;
    delta = random(0.5, 4.0);
    phase = random(360);
  }
   
  public void update() {
    alpha += delta;
    for (int i = 0 ; i < DIVISIONS ; i++) {
 float angle = radians(phase + alpha + (period * i));
 x[i] = radius * sin(angle);
 y[i] = OFFSET + i * LINE_HEIGHT;  
    }
  }
   
  public float getX(int i) {
    return x[i];
  }
   
  public float getY(int i) {
    return y[i];
  }
} 
 

I know this is old, but... if you want to further drunkeness, take the last version posted by Reas, and add:

Quote: