I Suppose you Could Call it Art

At first I wasn’t entirely sure what I wanted to do for this project.  I wanted to do something with more math involved with it but I also wanted it to look interesting.  Eventually, after going through some ideas, I found a way that I could use math to make art using processing.  The link to the code and what it looks like is below.  Some of the different things that can happen are done by moving or clicking the mouse and using the up and down arrows.  Also below the link is some of the different images taken from when the code is run.


project           project2            project3

The hardest part for me was getting the part where the lines would go to the right point across the circle.  I wanted there to be a section that wasn’t filled in by the lines in the middle so I needed a way for the lines not to go straight across the circle.  To find the starting x position I used the radius times cosine of the angle.  In the same way I found the y position but used sine instead of cosine.   The code for this is below, and after I knew how to find the x and y position I had to figure out how to have z and s be the right distance away to make a circle and for the lines to end at the right point.

   while (theta < 4*PI) {
    x = r*cos(theta);
    y = r*sin(theta);
    z = 2*r*cos((theta+PI/25));//finds the new point that the line should go to
    s = 2*r*sin((theta+PI/25));
    x = map(x, -400, 400, 0, width);
    y = map(y, -400, 400, 0, width);
    z = x-z;
    s = y-s;
    lines(x,y,z,s);//calls the function lines
    theta = theta + PI/25;//repeats it until theta = 4PI so that the lines go in a circle

In order to find the distances z and s I had to make the angle bigger by adding PI/25 to it. This would ensure that there would still be a smaller circle in the middle that the lines do not hit.  In order to find the correct distance, I had to use twice the radius(also the diameter) and use cosine and sine to find these distances.  I then subtracted these from the original points to find the points that I wanted the line to end at.

In addition to this, the other part that was confusing me at first was trying to get the colors to all be different.  Originally they would all be somewhat the same shade and not all the colors would be represented.  I then realized that I needed to map the x,y, and z values to values between 0 and 255 which I did in the code below, since 255 is the highest value you can have for colors.

  red=map(x, 0, width, 0, 255);//allows the colors to be in a range of 0 to 255
  g = map(y, 0, width, 0, 255);
  b = map(z, 0, width, 0, 255);
  stroke(red, g, b);

After getting this to look the way I wanted it to, I decided to make certain things happen when the mouse was clicked or the up and down arrow keys were pressed.  When the mouse is clicked the count changes and therefore changes the background and what shows up as you can see in the code below.

void mouseClicked(){
  if (count%2==0){
    count = count + 1;
    count = count +1;

This makes the count change and the background changes from white to black depending on whether the count is divisible by 2 or not.  When the up and down arrows are pressed, the count also changes and allows for other things to show up.  The circles that are drawn in the background function are made using sine, drawing a circle at certain points.  The different variations of it also depends on the count.  The code that shows what appears based on the count is shown below.

if (count%2==0){//sets the background depending on what the count is
    x = x+.1;
  if (count%3==0){

Using sine for this allowed for an interesting pattern to be made in the background.  Once I got all of this working, everything else I did was just little things to try and make it look more interesting and have more happen when the keys are pressed.

Leave a Reply

Your email address will not be published. Required fields are marked *