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!