The Tree of If/Else

Here are the images of my final poster:

 

 

I am happy with the outcome of this final project. I feel it definitley conveys through the metaphor of both the poster and the tree how the an if/else statement works. 

I learned a lot throughout the process of creating this poster. This project really made me sit down and think about how code works, and how to teach someone code. Through the process of thinking about how to teach someone what an if/esle statement is, I learned a lot about how many different types of if/else statments work, and definitley had fun conceptualizing and constructing my final metaphor.

Explaination of If/Else Interactive Tree Poster

An if/else statement in code is a conditional statement. This means that if a specific condition is true, something will happen; else if that condition is false, something else or nothing will happen. My poster represents this concept through the metaphor of a fruit tree. In this case, if the fruit is ripe, the color of the fruit will change, else, if the fruit is not ripe, the color stays the same.

In this poster, the pull tag at the bottom represents the true or false condition of an if/else statement. In code, when an if/else statement is triggered, the action occurs simultaneously. This is represented through the action of the pull tag. The fruit in the tree (represented by the smaller bracket shapes) appear to ripen as the tag is pulled down. If the tag is not pulled, then the fruit is not ripe.

The pseudo code for this poster reads:

If (fruit == ripe) {
           color changes
    }
Else {
           color stays the same
    }

The tree itself is made out of brackets because they are so much a part of the coding language, and integral to the creation of any if/else statement. In addition, I made sure to keep the design of the tree simple, ordered, and patterned to represent the basic principles and functions of code.

Design Updates for Project 3

Since my last post, I have been working mainly on the final design of the poster. So far I have 2 options:

 

The colors for both of these designs will change based on the color of poster board I find when I go searching later today, but for now I thought adding color would be helpful to get a better feel for the final poster.

As you can see, this first poster is basically the same as the last design with a few minor tweaks, and a concept change. The biggest problem Ben had with my project on Tuesday was my metaphor. If it has to do with the changing of the seasons (from summer to fall), I would have to show that change in another way besides just the changing of the color in the leaves. Since this poster is so abstract, it is hard to tell that those brackets in the tree are leaves enough to show the changing of the seasons alone. My solution for this problem is to make the brackets on the tree represent fruit instead. I believe the shapes and pattern created by these smaller brackets make more sense when seen as fruit rather than leaves. In addition, the only noticeable change when fruit ripens is through the color change. Therefore, the poster can stand as is, and the metaphor will make much more sense. The new pseudo code would read as follows:

if (fruit == ripe) {

          color changes from green to red (or whatever colors I find later)

}

else {

          fruit is not ripe and colors do not change

}

The other question I had was whether or not my design is too simple. In this next design I added a few more trees (still in a very ordered and clean way) to just see if they added anything to the poster.

 

I have asked around, and the consensus is that the extra trees are unnecessary. I do feel they clutter the poster, and do not add anything to the metaphor.

I think I will stick with the first design, and my plan is to work on the construction and final color choices of the poster this weekend so that on Monday I can get the poster printed, cut out, and pasted onto the back so that it is done and ready to go for the exhibition on Tuesday!

Sketches for Project 3

Here are my sketches for Project 3:

 

Since I now have a working prototype (see my previous post), I started working on the design for the actual poster part. I only used brackets to make the tree because they are essential to coding language let along if/else statements. In addition, I want to keep the design simple and ordered because it exemplifies the code I am trying to explain.

Interactive Poster Prototype

I sat down this week to make the prototype for my if/else interactive poster. The poster should work as follows:

First, there will be a tree design on the top layer of paper that has either the leaves or fruit cut out of it (depending on what I decide to do for my final design of the poster). When you first look at the poster, the leaves or fruit will be one color. For my prototype, I drew a lemon tree, where the lemons start off as green and then eventually "ripen" to yellow.

Then, as you pull the tag at the bottom of the poster, the colors of the leaves/fruit will slowly change with the movement of the tag from one color to the next. In this case, as I said before, the lemons on this tree change from green to yellow.

When the tag is completely pulled out the final color will be displayed. The user can then push the tag back in and start all over.

 

The biggest problems with this prototype is that the paper I used was too flimsy. This will hopefully be fixed by using poster board for the final.

If/Else Interim Presentation

What Does an If/Else Statement Does?

