BOOKLET

Booklet

Animation Predator versus Prey

My very first animation! Over 450 hand drawn frames in Photoshop! 

Audio made using voice effects only for comic relief.

Photo Compression and GIF color changes

 100% quality

 75% quality

 50% quality

 25% quality

 0% quality

 256 colors

 64 colors

 16 colors

4 colors

Art Project

I just wanted to see George Washington with a mustache! 

Somewhere

Somewhere I've never been, but wish to go!

Autoscopy Photoshop

My favorite monster FRANKEN-MATT!!

Practice Lizard Man

Black and White Coloring Photoshop

realistic coloring

extreme coloring

POSTER

The result of asking my roommate what words come to mind when he thinks of me!

Because my roommate is from Vietnam, I decided to incorporate his words into a soviet style propaganda poster. Creating a cool mix between the cultures!

MESH TOOL

My old swingline Meshed

LOGOS/BUSINESS CARDS

Possible ideas for my electrician and advertising logos 

logos for my fire rescue and hockey cards... I decided not to use hockey though

This sketches just looked to cheesy to use!  

Some of my more successful sketches where on this page love the KAYAK logo! Unfortunately the 

custom boat logo didn't come out as I thought it would in Illustrator.  

The final product of my sketches, I really wanted to keep the designs simple and professional looking, people have a tendency to hold onto a business card that is black and white versus colorful  ones because colorful cards tend to be confused with promotional cards and advertisements that get thrown away.      

CALLIGRAM

My Recreation of Quentin Tarantino as Mr.Brown in the movie Reservoir Dogs

Dreamweaver Final "Mooninte" scene from Aqua Teen Hunger Force recreated

 Top: my recreation of screenshot from Aqua Teen Hunger Force
Bottom:original screenshot of "mooninite" scene in Aqua Teen Hunger Force

context.beginPath();
 // background "space"
 var snaildown = context.createLinearGradient(500,100,250,700,200,400);


snaildown.addColorStop(0,"rgb(10,10,10)");

snaildown.addColorStop(0.20,"rgb(16,17,18)");

snaildown.addColorStop(0.40,"rgb(38,40,41)");

snaildown.addColorStop(0.60,"rgb(65,68,69)");

snaildown.addColorStop(0.80,"rgb(40,45,46)");

snaildown.addColorStop(1,"rgb(22,25,26)");

context.closePath();


context.beginPath();

context.rect(0,0, canvas.width, canvas.height);

context.fillStyle=snaildown;

context.fill();

context.closePath();

 //earth_01 blue


 context.beginPath();

 context.moveTo(475,00);
 context.quadraticCurveTo(490,450,800,500);
 context.lineTo(800,0);
 context.lineTo(500,0);
 context.fillStyle="rgb(127,185,250)";
 context.fill();
 context.stroke();

 context.closePath();

// earth contintents
context.beginPath();

context.moveTo(550,0)
context.bezierCurveTo(525,100,500,150,550,175);
context.bezierCurveTo(575,200,560,285,585,325);
context.bezierCurveTo(575,250,600,350,600,225);
context.bezierCurveTo(600,175,650,175,700,225);
context.bezierCurveTo(700,200,750,360,800,300);
context.lineTo(800,0)
context.lineTo(550,0)
context.fillStyle='green';
context.fill();

context.stroke();

//pond/sea
context.closePath();

context.beginPath();
context.moveTo(800,100);
context.quadraticCurveTo(650,125,800,150);
context.lineTo(800,100);
context.fillStyle='rgb(127,185,250)';
context.fill();
context.stroke();

context.closePath();




//spaceship interior purple border
 context.beginPath();
 context.moveTo(775,500);
 context.lineTo(775,50);
 context.lineTo(175,50);
 context.lineTo(175,550);
 context.lineTo(250,625);
 context.lineTo(0,625);
 context.lineTo(0,0);
 context.lineTo(810,0);
 context.lineTo(810,600);
 context.lineTo(775,550);

 context.fillStyle="rgb(178,15,242)";
 context.fill();
 context.stroke();

 context.closePath();

 //spaceship interior steel beam
context.beginPath();
context.moveTo(775,550);
context.lineTo(175,550);
context.lineTo(250,625);
context.lineTo(810,600);
context.lineTo(775,550);

context.fillStyle="grey";
context.fill();
context.stroke();

context.closePath();

// black dots/holes in steel beam

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.15;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.7;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3.1;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

 var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3.6;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.95;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.79;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.65;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.53;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.43;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.34;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.26;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.19;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.13;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.07;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

//mooninite body

context.beginPath();

