Corporate Identity

This is the final product of my business card. I decided to stick with the logo on the front, with no words, and having all the information on the back. At first, I didn't have any pictures on the back. but once I started creating the brochure, I used the dog heads a few times and had the idea to have face to face dogs on the back. I turned their opacity down so they didn't overrule the information.

Here is the design I went with for Cerberus' letterhead. It is a very basic design but I think the simpler the better. Especially for something you are going to write a letter on you don't want it to be too busy. I really liked the way this turned out. The watermark of the Cerberus logo is my favorite part. I think the light grey from the logo goes really well with the darker grey I used for the top and bottom of the letterhead.

This is the final product for my brochure. This part of the project was definitely the most challenging for me. However, I am pleased with the way it turned out. I incorporated the same fonts as previously used in the business card and letterhead. I downloaded stock photos for all of the high-quality hot dog pictures. I think this turned out way more professional than it would have if I had taken pictures of hot dogs myself. On my original sketch, I had planned to put pictures on the back. After suggestions from the class, I decided to put a coupon instead. I think this would bring in more customers and it looks more appealing then if there were just random photos on the back.

Cerberus Brochure Sketch

Business Card / Letterhead Sketches

Corporate Identity Questionnaire

1)   What is your business?

-Cerberus Hot Dogs, we make hot dogs but allow the customer to customize what toppings they want, like Chipotle.

2)   Describe your business in one sentence

-We make delicious hot dogs and have the option to load your food with loads of toppings.

3)   Who is your target audience?

-Families, business people, teenagers, men and women.

4)   Who are your competitors?

-Other fast-food/restaurants like Chipotle, Moe's, and Five Guys.

5)   What makes them better/worse than your product/service?

-There is no other restaurant like Cerberus. While Five Guys may offer hot dogs, they do not have the variety of toppings we have to make our hot dogs even more tasty. Moe's and Chipotle only offer Mexican food, which is common for restaurants that let you pick your toppings, which is what makes Cerberus even more unique.

6)   How do you want your image to be seen in two years?

-We want this company to be a popular and hot spot to grab lunch or dinner for the best hot dogs around, no matter where you are.

7)   If your company was an animal, what animal would it be and why?

-Since our company is based on a Cerberus, I would have to say our company would be a Cerberus because it is unique as well as fierce and strong against other competitors.

8)   If your company/brand was a person, who would it be and why?

-Morgan Freeman because he has a voice that everybody loves yet nobody else has and Cerberus has the best hot dogs around yet no other restaurant is like it or has what we have.

9)   If your company/brand was an object, what would it be?

-A golden trophy. 

10)   If your customer was a cartoon character, who would it be?

-Harry Potter is cartoon form because in the first Harry Potter movie he fights off a three-headed dog. This represents Harry Potter trying to fight off the amazing taste of Cerberus' hot dogs.

Lyrical Collage: "Time is Contagious"

This image I created is inspired by a quote from a Damien Rice song called "Coconut Skins."I was always intrigued by the song and the line "time is contagious, everybody's getting old" consistently stood out to me. After knowing which quote I was going to use, I came up with the idea of using a bunch of different styles of clocks. At first, I didn't know where I was going to take it from there so I used the clocks as almost a sort of border. Then I had another idea of using human hands, preferably an older and a younger hand and luckily I found the perfect picture on Google. Originally, it was just supposed to be the clocks, the hands, and the quote. Then I decided to try to put a close up of the face of a clock in front of the hands and turn the opacity down. This ended up looking really cool and it almost looks like the younger hand is holding part of the clock. I also think it is symbolic since there are the hands of the humans as well as hands of the clock. I played around with the font of the quote for a while. I thought I wanted a script font at first, but I decided it looked a little cheesy and cliche. I decided to look on DaFont.com and found this font called "Colors of Autumn." I thought it looked like someone was scribbling the lyrics down and gave my piece a more organic feel. Lastly, I merged all of the clocks into one layer and grabbed the eraser tool. I turned the opacity down to 50% and sometimes back up to 100% to erase parts of the clocks. For some final touches I turned the opacity down to 20%.

Custom Graphic: Iron Man Graffiti