The concept of an if/else statement is pretty simple. The code can be written as follows:

if (a specific condition is TRUE) {
     then this happens
}
else {
     if the above statement is FALSE than this happens
}

There are more complicated versions of this code where more condition are necessary for a specific event to occur, but this is on the most basic level how the code works. It is really a true or false question. If you understand this, then you will be able to understand the more complicated versions of this code as well.

Metaphor Idea #1

My first idea for how best to explain this concept to someone one who does not know code was through directions. I was thinking about GPS navigation devices, and how you ask them to create a route for you, but they know that IF there is a road block or something happens then they need to find you a detour, ELSE they keep on the same route you were originally going to take. I figured the best way to show this would be to make an interactive booklet. Based on GPS directions, and using symbols like you see on road signs and in directions from Google Maps and such (of course I would create my own set based on the standard images), I plan on making pages in a booklet with tags you can pull out so that IF you pull out the tag meaning that if there is a road block or something of that sort, the page directions you have on the page will change, ELSE you will be able to continue along your original route.

This idea would not only show, through the interactivity of the book, how the if/else statement works, but it would also be a fun book to pick up and play with.

Metaphor Idea #2

My second idea is based on the old paper fortune teller game I used to play when I was little.

The way this game is usually played is that you have someone choose a color from one of the 4 original flaps, and based on that color you open and close the fortune teller the same number of times as the letters in the word. So for example, if someone were to choose green, you would open and close the fortune teller 5 times. Then, inside there are numbers. That same person chooses a number from the inside of the fortune teller and you again open and close the fortune teller the same number of times as the chosen number. This happens one more time, but this time when that person chooses a number you flip open the flap of that number to find a message or fortune waiting for them inside.

I want to use this game to show how an if/else statement works. The pseudo code would work as such:

If (a color is chosen) {
          open and close the fortune teller the number of letters as in the color
         else if (a number is chosen) {
                   open and close the fortune teller than many times
         else if (a number is chosen again) {
                  open the flap of the number and read the message
          }
          }
}
Else {
          if a color is not chosen nothing happens
}

I'm not yet positive what I would use in place of colors and numbers to fill out the metaphor and have people really understand how the if/else statements works, but I think this would be an intriguing way of explaining the concept. People would definitely want to pick up the fortune teller and play with it. This would help show the interactivity of code, and how you need someone to interact with the program if you want an if/else statement to work properly.

Metaphor Idea #3

My final, and now favorite idea, is an interactive poster. I want to use the same pull tag as in my original booklet idea, but on a larger scale. The biggest difference between this idea and my other ideas is that the pull tag, in this case, would represent the true or false aspect of an if/else statement. In code, when an if/else statement is triggered, the result happens simultaneously. My poster would, therefore, exemplify this idea by changing at the same time as the user pulls the tag.

I have two ideas for this poster:

First, the poster would be extremely minimalistic. The main focus would be the pull tag, which when pushed in would read "PULL" and when pulled out would read "PUSH." The pseudo code for this would be:

If (the tag is out == true) {
          the tag will read PUSH
}
Else {
          the tag will read PULL
}

This idea may be too simple, and not very interesting, so my next idea adds a little bit more to the same concept. In this case, the image on the poster would be a tree, and the pull tag would be the tree's trunk. As you pull out the tree's trunk, the colors of the leaves on the tree will change from green to gold (or some other colors I will decide later) representing the change from Summer to Fall. The pseudo code would read:

If (Fall == True) {
          the color will change from green to gold
}
Else {
          the color will be green
}

This poster, would not only exemplify the if/else statement in the functionality and interactivity of the poster, but also in the metaphor it portrays (the changing of the seasons).

Plan for the Next 2.5 Weeks

By the end of Tuesday's class, I plan on choosing which metaphor I want to create. By Friday, I want to make a prototype of my final idea so I can begin to work on it to scale the next week. I want to basically have the project done by next Friday so that I can fix any bugs or printing problems over the weekend so that I have my final ready for the hand in on that Tuesday. 

If/Else Examples 3

Another example of if/else statements I found on openprocessing.org is called A Strange Symmetry. This sketch is a bit more complicated than the other two sketches in that it uses a few different if/else statements to run the program. Because of this I will not recreate the code here when I discuss it, but it can be seen on openprocessing.org at the link above.