context.moveTo(100,575);
context.lineTo(100,425);
context.lineTo(125,425);
context.lineTo(125,325);
context.lineTo(115,325);
context.lineTo(115,275);
context.lineTo(150,275);
context.lineTo(150,225);
context.lineTo(225,225);
context.lineTo(225,250);
context.lineTo(250,250);
context.lineTo(250,300);
context.lineTo(275,300);
context.lineTo(275,275);
context.lineTo(325,275);
context.lineTo(325,225);
context.lineTo(375,225);
context.lineTo(375,425);
context.lineTo(400,425);
context.lineTo(400,575);
context.lineTo(100,575);

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

context.stroke();

context.closePath();

// left arm
context.beginPath();
context.moveTo(100,425);
context.lineTo(75,425);
context.lineTo(75,450);
context.lineTo(50,450);
context.lineTo(50,475);
context.lineTo(25,475);
context.lineTo(25,525);
context.lineTo(50,525);
context.lineTo(50,475);
context.lineTo(75,475);
context.lineTo(75,450);
context.lineTo(100,450);
context.lineTo(100,425);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//right arm

context.beginPath();
context.moveTo(400,425);
context.lineTo(475,425);
context.lineTo(475,350);
context.lineTo(450,350);
context.lineTo(450,325);
context.lineTo(475,325);
context.lineTo(475,250);
context.lineTo(500,250);
context.lineTo(500,325);
context.lineTo(525,325);
context.lineTo(525,350);
context.lineTo(500,350);
context.lineTo(500,450);
context.lineTo(400,450);
context.lineTo(400,425);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//left foot

context.beginPath();
context.moveTo(200,575);
context.lineTo(200,590);
context.lineTo(125,590);
context.lineTo(125,625);
context.lineTo(225,625);
context.lineTo(225,575);
context.lineTo(200,575);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

// right foot
context.beginPath();
context.moveTo(300,575);
context.lineTo(300,590);
context.lineTo(375,590);
context.lineTo(375,625);
context.lineTo(275,625);
context.lineTo(275,575);
context.lineTo(300,575);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//// mouth
context.beginPath();
context.moveTo(175,425);
context.lineTo(325,425);
context.lineTo(325,450);
context.lineTo(175,450);
context.lineTo(175,450);

context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//left eye
context.beginPath();
context.moveTo(175,350);
context.lineTo(225,350);
context.lineTo(225,375);
context.lineTo(175,375);
context.lineTo(175,350);

context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//right eye
context.beginPath();
context.moveTo(275,350);
context.lineTo(325,350);
context.lineTo(325,375);
context.lineTo(275,375);
context.lineTo(275,350);

context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();



//left eye brow
context.beginPath();
context.moveTo(137.5,362.5);
context.lineTo(137.5,350);
context.lineTo(150,350);
context.lineTo(150,337.5);
context.lineTo(162.5,337.5);
context.lineTo(162.5,325);
context.lineTo(175,325);
context.lineTo(175,312.5);
context.lineTo(187.5,312.5);
context.lineTo(187.5,325);
context.lineTo(175,325);
context.lineTo(175,337.5);
context.lineTo(162.5,337.5);
context.lineTo(162.5,350);
context.lineTo(150,350);
context.lineTo(150,362.5);
context.lineTo(137.5,362.5);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();


//right eye brow
context.beginPath();
context.moveTo(362.5,362.5);
context.lineTo(362.5,350);
context.lineTo(350,350);
context.lineTo(350,337.5);
context.lineTo(337.5,337.5);
context.lineTo(337.5,325);
context.lineTo(325,325);
context.lineTo(325,312.5);
context.lineTo(312.5,312.5);
context.lineTo(312.5,325);
context.lineTo(325,325);
context.lineTo(325,337.5);
context.lineTo(337.5,337.5);
context.lineTo(337.5,350);
context.lineTo(350,350);
context.lineTo(350,362.5);
context.lineTo(362.5,362.5);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();


var text                 = "I hope you can see this, I'm doing it as hard as I can";

/// font style= bold, normal, italic
/// size is always in pixels 10px
/// font family: any universal font

context.beginPath();
context.font             = 'normal 35px Impact';
context.fillStyle         = 'white';
context.fillText(text, 25, canvas.height -450); // change
context.closePath();

Initial Thoughs

About me: -I'm a transfer student from Rutgers
-Born and raised in New Jersey
-23 years old (started college late)
-I love to fish and play Hockey
-ADPR Major

What I think about the class so far: -8am can be a little tough
-I love the passion Professor Echeverry has for this class
-looking forward to some of the projects