For this assignment I had the idea to make a street view of a wall full of graffiti and I decided to use Iron Man as the wall art. I started by creating the concrete which I created from scratch. I made a blank document and chose a dark color which I then added textures such as the texturized and craquelure. I played around with each ones settings until I thought the texture looked realistic. I then turned the texture into a pattern and moved that into my project's document. I created another pattern for the background brick layer, which was a picture I found on Google. The only problem I ran into with this image was that when I turned it into a pattern, you could tell when each image was repeated. In order to fix this I used the patch and cloning tool throughout the wall. For Iron Man, I found another Google image. In order to create the Iron Man brush, I wanted a more graffiti look applied to it beforehand. Instead of changing the original image to grayscale and adjusting it using levels, I applied 3 different levels of thresholds to the image. Then I erased the darker parts of the threshold so each aspect of Iron Man could be seen clearly. Then, I changed it into a brush which I used for the blue and purple graffiti paints. However, I used the original threshold Iron Man so I could paint in different colors using the magic wand tool to select the different parts. I downloaded brushes that looked like spray paint splotches from QBrushes.net which I used all around the Iron Mans. I also used these brushes as erasers so I could get the color underneath to show through.

Self-Insertion: King Kong

For this assignment, I knew I wanted to put myself in a movie scene, I just had to narrow it down to one frame. I thought it would be awesome to put myself into a scene of the 2005 version of King Kong.  First, I looked at other shots of the movie, such as the girl in-between Kong and a T-Rex. However, when I found the image of Kong with Anne in his hand, I knew it would be perfect. I asked my friend to take a picture of me leaning over my computer chair, so it looked like I was grabbing onto something. Then, I used the clone stamp tool to erase Anne from the picture. After using the magnetic lasso tool to cut me out, I put myself over some remains of Anne. Then, I touched up part of Kong's finger using the patch tool, since it looked a little weird after erasing so much of Anne's arm with the cloning tool. For finishing touches, I used the burn tool around my hand and around some parts of my arm. The final product is hilarious and I can't wait to show my friends and family!

Darth Maul- "Darkness"

I named this piece "Darkness" because to me, it looks like Darth Maul is emerging out of complete black. I love the way this turned out, I have always thought Darth Maul had really cool facial features and design and am glad I finally got to do something with it on Illustrator. I used the mesh tool a lot to give the look that light is coming from one direction as well as being blocked out by his hood. It came out just how I wanted and am currently using it as my phone background! Below is the original image I used mostly for Darth Maul's face. I changed the look of it slightly by going with an all black background and by just showing some of his hood.

Illustrator Sketch: Exquisite Corpse

This is my version of one of the sketches we could choose to vectorize in Illustrator. At first I was just sticking to the sketch but then I was getting bored of his plain stomach, so I decided to throw a tuxedo on him. I also turned the clown shoes he was wearing into converse. I felt it was necessary to put the cat under a spotlight since he is so dressed up. I used a gradient for the spotlight and then made it appear for there to be a shadow on the floor.

Final Cerberus Logo

I came up with this concept for my logo after I had sketched the drawings for class. I incorporated the ideas of a silhouette as well as using a hot dog. I thought that the three headed dog would be a recognizable logo for the restaurant and to clarify what the product is, the hotdog in the background avoids confusion. I think the gray in the background works nicely with the colors of the hotdog and dogs. It doesn't overshadow it and they don't clash. I liked the class' idea to use a Greek font and loved the font Basileus on DaFont.com so I made sure I used it for the name. I think this file would be able to be saved as a PNG so the white would be removed and could be used on anything from t-shirts to napkins.

-Logo Sketches previously posted.

Guitar Calligram

I decided to do a guitar for my calligram because I love playing guitar. I also love the Beatles which is why I chose the lyrics to their song "While My Guitar Gently Weeps" to make the shape of the entire guitar as well as the details inside. I couldn't be happier with the way it turned out and I would definitely make another calligram sometime, I thought it was a lot of fun to make.

Logo Sketches

I decided to go with Cerberus Hot Dogs for my company and here are some of my sketches of ideas I have for my logo!

Logo Critiques

1. This logo is just a simple silhouette but it is still very memorable. Kids will recognize it as a Disney symbol and know that the movie is meant for them when the logo shows up before the film. Even without Walt Disney's signature, the logo is just as recognizable as a Disney figure. Recently, before films they have been using a really detailed CGI version of the castle instead of just the silhouette. They are trying to keep the logo as timeless as possible. 