The first time an if/else statement is used in this sketch is to designate when the original menu should be displayed, when a different menu should be displayed, or when the drawing function should be displayed.

The second time the if/else statement is used in this sketch is based on the drawing function of the sketch. In this case, the if designates what is drawn on the screen based on where the mouse is and which functions are set. Since there are many different controls for this program this statement is repeated in many different ways so that the program knows what to do when the spacebar is pressed or when arrows are pressed.

If/Else Examples 2

The next sketch I found on openproccesing.org is called if else. It is also extremely simple, but a good example of a basic if/else statement. The code looks like this:

void draw() {

if(mousePressed == true) {

background(mouseX,mouseY,0);

}

else {

// line(25, 150, mouseX, mouseY);

int a; a =mouseX;

int b =  mouseY;

int c = a + b;

for (int i=60; i<540;i=i+60 )

triangle(i,0 , a-i, b, a, b);

}

}

The code allows the user to change the background color based on where the mouse is on the screen. The if part of the statement says that if the mouse is pressed the background color will change based on the mouse's coordinates. Otherwise, when the mouse is not pressed, the background color will stay the same, and the triangle figure will change based on the coordinates of the mouse on the screen.  This is a great example of an if/else statement because it shows that when something is true one funtion occurs, and when that something is false, something else happens.

If/Else Examples 1

The first example I have of if/else statements in code is the sketch called A Zombie in Wonderland: A Text Adventure. The code works as such:

