Animation

 

Animation

My animation project is an advertisement for my brand "I like 2." I used three hobbies to ask the question "what do you like 2 do?" and at the end featured my product.

Anamatic

 

My animatic is a simple look at what I plan on doing with my animation project. I plan on doing stop motion portraying the different things 2 do, like surd, paint, dance and so forth. I  also plan on tweaking the opening and closing slides.

Lyrical Collage

Okay so my inspiration was from Led Zeppelin's "Immigrant Song." The song talks about Iceland and vikings so my background image is an Iceland landscape with the image of a midnight sun overlay with the opacity turned down. I really like how the sun over the background image looks, the colors with the sun looks very dreamlike. This goes with the image of the vikings. I turned their opacity down so they look sort of like ghosts and of course their ship is in the back of them. I added the guitars as sort of a nod to Led Zeppelin and rock n' roll.

Tardis in the Clouds

I used the brush tool to fill in the tardis and to create the stars and clouds. I gradually lightened the opacity on the clouds as they got higher. I used the draw tool to make the tardis and the stairs in the clouds. I filled the entire background before the rest of the image.

Magazine Cover

So I created "UFlorida Chomp" which is a campus gossip magazine with the focus on a recent game at the football stadium. I enhanced the background picture and the tailgate picture to make the color pop. Then I faded the background so it was easier to read text. The text uses bevel for the inside effect. The bottom 3 pictures I used the selection tool to select just the person so they would pop out more and I like this effect. I added some orange and blue borders around the top right pictures. Overall this was a fun project.

Self Insertion

HTML

So this is a simple image created with html code. I started with the most complicated component, the sun. The sun uses a lot of quadratic curves and took a while to figure out all the right coordinates. Then I moved to filling the sky and water and creating the clouds and the birds. The boat was pretty simple and I saved it for last.

<!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);

context.lineWidth = 5;

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

context.fillStyle = 'rgb(230, 240, 255)';

context.fill();

context.stroke();

//Boat

context.beginPath();

context.moveTo(100, 400);

context.quadraticCurveTo(300, 670, 500, 400);

context.lineTo(100, 400);

context.closePath();

context.lineWidth = 7;

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

context.fillStyle = 'rgb(245, 60, 45)';

context.fill();

context.stroke();

//Water

context.beginPath();

context.moveTo(0, 500);

context.quadraticCurveTo(100, 525, 180, 475);

context.bezierCurveTo(275, 580, 325, 535, 400, 475);

context.quadraticCurveTo(530, 570, 615, 500);

context.quadraticCurveTo(750, 550, 800, 500);

context.lineTo(800,600);

context.lineTo(0, 600);

context.lineTo(0, 500);

context.lineWidth = 5;

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

context.fillStyle = 'rgb(100, 250, 255)';

context.fill();

context.stroke();

//Cloud2

context.beginPath();

context.moveTo(470, 60);

context.quadraticCurveTo(550, 80, 465, 120);

context.quadraticCurveTo(420, 190, 380, 140);

context.quadraticCurveTo(260, 140, 340, 80);

context.quadraticCurveTo(270, 20, 390, 30);

context.quadraticCurveTo(450, 5, 470, 60);

context.lineWidth = 4;

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

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

context.fill();

context.stroke();

//Rays

context.beginPath();

context.moveTo(430, 40);

context.quadraticCurveTo(550, 175, 560, 25);

context.quadraticCurveTo(605, 140, 675, 5);

context.quadraticCurveTo(675, 160, 750, 125);

context.quadraticCurveTo(680, 200, 800,200);

context.quadraticCurveTo(630,230, 780, 325);

context.quadraticCurveTo(605, 245, 680, 380);

context.quadraticCurveTo(580, 255, 600, 425);

context.quadraticCurveTo(575, 225, 450, 375);

context.quadraticCurveTo(580, 225, 400, 250);

context.quadraticCurveTo(570, 200, 365, 180);

context.quadraticCurveTo(565, 190, 430, 40);

context.lineWidth = 5;

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

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

context.fill();

context.stroke();

//Circle Of Sun

context.beginPath();

context.arc(600, 200, 100, 0, 2 * Math.PI, true);

context.lineWidth = 3;

context.strokeStyle = 'rgb(250, 200, 10)';

context.fillStyle = 'rgb(250, 200, 10)';

context.fill();

context.stroke();

//Cloud 1

context.beginPath();

context.moveTo(75, 125);

context.quadraticCurveTo(80, 50, 160, 120);

context.quadraticCurveTo(250, 100, 225, 175);

context.quadraticCurveTo(300, 230, 200, 240);

context.quadraticCurveTo(150, 300, 100, 210);

context.quadraticCurveTo(2, 200, 75, 125);

context.lineWidth = 4;

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

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

context.fill();

context.stroke();

//Sails

context.beginPath();

context.moveTo(85, 390);

context.lineTo(265, 390);

context.lineTo(265, 150);

context.quadraticCurveTo(170, 250, 85, 390);

context.closePath();

context.lineWidth = 5;

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

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

context.fill();

context.stroke();

context.beginPath();

context.moveTo(285, 390);

context.lineTo(515, 390);

context.quadraticCurveTo(410, 250, 285, 150);

context.lineTo(285, 390);

context.closePath();

context.lineWidth = 5;

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

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

context.fill();

context.stroke();

//Birds

context.beginPath();

context.moveTo(200, 100);

context.quadraticCurveTo(240, 40, 295, 70);

context.quadraticCurveTo(350, 25, 395, 50);

context.lineWidth = 4;

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

context.stroke();

context.beginPath();

context.moveTo(50, 300);

context.quadraticCurveTo(75, 200, 150, 200);

context.quadraticCurveTo(180, 100, 280, 120);

context.lineWidth = 4;

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

context.stroke();

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

};

</script>

</head>

<body>

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

</body>

</html>