2. I like this logo because it is extremely simple, on consisting of words with a simple font, yet it is still recognizable and memorable. The simplicity of the colors makes it stick out more than if it was just the words FedEx. I really like that an arrow forms between the E and X, giving the impression to the customers that their product is always moving forward. Even though the company stands for Federal Express, the abbreviation, FedEx, is catchier and more unique. This logo has great usability, it could be on anything at any size, from their planes and buses to a small package. It is very durable as well, I do not think they have ever changed their logo and since it is so simple, their logo design is timeless.

3. This company Quiksilver/Roxy was smart enough to release two separate brands, surfing gear/clothes for men and women. I really love how they simply used the Quiksilver logo, rotated and doubled it, to make the Roxy logo, which happens to form the shape of a heart. I think they used this for the girls to make it seem "girlier" and more appealing to girls for a surfing brand. The company has great durability, they have not changed either logo since they have released the company. Sometimes on t-shirts they will add textures and different colors, but never drastically altering with the logo.

4. This is the logo for the popular social media website Twitter. The website revolves around "tweets" which is why the creators chose a bird for the logo. I like this logo because it doesn't need any words to get it's purpose across. Which also makes it very universal. People from all over the world of different nationalities and cultures use this website, and all it takes is a bird and a recognizable blue color to be recognized. This logo is seen as small as an app on a phone or it could be on a huge billboard, it has great usability. They have only modified the bird slightly since releasing the website to keep it as up to date as possible.

5. Before XBOX was released, I had never heard the term before. It's name is so unique that you could never confuse the name with another company. When the gaming system first came out, their logo was slightly different. Now they have changed it to seem more futuristic and new. In this day and age, the words "XBOX 360" do not need to be there in order to be recognized. People from around the world use this system and clearly know the XBOX sign when they see one.

My Company/Product Ideas

1. Cerberus: Cerberus is a 3 headed dog in Greek and Roman mythology. I would use this figure as a symbol for a hot dog restaurant and maybe incorporate the 3 headed dog holding or eating hot dogs. The logo could be on the restaurant sign as well as their napkins and possibly t-shirts.

2. Smell O' Vision: A TV that excretes scents as you watch a program. The logo would have a giant nose and possibly a TV underneath it.

3. WallFlower Productions: I like the idea of a simple, lone flower design for a production company. This design would be shown before movies or extremely small at the bottom of posters.

4. Big Foot: A shoe company for people with oversized feet. The logo could be either a gorilla or just a simple footprint. The logo would be seen on the product's box and the bottom of the shoes.

5. Submerged: A scuba diving company selling all of their own scuba gear. Logo would be on everything from goggles to fins. Might have to be small so the design would have to be quite simple.

Ascii Pac-Man Project

From the moment we received this assignment I knew I wanted to do a Pac-Man game for my graphic.  I started by printing out a graph and drawing the layout of the game, looking at a Google image of a Pac-Man game to make sure everything looked the same.  At first the graph helped me immensely with the coding for the border, however, once it was time to create the ghosts, some of the points had to be guesstimated.  In order to get the exact colors from the game I uploaded the Google image of the Pac-Man game onto PhotoShop. Then I used the eyedropper tool to pick up the different colors and used their RGB codes to enter into TextWrangler.  The borders of the game, as well as some of the odd shapes, were made with lines.  Some of the other boxes were made using  rectangles.  Pac-Man was made using 2 circles; I just played around with the points until it made just what I wanted!  The ghosts were started using quadratic curves and then finished off using lines. In order to make the cherry’s stems I used quadratic and Bezier curves. The actual cherry and the circles that Pac-Man eats are simply just made of circles.

I think my piece is successful because it is immediately recognizable. Most people know Pac-Man, have played the game, or at least know what the game is about. I love the way the graphic turned out and I am extremely proud of it.  Below is the Google image I used as a reference, the graph I drew on as a guide, and my code.

CODE:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

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

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

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

//BLACK BACKGROUND

context.beginPath();

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

//COLOR FILL

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

context.fill();

context.stroke();

//LEFT LINE

context.beginPath();

context.moveTo(5, 200);

context.lineTo(5, 5);

context.lineTo(375, 5);

context.lineTo(375, 100);

context.lineTo(425, 100);

context.lineTo(425, 5);

context.lineTo(795, 5);

context.lineTo(795, 200);

context.lineTo(650, 200);

context.lineTo(650, 280);

