Interactive Multimedia Design

Mondrian

This is the painting we had to copy for homework.

DelaVega Mondrian

Here is my coding for the painting. This has been scaled down to half the size of the original painting, as instructed. The colors were extracted from the painting. This took a lot of trial and error when it came to the dimensions of the lines, blocks, and properly saving this as a jpg.

Make Me Move: Slime

I wasn't able to figure out how to save the file as a gif, but I included the code in my screenshot so you can see how it would move. I got the ellipse's (and or slime) to drip down at different speeds by dividing the variable a different numbers.

Make Me Move: Bear

In this version of the assignment, I made a bear follow the mouse. I noticed that mouseX and mouseY have an offset to them, which made the bear far away from the cursor. To fix this I subtracted 250px so it looks like the cursor is pulling on the bear's ear to make it move. Again, I wish I knew how to save this as a video or something so you can see how to works. I included the code in the screenshot so you could see how it would move.

Homework Week 1:

Click the gallery to view images and their descriptions.

For our first week, we were asked to recreate the Mondrian painting at half the size and Make Me Move (code something of our choice to move).

For Make Me Move, I decided to make slime drip down by using a lot of ellipses. I did this by looking at the "Linear" example under "Motion." By playing around with the code and a little trial and error, I was able to figure out how to manupulate the ellipses to make them look like one organic shape, how to make the slime float down and how to make the ellipses go down at varying speeds.

BUT WAIT, THERE'S MORE—in an anxiety induced fear that I did the Make Me Move assignment wrong, I made another version where a little bear follows the cursor.

Scans of sketches and brainstorming coming soon.

DelaVega Make Me Move Revised

To revise my Make Me Move, I used the constrained function for the eyes to add a minimum and a maximum amount of pixels where they can move from left to right. This was a little challenging because the eyes don't smoothly follow the cursor.

DelaVega 4 Constrained Draw

For my constrained drawing, I chose to work with circles and squares because they are opposites. I made the top half of the drawing more see-through than the bottom to add some contrast. While recording my screen there is a lag where a few shapes just show up as a cluster. This is because of the fast frame rate. I could change it, but I like this speed.

DelaVega Half n' Half

This is my half circles and half lines assignment. Basically everything coded is a variable I made; there are no fixed numbers. While recording my screen there is a lag where a few shapes just show up as a cluster. This is because of the fast frame rate.

Homework Week 2:

Click the gallery to view images and their descriptions.

For week 2's homework, we had to revise our Make Me Move assignment. I decided to just do the bear and try to make the eyes move with the cursor.

Secondly, we had to make a dynamic drawing in four constrained quadrants.

Finally, we had to make a dynamic drawing with one half being random circles and the other half being random lines.

Scans of sketches and brainstorming coming soon.

DelaVega BW Roll-Overs Week3

For this assignment we had to make four quadrants again, but here the quadrant with the mouse on it turns black. This is done by using a boolean and logical operators.

Hex Girls Search

For the keyboard rollovers, I was feeling festive for Halloween. I decided to base the colors off of the Hex Girls from Scooby Doo.

DelaVega Witchy Roll-Overs Week3

At first, I was trying to do the rollovers as mouseX>width/7 and so on, but I wasn't able to figure out how to make the rollovers on the right side. Eventually, I figured I could have the same effect by making rectangles. While recording my screen because of the speed of my mouse and QuickTime was getting worn out from screen recording since I made all these videos on the same night.

Homework Week 3:

Click the gallery to view images and their descriptions.

For week 3's homework, we had to make rollovers. First we had to make four quadrants and make our mouse position change the color from white to black. Then we had to make a keyboard-like canvas where the colors change according to the mouse position (we must have more than 5 keys).

Research and brainstorming coming soon.

Tea Translator Code

Rather than having a blank button that's clicked to reveal an answer, I made buttons that says the language and when you click on it, it shows you the word in that language.

