Angel.Borbon49 – MMP 100 Spring 2024

Final Project

Frogs go to the museum comic

creative brief

Creative Brief

p5 editor live site

https://editor.p5js.org/worldpeace818818/full/Ttt46d1s3

p5 editor code site

https://editor.p5js.org/worldpeace818818/sketches/Ttt46d1s3

MP100 | FINAL PROJECT STATEMENT
Title: Frogs go to the museum comic
Semester/Year: Spring 2024
Software, coding/programming languages: HTML, CSS, Adobe Photoshop, Adobe Illustrator
I chose to create a webcomic of two frogs going to the New York Museum of Natural History. I
created a surreal and funny tone for the whole comic. The frogs experience frog history at the
museum, and the two frogs see some modern art and learn about Axolotl’s. The goal of the
comic was to create a comical and funny story. I chose to use images and text to create the comic
this was the obvious choice for a comic it also allowed me the most freedom to achieve my
creative vision. Considering the limitations I have in terms of time and resources, it would be
impossible to create the story that I did in any other medium, so images and text were the
obvious choices. I used photos of real places and things and edited them using other photos to
create a sort of combined composition to create the necessary scenes to convey my story,
including texts. All of this was possible within Adobe Photoshop i also used an image I had
created from a previous work and added it to the comic this image, the Obey Frog poster, was
created in Adobe Illustrator. All of the images were embedded into a website I created. I created
the website using the p5 editor. The site was created to give the reader of the webcomic a
book-like feeling, with each page consisting of a comic image and a “next” button leading to the
next page i also added a home button to lead the reader. Back to the first page, I also added a
simple tidal page with the tidal of the comic and a “start” button. I used CSS to style the first
page as well. I hope people will find the web comic funny and the sarcastic sense of humor
funny. I found the coding originally somewhat difficult, but I was able to achieve the goals I
wanted to achieve for this project. I watched YouTube videos and videos posted by my teacher
from a multimedia class. This helped me learn the necessary coding language to create this
webcomic. With Adobe Photoshop and Adobe Illustrator, I used the same class videos to learn
how to crop and mask images into my Photoshop files. I also used YouTube to find tutorials to
help delete aspects of the images I was working with, such as the banners in the outside shot of
the museum. It was necessary to remove some parts of the original images to make room for my
additions. I did the same for the Obey Frog poster, which I added to page 6. The function was
content-aware fill. For my Adobe Illustrator image, I needed to find out how to create mirror
images of the shapes I used to create the poster. I used YouTube to find tutorials on how to do
this as well.
—————————————————————————————————————————-
“Museum Entrance” by Anthony Auston. CC BY-NC 2.0 Deed.Flicker.July 28,
2009.https://www.flickr.com/photos/anthonylibrarian/3774307040/

“David LaChapelle – “Once in the Garden”” by Walter Lustig. C All rights reserved. Flickr. June
6, 2014.https://www.flickr.com/photos/41223208@N00/14359764124/in/photostream/

“Ignorance is not bliss” by robert7. CC BY-SA 2.0 Deed.Flickr. July 3, 2007.
https://www.flickr.com/photos/robert7/708451204/

“Frog Back” by Stephanie Wallace.CC BY-NC-ND 2.0 Deed.Flickr. June 14, 2008.
https://www.flickr.com/photos/wishymom/2578153287/

“Southern Leopard Frog -215” By VinceFL. CC BY-NC-ND 2.0 Deed. Flickr.August 28, 2013.
https://www.flickr.com/photos/vlopresti1964/9612200398/

“Gros, Antoine-Jean, baron – Napoleon Bonaparte on the Bridge at Arcole” By Hermitage. C
public domain.picryl.com. 1700 – 1799.
https://picryl.com/media/gros-antoine-jean-baron-napoleon-bonaparte-on-the-bridge-at-arcole-f8
c179

“newspeak @ saatchi gallery” By Lux & Jourik.CC BY-NC-ND 2.0 Deed.Flickr .July
8,2010.https://www.flickr.com/photos/happyfamousartists/4774318366/

“Amazonian horned frog” By Santiago Ron.CC BY-ND 2.0 Deed.Flickr. March 25, 2009.
https://www.flickr.com/photos/tiagoron/3385110196/

“Manipulation-game” By James Gray-King. CC BY-NC 2.0 Deed.Flickr.December 10,
2007.https://www.flickr.com/photos/jamesgrayking/2101370483/

“Axolotl” By Giulia van Pelt.CC BY-NC-ND 2.0 Deed.Flickr. August 19, 2012
.https://www.flickr.com/photos/giuvanpelt/7814553014/

“Salita door DAM(3a)” by Regan Vercruysse.CC BY-NC-ND 2.0 Deed.Flickr
November 7, 2022. https://www.flickr.com/photos/rverc/52485389258/

