assignment 02 – on processing squares
Reply
!!! 2/1/12 CLASS CANCELLED !!!
Due to family circumstances Professor Kearns will need to cancel class tomorrow, February 1st. We will continue next week, pushing the schedule of topics one week. We will try to find an alternative meeting time to make up the lost course time before the end of the semester. Sorry for the inconvenience.
Assignment 2_Rectangles
Assignment 2 – Loops
I wanted to try again and this time create something that appears to be in motion. I decided to create a circle that looks like it is decreasing in size. I started with a circle that is centered and has a radius the size of the display box. I declared variable x to be the radius of the circle in the x and y direction . Then I set up a function which allowed the radius to reduce by 1 in each direction. After accomplishing a circle that decreased in size, I wanted to make the color change as the size changes. I declared another variable to control the stroke. This variable, y, was used for two values in the stroke: Stroke (“y”, value 2, “y”). Changing the color was successful but when I tried to take the next step and make it look as if it were fading in and out, I couldn’t get it to work.
This slideshow requires JavaScript.
Processing Exercise 1: Loop
This blog post focuses on the processing example of Loop. The program is setup in a small black box with a single white line that scrolls up across the box then restarts at the bottom once it reaches the top. The program then loops endless till the program is closed and the base program looks like this:
As with animator you have the potential to change the total size of the void/space that the program creates as well as the background, but for the purposes of this experiment I didn’t make any permanent change to them as I found them to work fine. I instead focused on the lines, making new ones, playing with their speed, and if I could get them to go in the opposite direction. To add a new line to the program is easy, as it requires you adding another float variable at a different hieght in the program and a create line function in the drawing part, making it move is the harder part. Here is all it takes to add a line to the program:
Once a new line has been drawn in the program and appears in the box, using the steps above, it will not move and you have to add a new line of programming allowing it to move. This takes adding another aspect to the code which makes the line move up by 1 increment every tick of the program. This function looks like (variable) = (variable) – 1, the reason for the negative is that the bottom of the program is actually the largest point so by subtracting it goes up. You then make the variable equal to the height so that the transition through space now actually shows up in the program. This new line of coding looks like this:
I then went on to add a series of lines that started at each point minus 50 from the last so at 200, 150, 100, 50, and 0 all had a float point to them. I then added lines and played with the speed of the line as it goes across the line by messing with the (variable) = (variable) – 1, changing the one to +1, +2, -2, and -3 though only the negative ones repeat continuously. Still unsure why that was and looking into it, but if people have ideas about it please comment. Here is what my final program looked like:
I still am looking on making the lines continually go in the opposite direction and would be thankful for any help, I was also looking at changing the thickness of the lines if anyone has any ideas on that. Again if you have questions, thoughts or comments they are very much appreciated.
Processing Exercise 1: Animator
As part of one of the first assignments of ARCH 430 we were asked to explore and play with a program called Processing, if you would like to get the program or see what it is about click here. We were asked to look into the existing examples that come with the program and see what changes and elements we can modify in some of these programs. I am exploring and modifying an existing program none of the base programs are my own design and were created by someone else in processing, though I will be documenting the changes I made and the base program making it easy to see what changes do what. Due to the fact that each program in processing is large and has many changes that I played with each of the examples I play with will be getting there own post to make it easier to look through them. This post focuses on the example program, animator, whose base programing and run window looks like this:
The program works by creating a line that follows the cursor when you click in the gray box. The line continually repeats the path that was drawn by the user every second from the time the first animation is drawn. The first thing that I wanted to do when the program opened was to increase the total space that I could work in. So I went into the program and changed the total void space hieght of the program from 200 to 640, increasing the total animation space. Below is an image of the change:
After I increased the size I looked at changing the background color to something other then gray, to make the black lines stand out more. For that I went in and changed the background variable to 255, to make the background white.
I also found with the increased area the size of the line was a bit big and rough, so I experimented with its size trying to make it finer and smaller, while still looking good. I played with a range of different numbers, both increasing its value from 12 and lowering it till I settled on a value of 9, which looked pretty good.
The last change I did to the program, that didn’t break it, was to change and play with the time between the delay of it repeating the cycle. It starts at 1 second (30 millis) and I move it up and down to see what a half second change was like, one and half delay was, and a 2 second delay was like. Till I finally settled on one and this is what may final animator program looked like:
There was one more thing I tried to do and that was how to add a change in the lines color so each line was a different color or was more of a gradient change over time. If people want to explore and experiment with that I would be very thankful for the help of what would allow me to do that or is it even possible to do? Also if you have any suggestions or questions about the changes feel free to comment and I will attempt to answer them as best as I can.
Assignment 2 – For Loop
For the second assignment I experimented with different drawings using lines and “for loops”. In this first drawing I used two different variables. I used “i” for the y-value of spacing at the start of the lines, and used “j” for the y-value spacing at the end of the lines. I thought that this would turn out differently then it did. I thought that there would be fewer lines then what was produced. This reminds me of grasshopper in rhino. In some definitions, depending on if you pick the short reference, long reference, or cross reference to the definition, different things happen to the outcome.
For my second and third trial I tried to simplify my idea but to better control the outcome. I wanted to do simple designs using multiple “for loops” but only one variable. Both of these trials were successful and came out as I was expecting. My next step would be to experiment with more “for loops” containing multiple variables.
Letters in processing-exercise 1
The goal of this exercise was to familiarize myself with the Processing program by adjusting different values one of the example files and seeing what the result was. I worked with the typography example called letters, and was able to successfully introduce a new font type, as well manipulate the size and color of the letters. By far the easy part of this exercise was introducing a new font type. This is done by using the create font tool to generate the font top from your computer’s existing font types and then loading it into the file by typing in the name of the font file. The cool thing about this feature is that it doesn’t have any issues with custom fonts, which is what I used.
The manipulation of the size and color of the letter was accomplished simply by changing values. The yellow letters were switched by changing which letters were specified in a particular code line, adding more instances of that code to add more yellow letters.
I also attempted to change which numbers are shown, however when you increase the value of the first number so that the sequence goes higher then 9 you end up with spaces and ; symbols. As far as I could tell the count used must isn’t a straight numerical count. My guess was that it was tied to a standard keyboard number sequence, which is why it couldn’t do double digits.
Assignment 2_
So in my attempt to do assignment two I realized creating your own code is a very hard thing to do, well at least to make the program do something really intriguing. Unfortunately I was not able to create something cool just yet, but I am beginning to understand the writing of script better.
Using SetDraw as a basis, I removed the continuous line and added two ellipses and a rectangle to form what I believe is a mock Mickey Mouse head, but I think I failed at capturing that shape. Also I added the functions loop(), noLoop() and mousePressed() which places my newly created object in about the center of the page and once clicked with the mouse, continuous movement begins.
Here is a short video showing the “processing”
I think it’s also important to note that I have been making my video’s using screen capture software camtasia studio and then uploading them to vimeo
Assignment 1 – Curtain Sketch
For assignment one I chose to modify an awesome sketch one of my friends showed me from openprocessing.org. The original page for this sketch (created by BlueThen) can be found here. The code is extremely well documented with notes about what everything does. The original sketch presented is a curtain that is pulled down by gravity and gets pulled by clicks of the mouse, ultimately ripping (if pulled hard enough).
This slideshow requires JavaScript.
The sketch is a ton of fun and beautifully made to resemble gravity and ripping. The code itself is split up into a couple of different tabs, which corresponds to tabs in the sketch. After finally getting the tabs set up correctly and adding a missing font, I was able to get the sketch file working. Because the sketch was so well documented, it was extremely easy to manipulate things:
Code with clear annotation of what to change for each part of the sketch
Making a curtain the full height so it doesn't dangle and rests on the ground
Modifying some of the ‘resting distance’ and ‘stiffness’ settings provide some of the most fun. In some cases though, if pushed to the extreme the whole curtain breaks immediately and shatters into tiny particles. The particles have a strange relation to each other though as picking up one will affect the others around it still.
Shattered curtain
The other parts I liked playing around with were the ‘gravity strength’, ‘mouse influence size’, and ‘mouse tear size’. For example doubling the gravity causes the curtain to pull and stretch really far without any interaction from the user (because of the start value of the curtain).
Doubling the gravity
I found that because of the complicated script, for me and my complete confusion still with the processing language, it was near impossible to modify anything that wasn’t clearly labeled. Still fun nonetheless.
