Moshe Ladanga

Initial Play: Ellipses in Code

leave a comment »

After burning my neurons on trying to learn coding by reading Ira Greenberg’s book on one hand and Reas’ & Fry’s book on the other, I decided to just play around with a piece of code to get the hang of the syntax of Processing.

So here are sketches that I modified from an example in one of the books and turned it into something that harks back to the strange 70’s experiments with optical phenomena (that sounds quite serious, but I assure you, these things are really just for fun:)) The original was a basic program for creating animated squares, and it does it by using arrays. I wanted to understand how an array works, because in the books, the video manipulation programs work with pixel arrays to manipulate and utilise video feeds. So here’s to all the pleasures of being a beginner- Cheers!

*(to see how it really is, just copy and paste the code into a Processing sketch and run it)

Simple expanding ellipse:

int num = 1;
int[] ex = new int[num];
int[] ey = new int[num];

void setup() {
size(1000,1000);
noFill();
}
void draw() {
background(0);
stroke(255);
noFill();
smooth();
strokeWeight(1);
for (int i=0; i<num; i++) {
ex[i] = ex[i]+1;
ey[i] = ey[i]+1;
if (ex[i]+ey[i]>1999) {
ex[i] = 0;
ey[i] = 0;
}
ellipse(500,500,ex[i],ey[i]);
}
}

Ellipse Pulse:

int num = 1;
int[] ex = new int[num];
int[] ey = new int[num];

void setup() {
size(1000,1000);
noFill();
}
void draw() {
background(0);
stroke(255);
noFill();
smooth();
for (int i=0; i<num; i++) {
ex[i] = ex[i]+1;
ey[i] = ey[i]+1;
if (ex[i]+ey[i]>1999) {
ex[i] = 0;
ey[i] = 0;
}
strokeWeight(ex[i]%9);
ellipse(500,500,ex[i],ey[i]);
}
}

Ellipse Pulse 02:

int num = 1;
int[] ex = new int[num];
int[] ey = new int[num];

void setup() {
size(1000,1000);
noFill();
}
void draw() {
background(0);
stroke(255);
noFill();
smooth();
for (int i=0; i<num; i++) {
ex[i] = ex[i]+1;
ey[i] = ey[i]+1;
if (ex[i]+ey[i]>1999) {
ex[i] = 0;
ey[i] = 0;
}
strokeWeight(ex[i]%9);
ellipse(500,500,ex[i],ey[i]);
strokeWeight(ex[i]%11);
ellipse(200,200,ex[i],ey[i]);
strokeWeight(ex[i]%13);
ellipse(700,800,ex[i],ey[i]);
strokeWeight(ex[i]%7);
ellipse(400,30,ex[i],ey[i]);
}
}

Ellipse Pulse 03: (This one got my groove on, hehe)

int num = 1;
int[] ex = new int[num];
int[] ey = new int[num];

void setup() {
size(1000,1000);
noFill();
}
void draw() {
background(0);
stroke(255);
noFill();
smooth();
for (int i=0; i<num; i++) {
ex[i] = ex[i]+1;
ey[i] = ey[i]+1;
if (ex[i]+ey[i]>1999) {
ex[i] = 0;
ey[i] = 0;
}
strokeWeight(ex[i]%9);
ellipse(500,500,ex[i],ey[i]);
strokeWeight(ex[i]%11);
ellipse(500,500,ex[i]-100,ey[i]-100);
strokeWeight(ex[i]%13);
ellipse(500,500,ex[i]-200,ey[i]-200);
strokeWeight(ex[i]%7);
ellipse(500,500,ex[i]-300,ey[i]-300);
strokeWeight(ex[i]%11);
ellipse(500,500,ex[i]-400,ey[i]-400);
strokeWeight(ex[i]%13);
ellipse(500,500,ex[i]-500,ey[i]-500);
strokeWeight(ex[i]%7);
ellipse(500,500,ex[i]-600,ey[i]-600);
strokeWeight(ex[i]%11);
ellipse(500,500,ex[i]-700,ey[i]-700);
strokeWeight(ex[i]%13);
ellipse(500,500,ex[i]-800,ey[i]-800);
strokeWeight(ex[i]%7);
ellipse(500,500,ex[i]-900,ey[i]-900);
}
}

Ellipse Pulse 04:

int num = 1;
int[] ex = new int[num];
int[] ey = new int[num];