“Colombia: Pool-Side Toad at the Mahatu Hostel in Leticia” by Eli Duke. CC BY-SA 2.0 Deed.
Flickr. June 8, 2011. https://www.flickr.com/photos/elisfanclub/6814982905/in/photostream/

“White-lipped Tree Frog” by Leonora (Ellie) Enking. CC BY-SA 2.0 Deed.Flickr. April 2, 2009.
https://www.flickr.com/photos/33037982@N04/3407383829/in/photostream/

“Obey Frog” By Angel Borbon. No copyright.5/12/24
(original work by me)

“30 Hand Drawn Speech Bubble Photoshop Brushes” by youthedesigner. © 2013 – 2024
youthedesigner. deviantart.com.Jan 10, 2013.
https://www.deviantart.com/youthedesigner/art/30-Hand-Drawn-Speech-Bubble-Photoshop-Brus
hes-347817364

Creative Brief

MMP-100-FINAL-PROJECT-CREATIVE-BRIEF-angel-borbon-1 Download

DIGITAL IMAGING PROJECT

MMP100 | DIGITAL IMAGING PROJECT STATEMENT

PART I: RASTER

Title: Three Brothers Visit Paris

Semester/Year: Spring 2024

Software: Adobe Photoshop

I wanted to make something funny and surreal, so I put three frogs in Versailles also, I added glowing eyes for dramatic effect and added text. This is supposed to be a portrait of the three brother frogs. I’ve been to Versailles once and thought I could use that setting for my project, but I still wanted it to be funny, so I used frogs i looked for pictures where the frogs had a lot of personality in their expressions. I wanted to create something so ridiculous that it would catch somebody’s eye immediately, and fog in a castle with glowing eyes does just that. I used four images total the background image of the hall of mirrors and the three frogs i added the eyes in the effects portion i used your video and also YouTube to help me create the eyes i used the crop feature as well to cut out my frogs and place them in the image. The hardest part was getting the eyes to “glow.” It was a lot harder than I had imagined. I used some YouTube tutorials to learn to do it. It still required a lot of trial and error to make it look right though.

PART II: VECTOR

Title: Obey

Semester/Year: Spring 2024

Software: adobe ilistartor

This is supposed to be a reinterpretation of the classic Obey poster logo featuring Andre the Giant, but I used a frog instead of Andre the Giant. I wanted to continue with the theme of frogs from the other project in this one, too. I chose black and white and red because it was the color template of the original poster, and I wanted people to recognize that it was a reinterpretation of the original immediately and keeping the color scheme was part of that. I had to figure out a way to create a frog in a similar style as the original poster. If the style was too different, then people would associate this poster with the original. That was the hardest part, keeping things in a similar art style. I hadn’t used Illustrator before, so getting the shapes I wanted and keeping things secretarial was somewhat difficult. Considering I’ve never used this program before, I’m very pleased with how it came out. One issue I had was when I was creating the image and layering the elements. I kept accidentally modifying things that were against and underneath the elements I was trying to edit. I had to spend some time organizing my layers and de-conflicting my layers to work better without mistakenly editing elements that were where I wanted them.

website web development project

editor preview

https://editor.p5js.org/worldpeace818818/full/lFoJcUyJ2

editor code

https://editor.p5js.org/worldpeace818818/sketches/lFoJcUyJ2

MP100 | WEB DEVELOPMENT PROJECT STATEMENT

Title: website web development project (re-submit)

Chose your own adventure

Spring 2024

Html, CSS, p5 editor

I wanted to make a choose-your-own-adventure story with a horror theme, and I wanted it to be funny, too. I just thought about making a story that starts out very normal and boring and escalates to an absurd degree. You wake up in your hotel room and head out to get to the beach, but as you choose the elevator or stairs, you soon find out you are not where you thought you were. I had to think a lot about how to create a narrative within the pages and how to make that work in a web page format. I had a lot of issues after you told me to resubmit. I went through and reworked the project on the p5 editor. I did almost everything there except get the CSS colors I wanted across the entire website. I tried re-uploading to Code Sandbox, but I kept getting errors that my images would not upload. I tried everything to get them to upload i even tried to get different images, but something was wrong with the editor. I couldn’t get any images in the editor, so I tried GitHub again but had the same result as with the p5 editor, so I stuck with the p5 editor. I wanted to make them black with white text, but only the first page had the color. I applied the code to all pages. Only the first page took the color. Overall I’m happy with it i basically recreated the original project with the format you laid out in the videos. If I didn’t have issues with the editors, I would have had the web pages have a black background with white text, but overall, I was able to stay true to the scary theme I was looking for and not stray too far from my original idea.

mad libs “Hamlet”

Title: Mad Libs “Hamlet”

spring 2024

Languages used: HTML, javascript and CSS