Russian Tea

Turkish Tea

French Tea

Japanese Tea

English (British) Tea

DelaVega Tea Translator Before

I took a screenshot of what the translator looks like all put together. This is it before being used. The languages match with the pictures of tea so you can see how different tea sets look for each culture.

DelaVega Tea Translator After

Here is what the translator looks like after all the buttons are pressed. The typeface is from the same family as the languages (Avenir) but here I used Avenir Black to create contrast and hierarchy between the languages and the translation.

Project 1—Translator:

Click the gallery to view images and their descriptions.

For week 4's homework we had to make a translator using buttons and importing images. We needed a minimum of three languages. We could have as many words as we wanted, but to make them relate I chose one word: tea.

The languages I chose are Russian, Turkish, French, Japanese, and English (UK). The cultures I chose the languages from have their own traditions and styles for tea.

I decided to add English so people weren't confused if I was translating the cups or pots. I also chose pictures where you can clearly see the tea. I could have included an english translation under the foreign words, but I thought that would be repetitive and undermine the user. English is at the end because everyone in class already knows how to say "tea".

I had to edit these pictures so they would all be the same size.

I FINALLY FIGURED OUT HOW TO RECORD MY SCREEN IN THIS PROJECT!! So I will record my projects from now on so you can see how they work.

Research and brainstorming coming soon.

DelaVega Radial Gradient Grid

DelaVega Circle Grid

DelaVega Circle Grid Light to Dark H

H stands for horizontal.

DelaVega Circle Grid Light to Dark V

V stands for Vertical.

DelaVega Circle Grid Big Range

DelaVega Circle Grid Small Range

Homework Week 6+7:

Click the gallery to view images and their descriptions.

For week 6 and 7's homework, we worked on repetition and variation using a grid composed of circles.

We also had to use the map function to create a radial gradient and the for loop function to create a grid.

Project 2—Openhouse:

For this project, I wanted to make the interface like a simple simulation game. I feel like simulation games are something that everyone has played before, and would be more fun for the viewer and a little more personal. Simulation games do a great job at presenting information in an easy-to-understand way. I also wanted a layout that would allow me to make short descriptions without making the interface look too busy.

I originally wanted to draw myself for this, but due to the timing and the fact that I take forever to draw I decided to make myself in a dress up game and then edit the image in Photoshop to look more like me and better represent the school.

The reason why most of the text is an image is to prevent pixillation. I tried using different fonts, but they all ended up being pixelated in one area or another.

For my final revisions I cleaned up the top half of the page by centering it and getting rid of the italic font. I also removed the date so this can be reused and placed the directions underneath the speech bubble. Lastly, I made the color-changing rectangle the same size as the error pop-up message and aligned them at the top.

Generative Poem:

I wanted to make my generative poem about the ocean. Being filipino, I love the water despite not being a strong swimmer. P.S. We must save our coral reefs, just a side note.

I made the bubble ascend upwards by creating my own class. I wanted them all in one place because it looks like bubbles shooting from the sea floor, making a visually stunning effect that is naturalistic to when gas releases from the sea floor. This also brings more attention to the poem, as it rises next to it. If I had bubbles coming out everywhere it would be distracting and make the poem hard to read.

Project 3—Minim:

The first part of the project I wanted to keep simple. For Part 1 of the minim project I made a heart grow and shrink as if it were beating using modulo.

My second half of the project has more things going on. I wanted to make a sneak peak to the soundtrack of an upcoming fan made web series called Save Blüdhaven from Nerdbot. This series is based off the DC hero Nightwing and his epic adventures saving his city. I wanted to visualize the audio using equalizer bars, thinking they look like a city skyline. I also used beat detection to make spotlights on the Nightwing logo, as if the people in the city were frantically calling Nightwing for help. The screen recording is a bit choppy, but this still does a good job as far as syncing goes.

Ariana Dela Vega

School Portfolio