//Tim Hamilton //ARTD 252 //Lab MW 4-6 PM //Title: The Unhappy Number /* The idea behind my project changed quite a bit from my original idea, but I think my final project is much stronger than it was at first. Playing around with the different functions of Processing was fun and very interesting to me because I have never done anything like this before this class. */ //First, I need to start from the back of the screen to the front. I use the "int" variable to create a certain //number of balls to float in the background. The balls will not be identifiable as balls though, but be used to create //a texture for the background.>>> int ballCount = 1000; //I then create floats which will identify the variable names of the attributes of location, //size, and speed of the created balls.>>> float [] ballSize = new float[ballCount]; float [] xPosition= new float[ballCount]; float [] yPosition= new float[ballCount]; float [] xSpeed= new float[ballCount]; float [] ySpeed= new float[ballCount]; //void setup is used to determine the the basic attributes of the frame as a whole such as size and background color.>>> void setup(){ noCursor(); size(800,600); background(0); //I also use void setup to announce the presence of text to be used in the frame, which will be referenced later.>>> PFont timFont; timFont = loadFont("ArialNarrow-48.vlw"); textFont(timFont); //It also is used to create the range of numbers which will be used for the attributes of the balls which float in the //background. This for loop will redraw up to same amount as the ballcount, starting at 0 and increasing by 1 each //time.>>> for(int i=0; i>> void draw(){ //I change the fill so that my text will stand out from the background.>>> fill(255,0,0,10); //I now include my text. Because it will be farthest in the back of the frame, it must come first in the code order.>>> text("3.14159265358979323846264338327950288", 0, 40); text("4197169399375105820974944592307816406", -5, 80); text("2862089986280348253421170679821480865", -5, 120); text("1328230664786280348253421170679821480", -5, 160); text("8651328230664762803482534211706798214", -5, 200); text("8086513282306647093844609550582231725", -5, 240); text("3594081284811174502841027019385211055", -5, 280); text("5964462294895493038196442881097566593", -5, 320); text("3446128475648233786783165271201909145", -5, 360); text("6485669234603486104543266482133936072", -5, 400); text("6024914127372458700660631558817488152", -5, 440); text("0920962829254091715364367892590360011", -5, 480); text("3305305488204665213841469519415116094", -5, 520); text("3305727036575959195309218611738193261", -5, 560); text("1793105118548074462379962749567351885", -5, 600); //I now create a loop which will redraw as many times as there are balls floating in the background. This loop also //determines that every time the frame is redrawn, the position of the balls will be moved from their previous location //an equal amount as their speed, both on the x and y axis'.>>> for(int i=0; i>> smooth(); //I now change the fill so that my if statement will change the color value.>>> fill(0,30); //I now want to use if statements that will affect all shapes which come within a certain distance of my mouse cursor: //Make all shapes within 40 pixels of my mouse filled with white.>>> if(mouseXxPosition[i]-40&&mouseYyPosition[i]-40){ fill(255,150); } //Make all shapes within 20 pixels of my mouse filled with red and change direction. This also makes any shapes caught //within the 20 pixel barrier stop (they change direction every frame, equalizing to a stop).>>> if(mouseXxPosition[i]-20&&mouseYyPosition[i]-20){ fill(200,10,25,50); xSpeed[i] *= -1; ySpeed[i] *= -1; } //I also wanted the same to occur on the opposite side of the frame as my mouse cursor, across the x and y axis'. To do //this, I used mathematical equations with the variables of mouseX, mouseY, width, and height. Ultimately, this creates //the exact same effect on the screen as my mouse cursor, across from the center of the frame. if(width/2-(mouseX-(width/2))xPosition[i]-40&&height/2-(mouseY-(height/2))yPosition[i]-40){ fill(255,150); } if(width/2-(mouseX-(width/2))xPosition[i]-20&&height/2-(mouseY-(height/2))yPosition[i]-20){ fill(200,10,25,50); xSpeed[i] *= -1; ySpeed[i] *= -1; } //Finally, the balls are drawn. The balls are the second items to be drawn, just above the text, and are used to create //the texture over the text. The variables of xPosition, yPosition, xSpeed, and ySpeed are drawn based on the variable //set randomly within the range that was determined for them. They are also given no stroke so that they have no defined //edge.>>> noStroke(); ellipse(xPosition[i],yPosition[i],ballSize[i],ballSize[i]); //If statements are used to restrict movement of the balls to within the defined frame by telling their speed to reverse //when their position reaches a certain number.>>> if(xPosition[i]>width){ xSpeed[i] *= -1; } if(xPosition[i]<0){ xSpeed[i] *= -1; } if(yPosition[i]>height){ ySpeed[i] *= -1; } if(yPosition[i]<0){ ySpeed[i] *= -1; } } //Outside of the void draw code, I want to draw an 3 ellipses which originate from the center of the screen. They are //slightly overlapping so that the edges look to be softer when the shape and size of the ellipse changes based on the //position of my mouse. I want the ellipses to have no fill, a red stroke color, and a line width of 10 pixels, which I //define before the ellipses are drawn.>>> noFill(); stroke(255,0,0,25); strokeWeight(10); ellipse(width/2,height/2,(mouseX-width/2)*2,(mouseY-height/2)*2); //If the ellipses were all drawn in the same way but just changing their size slightly, when my mouse moves over 1 axis //but not the other then the circles would be drawn intersecting and not remain the same scale in comparison to each //other. I have to use if statements to ensure that when my mouse moves into a certain quadrant of the screen, the //ellipses do not intersect. Again, the variables mouseX, mouseY, width, and height are used in mathematical equations //to determine the size and shape of the ellipses: //Lower left quadrant conditions.>>> if(mouseXheight/2){ ellipse(width/2,height/2,((mouseX-width/2)*2)+10,((mouseY-height/2)*2)-10); ellipse(width/2,height/2,((mouseX-width/2)*2)+20,((mouseY-height/2)*2)-20); } //Upper right quadrant conditions.>>> if(mouseX>width/2&&mouseY>> if(mouseX>width/2&&mouseY>height/2){ ellipse(width/2,height/2,((mouseX-width/2)*2)+10,((mouseY-height/2)*2)+10); ellipse(width/2,height/2,((mouseX-width/2)*2)+20,((mouseY-height/2)*2)+20); } //Upper left quadrant conditions.>>> if(mouseX>> } void mouseDragged(){ stroke(255,0,0,50); fill(0); ellipse(mouseX,mouseY,200,200); ellipse(width/2-(mouseX-(width/2)),height/2-(mouseY-(height/2)),200,200); ellipse(width/2-(mouseX-(width/2))-40,height/2-(mouseY-(height/2))-35,10,20); ellipse(width/2-(mouseX-(width/2))+40,height/2-(mouseY-(height/2))-35,10,20); noFill(); bezier(mouseX-75,mouseY+5,mouseX-45,mouseY+90,mouseX+45,mouseY+90,mouseX+75,mouseY+5); } /* While working with Processing I became very interested in how coding works. As I have never worked with computer programming before, I was fascinated at how information can be processed so quickly, especially in relation to how slowly I could process it. I wanted to make my project about this experience. I chose to use the integer of Pi as my background because it is very easily recognized and is an icon of modern technology. To represent the transmission of information, I made my cursor (and counter-cursor) to be a physical representation of information and how it might look as it travels to it's destination. The center ellipse came next. I chose to include this because I felt that the frame required more action but not at the expense of attention on the cursors. Also, when the cursors expand slowly from the center of the frame, the ellipse and cursors give a sense of an exploding star. I liked this because of it's jusxtoposion of size, going from the microscopic transmission of information to the massive dynamism of space. Having just this as the input seemed to be slightly dull to me and didn't really capture enough of my attention. I experimented for a while but ultimately decided on using the input of the mouse click to change the image. I was thinking about Pi and it's endless decimels and how I feel like the number is never really at peace or finished. By drawing the shapes over the cursors when the mouse is clicked, I wanted the focus to change. I drew two circles, one with eyes, and one with a mouth. Naturally, when people see these two objects they want to combine them to make a happy face. When you do this in my program however, your mouse must stop in order to make the face "happy". When your mouse stops, the happy face immediately disappears because the program no longer recognizes the mouse as being drug. I am really quite happy with this project, mostly because of my lack of programming knowledge when beginning this class. I think it came out like I wanted and does relay the subject that I desired. */