context.lineTo(795, 280);

context.lineTo(795, 340);

context.lineTo(650, 340);

context.lineTo(650, 420);

context.lineTo(796, 420);

context.lineTo(795, 500);

context.lineTo(720, 500);

context.lineTo(720, 530);

context.lineTo(795, 530);

context.lineTo(795, 595);

context.lineTo(5, 595);

context.lineTo(5, 530);

//LEFT SIDE BOTTOM

context.lineTo(90, 530);

context.lineTo(90, 500);

context.lineTo(5, 500);

context.lineTo(5, 420);

context.lineTo(150, 420);

context.lineTo(150, 340);

context.lineTo(5, 340);

context.lineTo(5, 280);

context.lineTo(150, 280);

context.lineTo(150, 200);

context.lineTo(5, 200);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 4;

context.stroke();

//INNER RECTANGLE

context.beginPath();

context.moveTo(375, 280);

context.lineTo(300, 280);

context.lineTo(300, 380);

context.lineTo(500, 380);

context.lineTo(500, 280);

context.lineTo(425, 280);

context.lineWidth = 5;

context.stroke();

//LINE ABOVE INNER RECTANGLE

context.beginPath();

context.moveTo(375, 278);

context.lineTo(425, 278);

context.strokeStyle = 'rgb(255, 171, 255)';

context.lineWidth = 3.5;

context.stroke();

//MAZE UNDER BOX

context.beginPath();

context.moveTo(300, 430);

context.lineTo(500, 430);

context.lineTo(500, 450);

context.lineTo(430, 450);

context.lineTo(430, 489);

context.lineTo(380, 489);

context.lineTo(380, 450);

context.lineTo(300, 450);

context.lineTo(300, 430);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 3;

context.stroke();

//MAZE UNDER BOX2

context.beginPath();

context.moveTo(300, 530);

context.lineTo(500, 530);

context.lineTo(500, 550);

context.lineTo(430, 550);

context.lineTo(430, 585);

context.lineTo(380, 585);

context.lineTo(380, 550);

context.lineTo(300, 550);

context.lineTo(300, 530);

context.stroke();

//LEFT BOX TOP-BOTTOM

context.beginPath();

context.rect(50, 140, 130, 30);

context.stroke();

//MIDDLE MAZE-LEFT SIDE

context.beginPath();

context.moveTo(220, 170);

context.lineTo(220, 340);

context.lineTo(240, 340);

context.lineTo(240, 255);

context.lineTo(280, 255);

context.lineTo(280, 235);

context.lineTo(240, 235);

context.lineTo(240, 170);

context.lineTo(220, 170);

context.stroke();

//MIDDLE MAZE-RIGHT SIDE

context.beginPath();

context.moveTo(580, 170);

context.lineTo(580, 340);

context.lineTo(560, 340);

context.lineTo(560, 255);

context.lineTo(520, 255);

context.lineTo(520, 235);

context.lineTo(560, 235);

context.lineTo(560, 170);

context.lineTo(580, 170);

context.stroke();

//UNDERNEATH MIDDLE MAZE-LEFT

context.beginPath();

context.moveTo(220, 400);

context.lineTo(220, 460);

context.lineTo(240, 460);

context.lineTo(240, 400);

context.lineTo(220, 400);

context.stroke();

//BOTTOM MAZE--LEFT

context.beginPath();

context.moveTo(220, 520);

context.lineTo(220, 555);

context.lineTo(128, 555);

context.lineTo(128, 578);

context.lineTo(250, 578);

context.lineTo(250, 520);

context.lineTo(220, 520);

context.stroke();

//BOTTOM MAZE--RIGHT***

context.beginPath();

context.moveTo(580, 520);

context.lineTo(580, 555);

context.lineTo(672, 555);

context.lineTo(672, 578);

context.lineTo(550, 578);

context.lineTo(550, 520);

context.lineTo(580, 520);

context.stroke();

//UNDERNEATH MIDDLE MAZE--RIGHT

context.beginPath();

context.moveTo(580, 400);

context.lineTo(580, 460);

context.lineTo(560, 460);

context.lineTo(560, 400);

context.lineTo(580, 400);

context.stroke();

//LEFT SIDE CORNER MAZE

context.beginPath();

context.moveTo(60, 455);

context.lineTo(155, 455);

context.lineTo(155, 530);

context.lineTo(130, 530);

