Project Idea: Interactive Node War

My first ideas for the final project was to continue on with my room controller idea and have my project be about utility and have it serve a function that was very technical. After some thought though and reworking some of my initial ideas I decided to change what I wanted my project to be. I wanted to still have some sense of utility or rather a technical aspect to it, but I wanted it to focus on expanding it and the interaction between the systems and making it into a game.

So my idea for my project is that there a few nodes, or input points, that are located in different places and that all interact with each other. These nodes each have a set number of cubes, color, etc. that can only exist in one node at a time. Now people can call them to another node, but it then steals it from the node it was at. Sort of link in the game Tentacle wars where you have to send out your own objects in the node to attack another and take it over.


Assignment 4: Mouse interactivity

I modified the base in class program, with some help from others as I got caught up on the language and programing a few times, to meet what the TODO list said to do. In the actual assignment itself I added another layer of parsing which gave me the ability to generate different sized triangles. I then used this to create another series of random ranged triangles based on the points gather from the new information. I then made it so when a person clicks the left mouse button, anywhere on the screen, it would run the program and generate the triangles, and when someone right clicks the program restarts and clears the data.

After finishing the input side I began to mess around with the class function and what I could do to it. I found it boring that the shapes only went to one side of the screen and added some additional parameters allowing them to move in all directions. I added another set of parameters after that allowing me to generate random colors for each triangle, this one required some help from others as at first mine were only grey scaled. Lastly I moved on to changing the update me function to allow and change these results each time the program was called. The final product can be seen in the slide show below going from start, a series of left clicks, and finally a right click.

This slideshow requires JavaScript.

Assignment 3: XML

This is my attempt at assignment 3 and creating a series of boxes, with labels, from an XML document. Each box has a series of variables that determine where on the screen it will be in relation to the others. They always have a boundary of pixels around them so they won’t touch and an offset to make the text in the center of the box. Each box in the XML document has another set of boxes and list of variables that are suppose to happen when it is clicked, to give it another set of objects. I currently haven’t added the mouse interactivity to the program as I don’t quite know how to make it select just a single area. Below is an image of what the program looks like:

If you have any thoughts, comments, or help it would be greatly appreciated.

Assignment 2: Loop Function

For assignment 2 I decided to modify and learn more from one of my earlier attempts at using Processing and the Loop example, though my base program was borrowed slightly from the Setupdraw example. I wanted to combine the loop function and my attempts at playing with geometry into one program that could change and move as the program ran through the code. I wanted to make it also shift in shades and color, the color part I am still working on, so that each line would blend into the other and make a loop. Part of the challenge for me as well is I didn’t want to use the actual geometry commands and wanted to create each shape using lines as they slowly morphed from one to another. The final product and series can be seen in the slide show below.

This slideshow requires JavaScript.

Once I create the class and modify the program slightly I hope to be able to change the speed, layout, and color of the points allowing it to be more engaging and give the user some control over it. In some ways like a kaleidoscope that can be changed by a click of the mouse, though I am still working on that part.

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.