void setup() {
size(screen.width,screen.height);
noFill();
}
void draw() {
background(0);
stroke(255);
noFill();
smooth();
for (int i=0; i<num; i++) {
ex[i] = ex[i]+1;
ey[i] = ey[i]+1;
if (ex[i]+ey[i]>1999) {
ex[i] = 0;
ey[i] = 0;
}
strokeWeight(ex[i]%9);
ellipse(screen.width/2,500,ex[i],ey[i]);
strokeWeight(ex[i]%11);
ellipse(screen.width/2,500,ex[i]-100,ey[i]-100);
strokeWeight(ex[i]%13);
ellipse(screen.width/2,500,ex[i]-200,ey[i]-200);
strokeWeight(ex[i]%7);
ellipse(screen.width/2,500,ex[i]-300,ey[i]-300);
strokeWeight(ex[i]%11);
ellipse(screen.width/2,500,ex[i]-400,ey[i]-400);
strokeWeight(ex[i]%13);
ellipse(screen.width/2,500,ex[i]-500,ey[i]-500);
strokeWeight(ex[i]%7);
ellipse(screen.width/2,500,ex[i]-600,ey[i]-600);
strokeWeight(ex[i]%11);
ellipse(screen.width/2,500,ex[i]-700,ey[i]-700);
strokeWeight(ex[i]%13);
ellipse(screen.width/2,500,ex[i]-800,ey[i]-800);
strokeWeight(ex[i]%7);
ellipse(screen.width/2,500,ex[i]-900,ey[i]-900);
strokeWeight(ex[i]%11);
ellipse(screen.width/2,500,ex[i]-150,ey[i]-150);
strokeWeight(ex[i]%13);
ellipse(screen.width/2,500,ex[i]-250,ey[i]-250);
strokeWeight(ex[i]%7);
ellipse(screen.width/2,500,ex[i]-350,ey[i]-350);
strokeWeight(ex[i]%11);
ellipse(screen.width/2,500,ex[i]-450,ey[i]-450);
strokeWeight(ex[i]%13);
ellipse(screen.width/2,500,ex[i]-550,ey[i]-550);
strokeWeight(ex[i]%7);
ellipse(screen.width/2,500,ex[i]-650,ey[i]-650);
strokeWeight(ex[i]%11);
ellipse(screen.width/2,500,ex[i]-750,ey[i]-750);
strokeWeight(ex[i]%13);
ellipse(screen.width/2,500,ex[i]-850,ey[i]-850);
strokeWeight(ex[i]%7);
ellipse(screen.width/2,500,ex[i]-950,ey[i]-950);
}
}

Then I wanted something more simple, so I returned to the initial sketch I made, incorporating floats for the factors that would affect the size of the ellipses. Maybe using the sin() is a long-winded way compared to using random(), but I think the resulting rhythm is more interesting.

Ripple 03:

int num = 1;
int[] ex = new int[num];
int[] ey = new int[num];

void setup() {
size(screen.width,screen.height);
noFill();
}
void draw() {
background(0);
stroke(255);
noFill();
smooth();
for (int i=0; i<num; i++) {
ex[i] = ex[i]+1;
ey[i] = ey[i]+1;
if (ex[i]>screen.height) {
ex[i] = -ex[i];
ey[i] = -ey[i];
}
strokeWeight(.50);
ellipse(screen.width/2,screen.height/2,ex[i],ey[i]);
float e1 = sin(ex[i])/.001;
float e2 = sin(ey[i])/.001;
ellipse(screen.width/2,screen.height/2,e1+ex[i],e2+ey[i]);

}
}

Eclipse:

I wanted to experiment with tying in some lines into the sketch, but still follow the overall aesthetic. I know it’s quite gloomy and gothic, but hey, we’re in London baby:)

*please click on the images to see in full, they’re barely seen in my equally gothic black page background

int num = 1;
int[] ex = new int[num];
int[] ey = new int[num];

void setup() {
size(screen.width,screen.height);
noFill();
}
void draw() {
background(0);
stroke(255);
noFill();
smooth();
for (int i=0; i<num; i++) {
ex[i] = ex[i]+1;
ey[i] = ey[i]+1;
if (ex[i]>screen.height) {
ex[i] = -ex[i];
ey[i] = -ey[i];
}
float e1 = sin(ex[i])/.009;
float e2 = sin(ey[i])/.0001;
if (e1+e2>screen.width+screen.height) {
e1 = -e1;
e2 = -e2;
}
strokeWeight(random(.1,100)%.3);
ellipse(screen.width/2,screen.height/2,ex[i],ey[i]);
strokeWeight(random(.1,100)%.3);
ellipse(screen.width/2,screen.height/2,e1+ex[i],e2+ey[i]);
line(random(1,1650),random(1,1050),e1,e2);

}
}

What struck me about thinking in math is that you go into this state where you have to to think conceptually, in the purest sense of the word. Since the processing sketch is like a perpetual machine, the data you feed in is not really data per se, but instructions. I know for the programmers out there this is a so what moment, but for a beginner like me, it is the point where I got it.

Advertisements

Written by mosheladanga

May 20, 2008 at 9:27 PM

Posted in Reflections

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: