Project #2

Elaboration later. Time sleep.




Finally got OpenGL to work. Reinstalled Eclipse and downloaded a different C compiler. Still can't get gltools to work.

Project #1

For the first project of the semester, I have chosen to recreate the Cell Cluster Circle design by Anthony Mattox as seen here:

http://www.anthonymattox.com/cell-cluster-circles

Mattox's design is characterized by its apparently random distribution of small circles within the boundary of a much larger circle. The closer a circle is to the center of the design, the less its saturation, although all circles seem to be the same hue, and the most visually interesting thing about the design (at least in my in opinion) is that none of the circles overlap.

-APPROACH-

I approached this problem by first listing the various specifications that define the design and assigning an order of importance. The list looked something very similar to this:

1. Random Circles within a circular boundary
2. No circles overlap
3. Circles appear to completely fill the space with almost no white space
4. Circles lose saturation as they appear closer to the center

I decided to treat circles as objects and created the myCircle class. A myCircle is declared with an x,y coordinate position and a radius. The circle can be drawn by calling its myCircle.draw() function. A myCircle object has two methods for checking boundaries: isWithin(myCircle c) and touches(myCircle c). These functions return boolean values and make specifications 1 and 2 above very quick and easy to calculate.

The program initializes by creating a large myCircle right in the center of the window. Everytime a new circle is created, it calls the isWithin(myCircle c) method to make sure it is inside this circle. It then begins checking every previously added circle within the larger circle.

Any circle added to the design is stored in a Java LinkedList. I chose a LinkedList over an array because the nature of the program makes it difficult to predict the exact number of circles that can be added, and I didn't want to have to go around redefining my array everytime a new circle was added.

Once I got my program to add random circles within the large boundary circle, I decided to make sure the program was packing in as many as possible. Up until this point, I had been using a for loop to create the random circles with an arbitrarily smallish number (about 500 or 1000). To fill in the large amount of white space those smaller numbers made, I increased the size of the for loop dramatically (about 10,000 or so). I found that this would make the program hang up almost indefinitely since the way it works, the counter only increases if a circle actually passes its test to get in (in other words, 1000 iterations means 1000 circles are added to the list, not just 1000 circles are attempted to be added). To solve this, I created another counter that would count how many attempted circles it takes before a passing circle is created. If this number exceeds a certain amount, the loop breaks. This number (nMax in the code) is currently set to 100,000. With the number of loop iterations at 15,000, the program usually returns a cell cluster of around 6,000 circles (give or take 1,000) and takes roughly 5 minutes to compute (estimated, I haven't actually timed it). I also found that restricting the size of each circle helped.

Now that the program can draw a full, tight cluster of circles, it's time to tackle coloring. I started out with my own, easy version. I added R, G, and B integer values to the myCircle class and made it so that every time a circle is made, it assigns a random integer value to these variables. This made each circle come out with a very colorful, rainbow circle. Very neat, but not what I was aiming for. Since the Cell Cluster Circle by Anthony Mattox had circles of the same hue with decreasing saturation, I made some global R, G ,and B values. Then, in the draw() method, I created a gradient value by dividing the distance between the center of each individual circle and the center of the large boundary circle from the radius of the boundary circle. I then multiplied this value to each of the R, G, B values and created a gradient effect very similar to the one seen in Anthony Mattox's design. Anytime I wanted a different color, I had to change the R, G, B values manually, but the results were fairly close.

-RESULTS-
Here, finally, are some of my results.

Homework #4

For this program, I already had a MyMatrix class for Scientific Computing that I made that could handle the matrix multiplication, so I used that.

import processing.core.*;
public class Homework4 extends PApplet{
int x0=100;
int y0=100;
int x1=200;
int y1=175;
int x2=330;
int y2=175;
double rotDeg = 20;
MyMatrix test;

public void setup(){
size(410,410);
background(255);
stroke(0,0,0);
//triangle(x0,y0,x1,y1,x2,y2);
//myRotate(rotDeg);
//triangle(x0,y0,x1,y1,x2,y2);

for(int i = 0; i < 18; i++){
triangle(x0,y0,x1,y1,x2,y2);
myRotate(rotDeg);
}
}
public int[] centrePoint(int cx0, int cy0, int cx1, int cy1, int cx2, int cy2){
int[] result = new int[2];

result[0] = Math.round((1f/3f)*(x0+x1+x2));

result[1] = Math.round((1f/3f)*(y0+y1+y2));
return result;
}

public void draw(){

}

public void myRotate(double theta){

theta = (theta/360.)*(2*Math.PI);

float[][] m = new float[2][2];
int [] cp = centrePoint(x0,y0,x1,y1,x2,y2);
m[0][0] = Float.parseFloat((Double.toString(Math.cos(theta))));
m[0][1] = Float.parseFloat((Double.toString(Math.sin(theta))));
m[1][1] = Float.parseFloat((Double.toString(Math.cos(theta))));
m[1][0] = Float.parseFloat((Double.toString(-1.0*Math.sin(theta))));



MyMatrix rotMat = new MyMatrix(m.clone());
//rotMat.print();
MyMatrix vector;
MyMatrix temp;
float [][] arr = new float[2][1];
//p0
arr[0][0] = x0-cp[0];
arr[1][0] = y0-cp[1];

vector = new MyMatrix(arr.clone());
temp = new MyMatrix(rotMat.multiply(vector).theMatrix.clone());

x0 = Math.round(temp.theMatrix[0][0])+cp[0];
y0 = Math.round(temp.theMatrix[1][0])+cp[1];
//System.out.println(x0+","+y0);
//p1
arr[0][0] = x1-cp[0];
arr[1][0] = y1-cp[1];

vector = new MyMatrix(arr.clone());
temp = new MyMatrix(rotMat.multiply(vector).theMatrix.clone());

x1 = Math.round(temp.theMatrix[0][0])+cp[0];
y1 = Math.round(temp.theMatrix[1][0])+cp[1];
//System.out.println(x1+","+y1);
//p2
arr[0][0] = x2-cp[0];
arr[1][0] = y2-cp[1];

vector = new MyMatrix(arr.clone());
temp = new MyMatrix(rotMat.multiply(vector).theMatrix.clone());

x2 = Math.round(temp.theMatrix[0][0])+cp[0];
y2 = Math.round(temp.theMatrix[1][0])+cp[1];
//System.out.println(x2+","+y2);

}

}

Homework #3

I have yet to figure out posting java applets on blogger, although I have heard from my colleagues that that isn't really done here. I'll try to look into it some more, but for now, I have my .class files posted on a Google Groups page. The link is here:

http://groups.google.com/group/bjy3120csc340/files?hl=en

As of this post, I am still working on the line clipping exercise. After some debugging, I have found that a lot of my problems probably extend (at least partially) from confusion from translating the algorithm to work with the upside-down way that drawing in Processing works.

As for my project proposal:

I am interested in using recursion to draw and create pattern. I would like the user to be able to interact with the program to change how the program recurses, perhaps by moving their mouse or pressing keys; I want to make something that makes people want to play with it and try to figure out what each button they press or action they perform with their mouse will do.

Here are a few Processing projects I liked:

http://www.flickr.com/photos/lennyjpg/744505138/
http://www.youtube.com/watch?v=dJfIMPREQ8A
http://www.flickr.com/photos/njmcgee/456231707/

Finished Bezier Curve Algorithms

Alright, I finally debugged and finished my algorithm for cubic and quadratic Bezier curves. Below is a pic of the applet running the program.
Here is the code used:

public void setup(){
size(250,300);
background(0);
}

public void draw(){
stroke(0,255,0);
myCurve(25, 100, 50, 210, 200, 100, 200, 30, 0.01);
stroke(255,0,0);
myCurve(50, 210, 200, 100, 200, 30, 0.01);
stroke(0,0,255);
myCurve(200, 100, 200, 30, 0.01);
}

public void myCurve(int x0, int y0, int x1, int y1, int x2, int y2, double t){
//Quadratic
double x = x0;
double y = y0;
point(x0, y0);
for(double i = t; i <= 1; i+=t){
//System.out.println(i);
x = Math.pow((1.0-i),2)*x0 + 2.0*(1.0-i)*i*x1 + i*i*x2;
y = Math.pow((1.0-i),2)*y0 + 2.0*(1.0-i)*i*y1 + i*i*y2;
point(Math.round(x),Math.round(y));
}
point(x2,y2);
}

public void myCurve(int x0, int y0, int x1, int y1, int x2, int y2, int x3, int y3, double t){
//cubic
double x = x0;
double y = y0;
point(x0, y0);
for(double i = t; i <= 1; i+=t){
x = Math.pow((1.0-i),3)*x0 + Math.pow((1-i),2)*3*i*x1 + Math.pow((1-i),2)*3*i*i*x2 + i*i*i*x3;
y = Math.pow((1.0-i),3)*y0 + Math.pow((1-i),2)*3*i*y1 + Math.pow((1-i),2)*3*i*i*y2 + i*i*i*y3;
point(Math.round(x),Math.round(y));
}
point(x3, y3);
}

public void myCurve(int x0, int y0, int x1, int y1, double t){
//linear
double x = x0;
double y = y0;
point(x0, y0);
for(double i = 0; i <= 1; i+=t){
x += (x1-x0)*t;
y += (y1-y0)*t;
point(Math.round(x),Math.round(y));
}
point(x1, y1);
}

For the third assignment, I was able to successfully create the parametric lines. I am still working on the quadratic and cubic curves. Here is the code for the new myLine method.

public void myLine(int x0, int y0, int x1, int y1, double t){

double x = x0;
double y = y0;
for(double i = 0; i <= 1; i+=t){
if(i == 0){
point(x0, y0);
}else if (i == 1){
point(x1, y1);
}else{
x+= (x1-x0)*t;
y+= (y1-y0)*t;
point(Math.round(x),Math.round(y));
}
}
}

Second Homework Assignment

I have finished the second homework assignment due January 16th. I was able to create my own implementations of the line function, the circle function and created a web-like design on the corner of the applet box. The following screen capture shows all three.

The Wikipedia articles were extremely helpful for writing out these programs.

I may try out the anti-aliasing bonus later, but I figured I might as well post this finished work now.

Here is the code.

//Programmed by Brett J. Young
//Creates a house

import processing.core.*;
public class Driver extends PApplet{

public void setup(){
size(250,300);
background(0,100,210);
}

public void draw(){

stroke(255);
myLine(20,230,100,120);
stroke(100);
myWeb(135,7);
stroke(0);
myCircle(150,150,20);
}

public void myCircle(int x0, int y0, int rad){
int f = 1 - rad;
int dx = 1;
int dy = -2 * rad;
int x = 0;
int y = rad;

point(x0, y0 + rad);
point(x0, y0 - rad);
point(x0 + rad, y0);
point(x0 - rad, y0);

while(x if(f >= 0){
y--;
dy += 2;
f += dy;
}
x++;
dx += 2;
f += dx;

point(x0 + x, y0 + y);
point(x0 - x, y0 + y);
point(x0 + x, y0 - y);
point(x0 - x, y0 - y);
point(x0 + y, y0 + x);
point(x0 - y, y0 + x);
point(x0 + y, y0 - x);
point(x0 - y, y0 - x);

}
}

public void myWeb(int size, int step){
for(int i = 0; i < size; i+=step){
int q = size - i;
myLine(0,q,i,0);
}
}

public void myLine(int xa, int ya, int xb, int yb){
int x0 = xa;
int x1 = xb;
int y0 = ya;
int y1 = yb;

boolean steep = (Math.abs(y1 - y0) > Math.abs(x1 - x0));
if(steep){
//swap(x0, y0)
x0 = ya;
y0 = xa;
//swap (x1,y1)
x1 = yb;
y1 = xb;
if(x0>x1){
//swap(x0,x1)
x0 = yb;
x1 = ya;
//swap (y0,y1)
y0 = xb;
y1 = xa;
}
}
else if(x0>x1){
//swap(x0,x1)
x0 = xb;
x1 = xa;
//swap (y0,y1)
y0 = yb;
y1 = ya;
}

int deltax = x1 - x0;
int deltay = Math.abs(y0 - y1);

double error = 0;
double deltaerror = (Double)(1.0 * deltay) / deltax;

int ystep;

int y = y0;

if(y0 < y1){
ystep = 1;
}else{
ystep = -1;
}

for(int x = x0; x < x1; x++){
if(steep){
point(y,x);
}else{
point(x,y);
}

error += deltaerror;

if(error >= 0.5){
y += ystep;
error -= 1.0;
}
}


}

}