I used HTML, JavaScript, and CSS to create a mad-libs website with the theme of “Hamlet” by William Shakespeare. I wanted to create a mad-libs program that would reflect the characters and narrative of “Hamlet.” I chose this because I thought it would be interesting to reference a well-known work, and it fits the description of the assignment. I chose the pale blue and fancy font to give the pages an old-world style. I had some issues with making sure all the commands were labeled properly. I had some problems because of the formatting differences between Javascript and HTML, but I eventually got it. The hardest part of this assignment was just the programming intricacies and formatting requirements to get the page to link properly and function as I intended. I used YouTube for help and just troubleshot the problem by trial and error.

Link to the project

https://yjkspg.csb.app/ to the project

link to the code

https://codesandbox.io/p/sandbox/madlibs-hamlet-yjkspg?file=%2Finputhandler.js%3A15%2C54

my website

MP100 | WEB DEVELOPMENT PROJECT STATEMENT

live site

https://worldpeace818818.github.io/

editor

https://github.com/worldpeace818818/worldpeace818818.github.io/blob/main/index.html

Chose your own adventure

Spring 2024

Html, CSS, GitHub

animation blog post

MMP100 | ANIMATION PROJECT STATEMENT

Heartbroken animation

Spring 2024

Adobe After Effects

Using Adobe After Effects, I made an animation that, in an artistic and abstract way, depicts the emotion of being heartbroken. I used scale to make the heart image beat, and then I used a shatter effect to create the image of the heartbreaking. Also, I used a background of clouds to create an idea of turbulence and negative emotions. I had a lot of issues with figuring out how to use the timeline and add the effects to the animation in an order that made my idea work, and there were a lot of issues for me with the effects not working as I intended or the effects overlapping each other resulting in the heart beating and exploding simultaneously, I also had to learn about layers to make this concept work. I ended up using a lot of videos on YouTube to help me get this idea to come to life.

AUDIO PROJECT STATEMENT

Audio Portrait of a Place

I used Audacity to stitch together audio clips and modified them with effects like fade-in and fade-out and volume levels to create a short story. I wanted to create a storyline from a point of view perspective. My story is about a person falling asleep at work and having an interesting journey in his dreams. He goes to the beach in his dream and has a dream vacation. I used 10 pieces of audio for this piece. I searched on YouTube and other places for good quality and useable clips that would fit into my story. I used some fade-in and out effects and had to modify the volume levels quite a bit to make my idea work. The most challenging part was creating a story that was coherent and worked with the audio clips I could find. I think I understand why people storyboard projects now. It’s easier that way.

Spring 2024

Software: Audacity

Credits for sounds used

“Busy Office Background Noise” by soundsforyou, freesound.org, Youtube, Jul 21, 2020,https://www.youtube.com/watch?v=q3sACV0ZGwE&ab_channel=soundsforyou

“Driving Car Sound Effect (Inside)” by Free Sound Stock, FreeSoundStock.com, Dec 18, 2020,https://www.youtube.com/watch?v=QL4O1WW2uto&ab_channel=FreeSoundStock

“This is not real… its just a dream… please wake up | sound effect” by Mr Sound, MrSound, Dec 21, 2022, https://www.youtube.com/watch?v=Cb2n_ijLdOs&ab_channel=MrSound

“aquatic ambience” by ScizzieScizzie, ℗ 2022 Scizzie, under exclusive license to The System, Oct 17, 2022, https://www.youtube.com/watch?v=PV4kub8RpLo&ab_channel=Scizzie-Topic

“Footsteps Walking on Asphalt | HQ Sound Effects” by Everyday Cinematic Sounds, https://everyday-cinematic-sounds.creator-spring.com, Apr 16, 2021, https://www.youtube.com/watch?v=aLo4jmblu3E&ab_channel=EverydayCinematicSounds

“ Car Passing Sound Effects” by Motion Array, Motion Array.com, Aug 16, 2017, https://www.youtube.com/watch?v=XnR-mvOMrpU&ab_channel=MotionArray

“Waves and Seagulls – Sound Effect”, by Free sound effects, Free sound effects, Feb 25, 2021, https://www.youtube.com/watch?v=yEhAc7RbE7Q&ab_channel=Freesoundeffects

“Seagull Beach Sound Effect | Free Sound Clips | Animal Sounds” by Free Sounds Library, freesoundslibrary.com, Feb 2, 2020, https://www.youtube.com/watch?v=_OdfxYjvPlE&ab_channel=FreeSoundsLibrary

“Slurp *Ahhh* Sound Effect” by SoundEffectz, SoundEffectz, Sep 26, 2022, https://www.youtube.com/watch?v=1pLCFb_a_yU&ab_channel=SoundEffectz

“Opening Soda Sound Effect – [ HD ] BY GVH SOUNDS” by GVH SOUNDS, GVH SOUNDS, Dec 11, 2020, https://www.youtube.com/watch?v=1akdxt0ElGA&ab_channel=GVHSOUNDS