MorphX Project

Going to college far away from home made the task of finding an old picture of me as a child a bit difficult. My mother helped out by sending this picture of me at 24 months old happily holding an ice cream cone at my Godfathers ice cream shop called Carvel's.

This was me at 2 years old.

This is me now at 21 years old.

This is the video with both pictures morphed together, showing my growth over the last 19 years.

This was the process of using Morphx and outlining my facial features, body shape, etc.

Autoscopy with Color and Dither Adjustments

         

                                                          GIF. 64 Colors. 25 Dithering.

                                                          GIF. 32 Colors. 60 Dithering.

                                                                   

                                                          GIF. 16 Colors. 75 Dithering.

GIF. 8 Colors. 0 Dither.

GIF. 2 Colors. 100 Dither.

Autoscopy as JPEG

JPEG 100%

JPEG 75%

JPEG 50%

JPEG 25%

Somewhere I've Never Been

Above is the original background image with the setting in Morocco. I chose this destination because I studied abroad in Barcelona, Spain a year ago and wanted to go to Morocco but unfortunately didn't make it there!

This is a picture I took in Amsterdam and used to crop myself out and insert into the Moroccan background. 

This is the final image with me cropped in sitting on a camel in Morocco! I finally made it! ;)

Autoscopy

This is the original photo I took of myself.

This is my final autoscopy. 

I wanted to show one of my biggest fears which is growing old by adding a layer of wrinkled skin over my face. I also included my main stressors in life currently: Family, graduation, my job search struggles, and college. Additionally, I added a layer of clouds to represent how clouded my head is right now as I am graduating college in three months and am still unsure about what my future entails.

B&W Colored

This is the original photograph of me surfing in the Atlantic Ocean

I adjusted the hue/saturation and made the picture solely black and white.

This is the ending product after coloring the image, adjusting the opacity, and playing around with new shapes and tools in Photoshop. 

Three Favorite Photoshop Tutorials

My top three favorite photoshop tutorials include:

• 3D Timeline Animation
• The Puppet Warp Tool
• Stack Mode

CANVAS PROJECT

var grd1 = context.createRadialGradient(401,329,155,401,329,400);
grd1.addColorStop(0,'rgb(174,96,216)');
grd1.addColorStop(1,'rgb(91,104,209)');

var grd2 = context.createLinearGradient(150,0,600,600);
grd2.addColorStop(0,'rgb(137,111,77)');
grd2.addColorStop(1, 'rgb(255,224,187)');

var grd3 = context.createLinearGradient(81,317,81,538);
grd3.addColorStop(0,'rgb(181,165,143)');
grd3.addColorStop(0.5,'rgb(181,165,143)');
grd3.addColorStop(1, 'rgb(249,238,222)');


context.beginPath();
context.rect(0,0,800,600);
context.lineWidth = 4;
context.stroke();
context.fillStyle = grd1;
context.fill();


context.closePath();

context.beginPath();

context.moveTo(299,68);
context.lineTo(276,239);
context.lineTo(259,418);
context.lineTo(259,542);
context.lineTo(317,542);
context.lineTo(317,236);
context.lineTo(299,68);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(350,26);
context.lineTo(323,236);
context.lineTo(317,305);
context.lineTo(317,542);
context.lineTo(374,542);
context.lineTo(374,241);
context.lineTo(350,26);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(449,30);
context.lineTo(422,226);
context.lineTo(422,333);
context.lineTo(422,542);
context.lineTo(472,542);
context.lineTo(472,234);
context.lineTo(464,144);
context.lineTo(449,40);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(495,68);
context.lineTo(472,231);
context.lineTo(472,542);
context.lineTo(520,542);
context.lineTo(520,332);
context.lineTo(514,229);
context.lineTo(495,68);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(139,346);
context.lineTo(114,418);
context.lineTo(163,418);
context.lineTo(139,346);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(186,351);
context.lineTo(163,418);
context.lineTo(212,418);
context.lineTo(186,351);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(234,346);
context.lineTo(212,418);
context.lineTo(261.5,418);
context.lineTo(234,346);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.rect(114,418,49,124);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.rect(163,418,49,124);

context.fillStyle = grd3;
context.fill();

context.closePath();