context.lineTo(130, 480);

context.lineTo(60, 480);

context.lineTo(60, 455);

context.stroke();

//RIGHT SIDE CORNER MAZE

context.beginPath();

context.moveTo(740, 455);

context.lineTo(645, 455);

context.lineTo(645, 530);

context.lineTo(670, 530);

context.lineTo(670, 480);

context.lineTo(740, 480);

context.lineTo(740, 455);

context.stroke();

//BIG--ENERGY CIRCLE

context.beginPath();

context.arc(28, 60, 13, 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//BIG--ENERGY CIRCLE2 (RIGHT SIDE)

context.beginPath();

context.arc(768, 470, 13, 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE1

context.beginPath();

context.arc(28, 90, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE2

context.beginPath();

context.arc(28, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE3

context.beginPath();

context.arc(55, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE4

context.beginPath();

context.arc(85, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE5

context.beginPath();

context.arc(115, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE6

context.beginPath();

context.arc(145, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE7

context.beginPath();

context.arc(175, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE8

context.beginPath();

context.arc(205, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY1--RIGHT SIDE

context.beginPath();

context.arc(650, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY2--RIGHT SIDE

context.beginPath();

context.arc(680, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY3--RIGHT SIDE

context.beginPath();

context.arc(710, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY4--RIGHT SIDE

context.beginPath();

context.arc(740, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY5--RIGHT SIDE

context.beginPath();

context.arc(770, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY1--MIDDLE

context.beginPath();

context.arc(407, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY2--MIDDLE

context.beginPath();

context.arc(437, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY3--MIDDLE

context.beginPath();

context.arc(467, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY4--MIDDLE

context.beginPath();

context.arc(497, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY5--MIDDLE

context.beginPath();

context.arc(377, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY6--MIDDLE

context.beginPath();

context.arc(347, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY7--MIDDLE

context.beginPath();

context.arc(317, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY1--TOP RIGHT

context.beginPath();

context.arc(772, 110, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY2--TOP RIGHT

context.beginPath();

context.arc(772, 140, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY3--TOP RIGHT

context.beginPath();

context.arc(772, 170, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY4--TOP RIGHT

context.beginPath();

context.arc(772, 80, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//SMALL ENERGY5 --TOP RIGHT

context.beginPath();

context.arc(772, 50, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 171)';

context.fillStyle = 'rgb(255, 255, 171)';

context.fill();

context.stroke();

//PACMAN

context.beginPath();

context.arc(250, 111, 19, 2.9, 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 87)';

context.fillStyle = 'rgb(255, 255, 87)';

context.fill();

context.arc(250, 111, 19, 3.7, 2 * Math.PI, false);

context.lineWidth = 3;

context.strokeStyle = 'rgb(255, 255, 87)';

context.fillStyle = 'rgb(255, 255, 87)';

context.fill();

context.stroke();

//MAZE ABOVE BOX

context.beginPath();

context.moveTo(300, 140);

context.lineTo(500, 140);

context.lineTo(500, 160);

context.lineTo(430, 160);

context.lineTo(430, 200);

context.lineTo(380, 200);

context.lineTo(380, 160);

context.lineTo(300, 160);

context.lineTo(300, 140);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 3;

context.stroke();

//FIRST SQUARE FAR LEFT

context.beginPath();

context.rect(50, 30, 130, 55);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 3;

context.stroke();

//SQUARE 2 TOP LEFT 

context.beginPath();

context.rect(230, 30, 100, 55);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 3;

context.stroke();

//SQUARE 3 RIGHT SIDE

context.beginPath();

context.rect(475, 30, 100, 55);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 3;

context.stroke();

//SQUARE 4 FAR RIGHT

context.beginPath();

context.rect(620, 30, 130, 55);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 3;

context.stroke();

//UNDERNEARTH SQUARE 4--RIGHT SIDE

context.beginPath();

context.rect(620, 130, 130, 30);

context.strokeStyle = 'rgb(87, 87, 255)';

context.lineWidth = 3;

context.stroke();

//GHOST1(ORANGE)

context.beginPath();

context.moveTo(400, 350);

context.quadraticCurveTo(425, 295, 455, 350);

context.strokeStyle = 'rgb(255, 87, 3)';

context.fillStyle = 'rgb(255, 87, 3)';

context.fill();

context.stroke();

context.beginPath();

context.moveTo(400, 350);

context.lineTo(400, 375);

context.lineTo(417, 359);

context.lineTo(427, 375);

context.lineTo(435, 359);

context.lineTo(454, 375);

context.lineTo(455, 350);

context.fillStyle = 'rgb(255, 87, 3)';

context.fill();

context.stroke();

//ORANGE WHITE EYES

context.beginPath();

context.arc(415, 343, 6 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(251, 251, 251)';

context.fillStyle = 'rgb(251, 251, 251)';

context.fill();

context.stroke();

context.beginPath();

context.arc(437, 343, 6 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(251, 251, 251)';

context.fillStyle = 'rgb(251, 251, 251)';

context.fill();

context.stroke();

//ORANGE BLUE--EYES

context.beginPath();

context.arc(415, 346, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(87, 87, 255)';

context.fillStyle = 'rgb(87, 87, 255)';

context.fill();

context.stroke();

context.beginPath();

context.arc(437, 346, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(87, 87, 255)';

context.fillStyle = 'rgb(87, 87, 255)';

context.fill();

context.stroke();

//GREEN GHOST

context.beginPath();

context.moveTo(155, 250);

context.quadraticCurveTo(180, 200, 210, 250);

context.strokeStyle = 'rgb(39, 196, 40)';

context.fillStyle = 'rgb(39, 196, 40)';

context.fill();

context.stroke();

context.beginPath();

context.moveTo(155, 250);

context.lineTo(155, 275);

context.lineTo(172, 259);

context.lineTo(182, 275);

context.lineTo(190, 259);

context.lineTo(209, 275);

context.lineTo(210, 250);

context.fillStyle = 'rgb(39, 196, 40)';

context.fill();

context.stroke();

//GREEN--WHITE EYES

context.beginPath();

context.arc(171, 242, 6 , 0 , 2 * Math.PI, true);

context.strokeStyle = 'rgb(251, 251, 251)';

context.fillStyle = 'rgb(251, 251, 251)';

context.fill();

context.lineWidth = 3;

context.stroke();

context.beginPath();

context.arc(193, 242, 6 , 0 , 2 * Math.PI, true);

context.strokeStyle = 'rgb(251, 251, 251)';

context.fillStyle = 'rgb(251, 251, 251)';

context.fill();

context.lineWidth = 3;

context.stroke();

//GREEN GHOST--BLUE EYES

context.beginPath();

context.arc(171, 238, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(87, 87, 255)';

context.fillStyle = 'rgb(87, 87, 255)';

context.fill();

context.stroke();

context.beginPath();

context.arc(193, 238, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(87, 87, 255)';

context.fillStyle = 'rgb(87, 87, 255)';

context.fill();

context.stroke();

//CHERRY

context.beginPath();

context.arc(395, 415, 6 , 0 , 2 * Math.PI, true);

context.strokeStyle = 'rgb(255, 0, 0)';

context.fillStyle = 'rgb(255, 0, 0)';

context.fill();

context.lineWidth = 4.5;

context.stroke();

context.beginPath();

context.arc(408, 418, 9 , 0 , 2 * Math.PI, true);

context.strokeStyle = 'rgb(0, 0, 0)';

context.fillStyle = 'rgb(255, 0, 0)';

context.fill();

context.lineWidth = 1;

context.stroke();

//STEM

context.beginPath();

context.moveTo(397, 415);

context.bezierCurveTo(398, 405, 399, 400, 412, 393);

context.strokeStyle = 'rgb(222, 148, 82)';

context.fillStyle = 'rgb(222, 148, 82)';

context.lineWidth = 1.3

context.fill();

context.quadraticCurveTo(406, 395, 397, 415);

context.strokeStyle = 'rgb(222, 148, 82)';

context.fillStyle = 'rgb(222, 148, 82)';

context.fill();

context.stroke();

context.beginPath();

context.moveTo(412, 393);

context.quadraticCurveTo(406, 405, 408, 418);

context.strokeStyle = 'rgb(0, 0, 0)';

context.fillStyle = 'rgb(222, 148, 82)';

context.fill();

context.quadraticCurveTo(408, 405, 412, 393);

context.strokeStyle = 'rgb(222, 148, 82)';

context.fill();

context.stroke();

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

};

</script>

</head>

<body>

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

</body>

</html>