Final: Portfolio

Project 6: Animation

My animation project was based off of my cruise ship logo that I made earlier in the semester. This was a fun and fairly easy project to do. I really enjoy animation and want to go further into this particular field. I chose to do a fairly simple animation just to get a general feel for how the program worked. Since the company is called Shooting Stars Cruise Lines, I wanted to incorporate a shooting star somehow. I made the setting nighttime with the ship coming on screen from the left and the shooting star almost "hitting" the ship and putting the logo onto the side of it. This is a commercial animation for the cruise line and I think it really conveys the "shooting star" part of the company name. 

Project 5: Lyrical Collage

The song lyric that I chose for this assignment is 

"Do you believe in magic?" 

I instantly thought of Harry Potter because of the magic they do. I really wanted to give this collage a "good" and an "evil" side to it. Obviously putting Harry Potter on one side with his friends Ron Weasley and Hermione Granger and Voldemort on the other side with his minions Draco Malfoy and Bellatrix Lestrange. I put the picture of Hogwarts being destroyed as the background because I think it's a strong and emotional picture. I enjoyed doing this piece because I really love Harry Potter as well so this was fun to make!

Project 4: Magazine Cover

I chose to do a Disney themed magazine! I titled it 

"Disney 101" to give the idea that it would have all kinds of different information about anything and everything Disney! I did my high school senior pictures at Magic Kingdom so I decided to use one of those picture for the cover and write a little blurb about that. I added my own pictures to the rest of the magazine to give it a unique look. I put in pictures of all four of the park icons with a little blurb about "taking a quiz to see which park you belong to" because almost any magazine has some sort of quiz or something of the sort. I also added in the picture of Mr. Gold's pawn shop because any Once Upon a Time fan (like myself) would appreciate seeing that in the Disney's Hollywood Studios! I wanted to use red and blue because they compliment each other really well I think. The bow on my ears is red, so I thought it would definitely match the rest of it pretty well. The part about the new updates coming to Walt Disney World is important too because there are SO MANY new things coming to WDW in the next few years, so of course a magazine filled with Disney information would have something about those updates. I put the pizza in the bottom corner to hint that there's articles about food and that Disney has good food, because they do. Overall, I'm really happy with the way my magazine cover turned out!

Self Insertion

These are the two pictures that I chose to merge together. As you've probably realized by now, I love Disney, so I wanted to put myself onto a parade float with Mickey Mouse! I even put on a Walt Disney World shirt and my ears just for the picture! This was pretty easy for the most part. I used the background eraser tool to help make it look like that I'm actually on the float with Mickey!

Just For Fun (Part 2)

Here are a few more projects I did in Illustrator in my free time! 

Grumpy from Snow White and the Seven Dwarfs (done from my own sketch) 

Jack Skellington from The Nightmare Before Christmas (done freehandedly)

Mike Wasowski from Disney's Pixar Monster's Inc. 

Figaro from Pinocchio (phone wallpaper requested by my cousin)

Disgust (my favorite) from Disney's Pixar Inside Out

Joy from Disney's Pixar Inside Out (phone wallpaper requested by my mom)

Sadness and Anger from Disney's Pixar Inside Out (phone wallpaper requested by a friend)

If you also can't tell, I really love Inside Out. :)

Project 3: HTML

I chose to do Minnie Mouse for my HTML5 project because if you haven't noticed already... I love everything Disney and I didn't think she would be just the right sort of challenge! Her bows are normally red, but I wanted to do pink to give it more of a "girly" vibe. I started out coding the head and ears because they are the farthest back in the picture. I used codes for circles for them. Then I moved onto the white part of her face, adding on all of the details (eyes, nose, mouth, etc.) afterwards. Lastly, I made the bow so that it would be on top of everything else in the picture. I had a lot of troubles with the nose at first because I wasn't sure how to make an oval and she looked really silly with just a circle for a nose, so I then used bezier curves to form an oval. Overall, I'm very happy with the way this turned out and didn't have too much trouble with the coding process! 

This was the image and the graph I used for a reference. I originally was going to do Mickey Mouse, but later changed it to Minnie Mouse to make it a little more "girly".

HTML5 Code:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//Background

context.beginPath();

context.rect(0, 0, 800, 600);

var grd = context.createRadialGradient(400, 300, 300, 400, 300, 400);

grd.addColorStop(0, 'pink');

grd.addColorStop(1, 'black');

context.fillStyle = grd;

context.lineWidth = 10;

context.fill();

context.stroke();

//Left Ear

context.beginPath();