context.beginPath();

context.rect(212,418,49,124);

context.fillStyle = grd3;
context.fill();

context.closePath();


context.beginPath();

context.moveTo(520,319);
context.lineTo(527,337);
context.lineTo(532,319);
context.lineTo(538,342);
context.lineTo(542,347);
context.lineTo(545,364);
context.lineTo(551,326);
context.lineTo(561,380);
context.lineTo(561,413);
context.lineTo(577,413);
context.lineTo(570,351);
context.lineTo(577,312);
context.lineTo(591,356);
context.lineTo(591,417);
context.lineTo(606,417);
context.lineTo(599,365);
context.lineTo(606,317);
context.lineTo(614,346);
context.lineTo(620,320);
context.lineTo(632,377);
context.lineTo(621,379);
context.lineTo(632,417);
context.lineTo(643,417);
context.lineTo(637,542);
context.lineTo(520,542);
context.lineTo(520,319);

context.fillStyle = grd3;
context.fill();

context.closePath();


context.beginPath();

context.moveTo(337,403);
context.lineTo(314,521);
context.lineTo(314,551);
context.lineTo(360,551);
context.lineTo(360,493);
context.lineTo(337,403);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(402,301);
context.lineTo(360,493);
context.lineTo(360,551);
context.lineTo(493,551);
context.lineTo(439,493);
context.lineTo(402,301);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(462,420);
context.lineTo(439,493);
context.lineTo(439,551);
context.lineTo(484,551);
context.lineTo(484,529);
context.lineTo(462,420);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(374,270);
context.lineTo(402,257);
context.lineTo(422,270);
context.lineTo(422,284);
context.lineTo(402,270);
context.lineTo(374,284);
context.lineTo(374,270);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.arc(137,449,10,0*Math.PI,2*Math.PI,false);
context.lineWidth = 2;
context.fillStyle = "rgba(0,0,0,.7)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();

context.arc(237,449,10,0*Math.PI,2*Math.PI,false);
context.lineWidth = 2;
context.fillStyle = "rgba(0,0,0,.7)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();

context.arc(187,449,10,0*Math.PI,2*Math.PI,false);
context.lineWidth = 2;
context.fillStyle = "rgba(0,0,0,.7)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(72,117);
context.bezierCurveTo(77,157,145,93,162,144);
context.bezierCurveTo(157,92,252,144,241,99);
context.quadraticCurveTo(228,62,181,83);
context.quadraticCurveTo(148,61,133,93);
context.quadraticCurveTo(82,65,72,117);

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

context.closePath();

context.beginPath();


context.font = 'italic 30pt Calibri';
context.fillText('Sagrada Familia', 510, 50);

context.closePath();


context.beginPath();

context.rect(565, 97, 220, 130);
context.fillStyle = 'rgb(255,0,0)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,97.5);
context.lineTo(565,110);
context.lineTo(784,111);
context.lineTo(784,97.5);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

     
context.beginPath();

context.moveTo(565,126);
context.lineTo(784,126);
context.strokeStyle = 1;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,126);
context.lineTo(565,139);
context.lineTo(784,139);
context.lineTo(784,126);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(565,140);
context.lineTo(784,140);
context.strokeStyle = 1;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,155);
context.lineTo(565,170);
context.lineTo(784,170);
context.lineTo(784,155);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(565,170);
context.lineTo(784,170);
context.strokeStyle = 1;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,184);
context.lineTo(565,199);
context.lineTo(784,199);
context.lineTo(784,184);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();


context.beginPath();

context.moveTo(565,200);
context.lineTo(784,200);
context.strokeStyle = 2;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,212);
context.lineTo(565,226);
context.lineTo(784,226);
context.lineTo(784,212);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(565,97);
context.lineTo(654,155);
context.lineTo(565,226);
context.lineTo(565,97);
context.stokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(0,0,255)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(600,125);
context.lineTo(590,143);
context.lineTo(570,146);
context.lineTo(584,160);
context.lineTo(581,180);
context.lineTo(599,171);
context.lineTo(616,180);
context.lineTo(613,160);
context.lineTo(628,147);
context.lineTo(608,143);
context.lineTo(600,124);
context.stokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,255)';
context.fill();

context.closePath();