Minim

These videos HAVE SOUND.

Final Version:

My Tron Minim uses sounds from both, left and right channels to rotate and expand the box. The blue inner box’s rotate is mapped to the left channel while the green is mapped to the right. For the background, I used an image and then added a filter to the same image. The initial image stays there, while the filtered image plays on top. The filtered image is mapped to the right channel.

The outer box is made so it changes color if it exceeds a certain size.

First Round:

My first minim focused on a beach theme. I was going to make the image mask move about the screen but changed to the Tron version.

Advertisements

Generative Poetry

For my poetry assignment, I initially started with the self-moving, self-growing noise circles. The parameters are set so the circles never go above height*3 or width/2.

After playing around with it, the colors were chosen because I thought they brought out a lot of contrast to my design. For the type and sentences, taking Amy’s advice, I thought of a sentence about Graphic Design and then substituted each of the words for other words.

14836

 

The dotted circle lines is an array that repeats itself and starts over once clicked. The starry circles in the background are also an array that starts over once clicked. The typeface, avenir, brought out the sleekness of the design and helped tone down the dotted lines in the background.

16464

Open House

For the Open House, I really wanted something clean and dynamic. The interface went through many changes. The code itself is made up of various if statements. The user needs to click the newly added logo of MSU to return home.

This was the first time I used arrays for my code. In the arrays throughout this, it creates lines or bubbles that repeat themselves constantly.

This was my original mock-up for the design.

openhouse-img

Stage 1: For this stage, I just wanted the buttons to lead somewhere. Each page is its own boolean. The front page’s boolean is named front. So if you click on experiment, all other booleans, front, fail, learn, repeat, are all set to false. This will happen for all of the buttons.

Screen Shot 2016-05-03 at 3.06.57 PM.png

Stage 2: These are the original settings for the fail and learn booleans. In desperate need of improving.

In end, I added more colors and enabled each section to be more reflective of the word itself and all relate to circles.

Week 5 Assignments

For the bouncing ball, we used if statements. if the ball went past the height or width of the size, it’s direction would reverse.

For this week’s assignments, using for statements, we need to organize and command dots to do certain tasks.

The first set is simple and we did in class. Create a 5×5 square made of dots. This was using a ‘for’ statement. ‘For’ and ‘while’ statements work by creating parameters. For example, ‘for (int i=width/6; i<width-width/6; i+=width/6) {‘ means: i equals the amount of width/6. While i is less than the width minus 1/6 of the width, i will increase every width/6. The user is then left with circles distributed evenly along the x-axis. In order to do the y-axis, you need to add another for statement corresponding to the height/y-axis.

Screen Shot 2016-05-03 at 2.35.18 PM

For Part B, we need to use a the map function to create a gradient going across the circles. Map takes part of the code and applies a range to area. For example, float c=map(i, 0, width, 255, 0); simply means i is the variable being affected. The area or scale being affected is 0, width. So all i from 0 to width. Lastly, 0, 255, means 0-255 in the color range (because c will be our color), white to black. So from left to right, the code should show a gradient. You can change this around by changing the range OR to apply the gradient vertically, apply your y-axis variable instead (seen below).

For the next two parts, we needed to create a change of size in the dots from subtle to very large. For this part, you simply need to make the diam=random(30, 55); (a subtle change). The range size of the circle becomes 30-55. For a larger change, you can do random(0, 100);.

The last two parts were rollovers. Using if statements and the dist formula, we create different rollovers with the circles. if (dist(mouseX, mouseY, i, j)<=diam/2){ float circleDiam=10; ellipse(i,j, circleDiam, circleDiam); Dist measures the space needed to get from one point to another. Not from point to point. So if the distance of MouseX, mouseY, and i, j is less than the diam/2, then create a smaller or larger circle. This overrides the previous circles because it is still in the for statement.

Harihar_G from Gloria Harihar on Vimeo.

Harihar_F from Gloria Harihar on Vimeo.

The next assignment is to use map to create a grid gradient. This was the hardest; for this assignment we created a grid in class using the for statements. Next we used the distance and map functions. Distance becomes our variable. so measuring the distance of x, y, to the center (width/2, height/2). Next we map out our function. map(distance, 0, width/2, 0, 255). This makes distance the variable. The scale is from 0 to width/2 and the range is from 0 to 255.

You’re left with a centered grid gradient.

Screen Shot 2016-05-03 at 2.56.57 PM

Week 4 Translator

For my translator, I wanted something simple yet funny. To understand the booleans, I first set them all to false. Figuring out which one to switch on afterward was the next step. Using if statements and coordinates of my ‘CAT’, ‘DOG’, & ‘BIRD’ buttons, I set them so that if the mouse is clicked anywhere in that box area, the screen will switch to a new screen.

This part of the translator became difficult. When the user clicked in the designated sections, the sections would come up without having any way to go back to ‘home’ except by clicking the designated areas once more. To make things easier, I added a back button so the user knows exactly where to click.

I edited the translator I turned in, to this newer version. Much easier navigation.

Week 3 Assignments

We had rollover assignments this week.

For the quad rollover, I experimented with using type and how to actually create the rollover. I introduced a new statement “&&” into my “if” statements. I’ll define one line of the draw.

if ((mouseX<width/2)&&(mouseY<height/2))

if mouseX is less than half the width AND mouseY is less than half the height then:

fill(#FF9500);
rect(0, 0, width/2, height/2);

Create a rectangle that is half the width and half the height. This particular code makes a rectangle in the upper left corner. I then added a circle that would appear randomly and a line that would appear randomly.

Quad Rollover from Gloria Harihar on Vimeo.

My keys follow the same kind of format but I tried putting animation into it for a few of them. I used if statements inside the if statements. It felt a little crude but I didn’t fully understand functions as yet.

Keys Rollover from Gloria Harihar on Vimeo.