Assignment 1: Fun with Processing

As part of Assignment 1 I also experimented with playing with the base SetupDraw example that we were given as a starting point. I went in wanting to create a shape, or set of shapes, that would change and could move across the screen as the program ran. I played with a few different shapes till I settled on the triangle as my base shape. I choose it due to the type of sideways motion I was looking for, the number of points, and the degrees of variation I could put into it. After deciding the shape I wanted to use I went about creating the variable points I would need to make it move and reset itself. I did this in a bulky way, as can be seen in the image, by copying the base programing language again and forcing it to repeat it in different points. From there I added the”if” clauses that allowed it to repeat endless and create the different triangles as it moves across the screen. The final result and coding can be seen in the image below:

I did this before learning about classes and am thinking about applying a class or other function to it, that might help to make it less bulky. If anyone has any ideas, additions, or comments about what the next step of this should be please feel free to leave them.

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.

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 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.

bouncy bubbles

After some time exploring the program “Processing”, I made a few edits to two examples I found interesting. Initially I tried to just make simple edits such as the size  or number of the components and then I tried to make a greater impact to the code and get more creative, this was a very hard task to achieve because I do not really understand the language of the code, I took a basic HTML class in high school years ago but that is where my experience ends.

1st example: Reach 2

as you can see in the image above, the original reach 2 example and code. Highlighted are the factors I choose to change…let’s see the results

As you can see several features of the reach have changed, the segment is now doubled in size, the amount of circles within the segment is also doubled and the size of the background area has doubled as well.

2nd example: bouncy bubbles

For this example I tried to push the envelope a little more so, not only editing the number of bouncy balls and the size of the background but I also changed part of the mathematical formula behind the program which I believe controls the movement (direction, frequency, speed) of the bouncy balls.

Original code_bouncy bubbles

Edited Code_bouncy bubbles

From the images it is hard to notice the difference between the two besides the number of balls and size of the background, so I decided to make this video to show the real difference.

Bouncy Bubbles edit from Kareem C on Vimeo.

assignment 01 _ on processing

I started to toy with the processing program used for this course.  I have a basic understanding of C++ and I immediately recognized the language while sifting through the different examples on the site.  One of the most striking characteristic of this program is the simple GUI.  I’m always a fan of simplicity and have an appreciation for powerful tools, and I do feel that this will become a favorite of mine.  I’m glad that we’re not learning flash in this course, to be honest, because I’m sick of watching it struggle and fail on several of my computers.  There are better technologies out there, and I’d much rather learn those languages instead.

Processing is rather simple.  Script, save, play.  If something breaks, or code miswritten, the program alerts you rather than crashing everything in sight.  I chose the “animator” example because I like interaction.  I made this grid system using moving dots, and it was actually pretty fun to watch.

The code wasn’t that complicated either.  A copy of the script can be found here if you want to try it out.