void draw() {

if (page == 1) {

pageOne();

}else if (page == 2) {

pageTwo();

}else if (page == 3) {

pageThree();

}else if (page == 4) {

pageFour();

}else if (page == 5) {

    pageFive();

 etc...and then later continues:

void mousePressed() {

if (page == 1) {

if (overButton(b1x, b1y, b1w, b1h) == true) {

page = 2;}

else if (overButton(b2x, b2y, b2w, b2h) == true) {

page = 3;}

} else if (page == 2) {

if (overButton(b1x, b1y, b1w, b1h) == true) {

page = 4;}

else if (overButton(b2x, b2y, b2w, b2h) == true) {

      page = 5;}

This sketch, although simple, is a great example of the "else if" function. It starts with the if statement which says if this specific page is loaded, then go to this page. Then, it later continues to make the buttons at the bottom of the page work by saying if this button is pressed go to this page ELSE if this button is pressed go to this page. The program then continues to run and eventually loops back to the begining depending on which buttons you press. Again, this is a very simple sketch, but a very good example of how the if/else function works, and how it can be used in a more complex way than just the original if/else statement.

Final Transformation Project: What, Me?

This is my final transformation project. It is based on the concept of how a crowd forms from one person to many. I used the code from my previous transformation sketches (and a lot of it from Bitcraft's Spot the Dot sketch as I have mentioned in my other posts), but modified it so that instead of random rectangles of color, I not have 4 images to the program can choose from. I have come back to the literal interpretation of my concept in this sketch, but I feel it convey's my concept int a much more interesting and fun way than simply colors ever could.

Unfortunately, the memory involved with loading 4 images (I also have a 5th image included but that slowed down the program even more so I took it out) and a sound that loops is a lot more than Open Processing can handle, so I am going to continue to try to upload it to that site, but for now I will just have to explain it here.

The program starts by opening with a single image of a person. The code is set so that the program will choose this picture randomly each time it starts:

Then, when the mouse moves over the center of the image, it will split into 4 separate images. In addition, a sound of someone saying, "What, Me?" will play 4 time simultaneously so as to convey the idea that each one of these people on the screen is asking the same question.

Then, as the mouse continues to move over each individual image, the screen begins to fill with a crowd of people because each image is then split into 4 images just like the first image, and this continues until the screen is full of people and the sound is also amplified and continued as the process plays out. This creats an atmosphere and transformation from one singular person to a crowd of people.

I feel that this final product conveys the idea of transformation very well, and I am really happy with the way this project turned out. Although it was very hard for me to try to understand this code, and get it to work properly, I feel like I learned a lot in the process. I am really proud that at the end of this project I am now able to understand how to think in order to tell this program to a get random image, or to set up variables so that they could then later be defined and used, or where to tell it to play the sound so that it would be played every time an image appeared rather than just once when the program started is a great accomplishment for me.

Ideally, if I am able to for the final hand-in, I would like to do with the sound what I did with the images and have a random sound out of 4 or 5 play when a random image is generated. Then, instead of always saying, "What, Me?" The people in the pictures would be able to have more of a conversation with each other. The sounds I would like to incorporate would be along the lines of other people saying phrases like "Hello" and "How are you?" The effect would then be even more close to the atmosphere of a crowd because the sounds would not be as planned and would flow together better transforming the sound along with the images even more. However, if this memory problem continues this idea would only cause more problems so I am not sure it is possible to achieve at this time, but I am willing to try!

Depth Transformation

This is the same sketch as the Angry Transformation, but instead of the rectangles being in Center mode, they are in Corner mode. I can't decide which sketch I like better, but from a design aspect I feel as though this sketch represents transformation even more because you actually see the transformation of depth and the movement from the bottom right corner of the screen in the whole screen.

Angry Transformation

My original idea for this transformation project was to create a transformation from angry to calm. I was thinking too literally, however, because I started by trying to change the background color, and use images to actually make a calm crowd into an angry mob. This sketch was my move away from such a literal interpretation of transformation. There is sound in the code, but I stopped it from playing for now because it doesn't actually add anything to the concept. I do, however, really like the visual this sketch creates as the mouse moves around the screen and the colors change from black to red.

I really learned a lot about processing and code while creating this sketch. Although I did base the sketch off of Bitcraft's Spot the Dot sketch, it took me a really long time to learn exactly how the sketch works so that I could then modify it and change it to make it do exactly what I wanted it to do. If the "r" key is pressed then the sketch will reset!

Inspiration for my Transformation Project

For this project, I plan to transform one large square into many smaller ones in order to convey a feeling of anger (similar to the transformation of a happy crowd to an angry mob). The sketch below was originally created by bitcraft, but I modified the image to make it more appropriate to display here. This sketch, however, is a really great example of the direction I would like to go.

Transformation Inspiration

I wasn't sure what to do for this transformation project so I started by making a word map:

Through my research on the subject I came up with a couple of good examples of transformation:

1) This transformation of a bird is a really good example of transformation in code. It also could prove really helpful for when I start coding my project. The bird breaks apart and comes back together as the cursor moves across the screen.

2) Another thought that came to my mind when thinking about transformation was movement from one place to another. The first thing that popped into my was Muybridge's running horse experiment. After doing some research on Muybridge I found this animation of a horse running. I also really liked this idea, but I'm not sure how fruitful or interesting it would be if I were to use it in this next project.

3) My next thought was the idea of progression from one thing to the next. The obvious things popped into my head first: seed to flower, tadpole to frog, egg to bird, etc... But as I continued to think about it I thought about the idea of plants ripening and how they change from one color to the next. Or how the patterns of a kaleidoscope change color and position. I found a really cool kaleidoscope sketch in processing which I feel is really well done.

Finally, along the lines of progression, I thought of the idea of an angry mob and how they normally progress from a quiet crowd until provoked and then they start getting angry. I think this idea may serve as the final inspiration for my project!

Transformation Research

In this processing sketch created by Chris Pitt, he uses simple arcs to create this cool looking disk. What I found most interesting about it is that he starts with nothing, but as the arcs continue to layer themselves on top of each other they create something totally new. The disk continues to get more complicated and more defined as the program runs. The best part about this program is that the code isn't that complicated. It seems as though he has two loops running at the same time: one for the white arcs and one for the blue arcs. Each time the loop runs, the arcs rotate slightly until they reach the place the started, and then they continue to rotate. This creates a very interesting transformation from nothing to this cool looking disk.

Notes on "Programming: The Bigger Picture"

Coding is best for:
- Generative animations (animations that change each time they are run)
- Variation, Interaction, Repetition, and Scalability

Languages:
- Flash/Javascript (slick interactive online applications)
- Javascript (simple websites that get information from elsewhere)
- PHP (accessing databases)
- Processing (standalone interactive artwork or installations)
- C++ (programs like Photoshop)

I'm really glad to hear that once you know one programming language you have a good idea of how the rest work. Last year I used a little PHP in the web site I was programming for my Experience Design class, but I didn't understand why PHP was so important. Now, I understand. I was trying to load a data table from a file. PHP was perfect, but it made my web site way more complicated. Hopefully I will leave this class knowing enough that I can create my own .js files for future web sites!

Wallpaper Design Refections

When I sat down to make my final wallpaper designs, I knew I had to make my series more cohesive. I was inspired by nature, so I set out to make a series of wallpaper designs that conveyed nature through geometric shapes. I used earthy colors to help this concept come to life.

My main goal was to code the gradient I had planned in my sketches. My biggest problem, however, was trying to get the gradient to stay. I had to add "stop();" to the end of all my wallpaper designs so the loop would stop and create the terraced gradient you see in my designs. Unfortunately this made my work a lot harder, but without that piece of code, the loop would continue and completely fill in all my shapes. This way the program only runs once and you can see the static image I planned to make.

I was really excited to learn how to overlap shapes in processing. I was surprised to find that the shapes at the bottom of the code lay on top of the shapes placed higher in the code. In addition, I learned how to use variables and write the code so that you can resize it to anything and everything will resize with it.

If I had had more time to work on this project I would have changed some of the compositions so that they flowed better together, and I wish I had learned more about getting loops to work with variables. My original idea had been to create a gradient of colors using variables in the fill setting, but I'm not sure that is possible or the right way to do that.

My goal for the next project is to use loops correctly, and try to make something interactive. I want to keep looking at all the different open processing sketches and try dissecting their code until I fully understand what they say whether or not I can copy their steps.

Wallpaper Design 4

For my 4th and final wallpaper design of the series I was inspired by the bark of a tree. I brought the brown back in to bring the colors of the series full circle.

Wallpaper Design 3

For my third wallpaper design I was inspired by the terraced farmland around New Zealand.

Wallpaper Design 2

For my second wallpaper design, I was inspired by water. I used the blue to not only to convey water, but to continue the series.

Wallpaper Design 1

In my first design, shown below,  I was inspired by the mountains in New Zealand. The mountains are brown like most mountains, and the valley of blue sky splits the two brown triangles.

Processing Practice

While I was working on my wallpaper designs, I was attempting to change the color of a shape and move it down at the same time using a loop. I'm not really sure what I stumbled upon, but I thought it looked cool.

Wallpaper Designs

My goal for this project was to bring together organic images with geometric shapes. I started with the fourth panel. The triangle pattern reminded me of trees. I decided to stick with that theme, and I decided to use earthy colors for the whole set. The first panel was my attempt to represent a flower with diamonds. The second and third panels were my attempt to bring the sun, the life force of all things, into the picture I had created.

 

So What's in the Fridge?

While browsing through the open processing site, I found a sketch that was quite different from all the rest. It is called So What's in the Fridge? and it was created by Anna Reutinger.

What I find most interesting about this sketch is that it seems to be set up as a template (for lack of a better term). What I mean by this is that there are three panels which select random pictures and random text to display each time the mouse is clicked. By looking at the code, I can tell that all the images and fonts are pre-loaded and separated into three categories or strings. Each panel, then, has a list of words and images to load based on the list. I feel this is a really interesting way to use code, and it turned out to be a really fun sketch!

What I couldn't figure out was where the images and fonts were uploaded. I see that they are pre-loaded once the sketch is pulled up, but I see no link or folder structure pointing to where they are on the web or on open processing. In addition, I was having a hard time overlapping shapes in my sketches, and I was wondering how they got their text to flawlessly overlap the images? Is that just a matter of order or is there something I'm missing?

Sketch Based Pattern

This next pattern is based off the sketch we did in class. I laid down the first set of lines, and then I continued to overlap the same pattern in different ways. I changed the color to add a little contrast to the pattern.

The open processing link to this pattern can be found here.

Doodle Inspired Pattern

This next pattern was inspired by a set of doodles I found in my notes from last semester. I wanted to recreate the swirling pattern, but I think I need a little more work on my curves

The open processing link to this pattern can be found here.

My 1st Patterns

Here are the first two patterns I was working on in class today. The first one was my attempt to play with transparency and overlapping shapes. The second one was my more successful attempt to expand on my exploration of transparency, shape, and color.

  

This is the open processing link for the first pattern, and this is the link for the second pattern!