context.arc(250, 125, 100, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//Right Ear

context.beginPath();

context.arc(550, 125, 100, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//Head

context.beginPath();

context.arc(400, 350, 175, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//White part of head

context.beginPath();

context.moveTo(400, 225);

context.quadraticCurveTo(200, 150, 275, 375);

context.lineTo(275, 375);

context.quadraticCurveTo(150, 425, 300, 500);

context.lineTo(300, 500);

context.quadraticCurveTo(400, 550, 500, 500);

context.lineTo(500, 500);

context.quadraticCurveTo(650, 425, 525, 375);

context.lineTo(525, 375);

context.quadraticCurveTo(600, 150, 400, 225);

context.closePath();

context.fillStyle = 'rgb(255, 235, 225)';

context.lineWidth = 5;

context.fill();

context.stroke();

//Under eye

context.beginPath();

context.moveTo(350, 375);

context.quadraticCurveTo(400, 350, 450, 375);

context.lineWidth = 3;

context.lineCap = 'round';

context.stroke();

//Left eye (white)

context.beginPath();

context.moveTo(360, 370);

context.quadraticCurveTo(315, 285, 360, 280);

context.lineTo(360, 280);

context.quadraticCurveTo(400, 285, 380, 365);

context.stroke();

//Right eye (white)

context.beginPath();

context.moveTo(440, 370);

context.quadraticCurveTo(485, 285, 440, 280);

context.moveTo(440, 280);

context.quadraticCurveTo(400, 285, 420, 365);

context.stroke();

//Mouth

context.beginPath();

context.moveTo(270, 420);

context.quadraticCurveTo(400, 550, 530, 420);

context.stroke();

//Black of left eye

context.beginPath();

context.arc(370, 350, 12, 0, 2 * Math.PI, false);

context.fillStyle = 'black'

context.fill();

context.stroke();

//Black of right eye

context.beginPath();

context.arc(430, 350, 12, 0, 2 * Math.PI, false);

context.fillStyle = 'black'

context.fill();

context.stroke();

//Left dimple

context.beginPath();

context.moveTo(290, 410);

context.quadraticCurveTo(270, 410, 260, 440);

context.stroke();

//Right dimple

context.beginPath();

context.moveTo(510, 410);

context.quadraticCurveTo(530, 410, 540, 440);

context.stroke();

//Nose

context.beginPath();

context.moveTo(400, 375);

context.bezierCurveTo(350, 375, 350, 425, 400, 425);

context.bezierCurveTo(450, 425, 450, 375, 400, 375);

context.fill();

context.stroke();

//Bow

context.beginPath();

context.moveTo(360, 80);

context.quadraticCurveTo(325, 1, 250, 10);

context.quadraticCurveTo(165, 40, 270, 225);

context.quadraticCurveTo(360, 250, 375, 175);

context.quadraticCurveTo(400, 190, 425, 175);

context.quadraticCurveTo(430, 230, 530, 225);

context.quadraticCurveTo(650, 40, 550, 10);

context.quadraticCurveTo(465, 15, 430, 90);

context.quadraticCurveTo(400, 50, 360, 80);

context.closePath();

context.fillStyle = 'rgb(200, 0, 100)';

context.strokeStyle = 'black'

context.fill();

context.stroke();

//Bow details

context.beginPath();

context.moveTo(375, 175);

context.quadraticCurveTo(400, 100, 340, 70);

context.stroke();

//Bow details

context.beginPath();

context.moveTo(425, 175);

context.quadraticCurveTo(450, 120, 430, 90);

context.stroke();

//Bow details

context.beginPath();

context.moveTo(440, 123);

context.quadraticCurveTo(450, 100, 500, 125);

context.stroke();

//Middle eyelash (left eye)

context.beginPath();

context.moveTo(350, 280);

context.quadraticCurveTo(340, 265, 340, 240);

context.stroke();

//Left eyelash (left eye)

context.beginPath();

context.moveTo(340, 290);

context.quadraticCurveTo(325, 265, 330, 250);

context.stroke();

//Right eyelash (left eye)

context.beginPath();

context.moveTo(365, 280);

context.quadraticCurveTo(350, 260, 355, 245);

context.stroke();

//Middle eyelash (right eye)

context.beginPath();

context.moveTo(450, 280);

context.quadraticCurveTo(460, 265, 460, 240);

context.stroke();

//Left eyelash (right eye)

context.beginPath();

context.moveTo(460, 290);

context.quadraticCurveTo(470, 270, 470, 250);

context.stroke();

//Right eyelash (right eye);

context.beginPath();

context.moveTo(435, 280);

context.quadraticCurveTo(450, 260, 445, 245);

context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>

</html>