Tuesday, February 16, 2016

GIFS

 Grayscale, Dither 40%

 Mac OS, Dither 72%

 Windows, 4 colors, Dither 82% 

 Selective, 8 colors, Dither 100%

Restrictive, Dither  40%
JPGS

100% compression=56.23k

 75% compression=36.25k

50% compression=19.03k

 25% compression=6.48k


Assignment: Autoscopy




Assignment: Somewhere










Assignment: Somewhere

Tuesday, February 9, 2016

Assignment: B&WColor


 Original

 Black and White

Transformed
Assignment: B&WColor


 Original

 Black and White

Transformed

Thursday, February 4, 2016

Assignment: Canvas










 ///////BACKGROUND

var grd = context.createLinearGradient(200,200,200,400);
grd.addColorStop(0, "rgba(140,228,255,1)");
grd.addColorStop(0.5, "rgba(78,190,255,1)");
grd.addColorStop(1, "rgba(78,131,255,1)");


context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = grd;
context.fill();
context.closePath();


/////FIRST CIRCLE

context.beginPath();
context.arc(450,280,120,0*Math.PI,2*Math.PI,false);
context.fillStyle="rgba(218,218,166,1)";
context.fill();
context.lineWidth=5;
context.strokeStyle = "rgba(218,218,166,1)";
context.stroke();

context.closePath();



//////SECOND CIRCLE

context.beginPath();

context.arc(260,380,80,0*Math.PI,2*Math.PI,false);
context.fillStyle="rgba(218,218,166,1)";
context.fill();
context.lineWidth=5;
context.strokeStyle = "rgba(218,218,166,1)";
context.stroke();

context.closePath();


context.beginPath
context.rect(280,270,260,105);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();




context.beginPath
context.rect(320,270,260,105);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();



context.beginPath
context.rect(250,285,260,105);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();



context.beginPath
context.rect(530,385,190,70);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();


context.beginPath
context.rect(550,385,180,150);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();



context.beginPath
context.rect(530,250,140,130);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();


context.beginPath
context.rect(435,130,41,20);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();



context.beginPath
context.rect(435,150,52,20);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();


context.beginPath
context.rect(432,120,40,12);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();


context.beginPath
context.rect(438,110,27,12);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();



context.beginPath
context.rect(443,94,13,12);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();



context.beginPath
context.rect(320,380,100,25);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();

context.beginPath
context.rect(290,240,200,30);
context.fill();
context.strokeStyle=
context.stroke();

context.closePath();





/////BOTTOM CURVE
context.beginPath();
context.moveTo(210,447);
context.quadraticCurveTo(270,420,450,400);
context.lineWidth=7;
context.stroke();
context.closePath();



//////TOP CURVE
context.beginPath();
context.moveTo(215,447);
context.quadraticCurveTo(145,320,400,200);
context.lineWidth=10;
context.stroke();
context.closePath();


/////BOTTOM OF NECK
context.beginPath();
context.moveTo(500,350);
context.quadraticCurveTo(530,520,560,560);
context.stroke();
context.closePath();



/////TOP OF NECK

context.beginPath();

context.moveTo(540,200);
context.lineTo(780,500);
context.stroke();

context.closePath();


/////TOP PART OF FIRST EAR

context.beginPath();

context.moveTo(440,75);
context.lineTo(520,200);
context.stroke();

context.closePath();



/////BOTTOM OF FIRST EAR

context.beginPath();

context.moveTo(440,75);
context.lineTo(430,200);
context.stroke();

context.closePath();


/////TOP OF SECOND EAR
context.beginPath();

context.moveTo(375,75);
context.lineTo(428,200);
context.stroke();

context.closePath();





/////BOTTOM OF SECOND EAR
context.beginPath();

context.moveTo(375,75);
context.lineTo(360,200);
context.stroke();

context.closePath();


context.beginPath
context.rect(368,120,25,29);
context.fill();
context.stroke();

context.closePath();

context.beginPath
context.rect(378,100,4,19);
context.fill();
context.stroke();

context.closePath();


context.beginPath
context.rect(518,433,30,100);
context.fill();
context.stroke();
context.closePath();

context.beginPath
context.rect(518,383,30,100);
context.fill();
context.stroke();
context.closePath();


context.beginPath
context.rect(718,433,30,100);
context.fill();
context.stroke();
context.closePath();



context.beginPath
context.rect(338,401,18,10);
context.fill();
context.stroke();
context.closePath();





/////OUTLINE OF EYE
context.beginPath();
context.moveTo(420,270);
context.quadraticCurveTo(410,225,480,265);
context.quadraticCurveTo(420,300,420,270);
context.lineWidth=3;
context.strokeStyle = "rgba(2,2,5,1)";
context.stroke();
context.closePath()



context.beginPath();

context.arc(432,270,11,0*Math.PI,2*Math.PI,false);
context.fillStyle="rgba(2,2,5,1)";
context.fill();
context.lineWidth=5;
context.strokeStyle = "rgba(2,2,5,1)";
context.stroke();

context.closePath();


////TOP OF MANE
context.beginPath();
context.moveTo(510,178);
context.bezierCurveTo(650,80,780,570,790,500);

context.lineWidth=3;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(270,160,290,270,290,250);

context.lineWidth=10;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(270,220,290,270,290,250);

context.lineWidth=8;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(270,290,290,270,290,250);

context.lineWidth=10;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(270,275,290,270,290,250);
context.lineWidth=15;
context.strokeStyle = "rgba(232,228,218,1)";
context.stroke();
context.closePath();

////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(300,215,290,270,290,250);
context.lineWidth=15;
context.strokeStyle = "rgba(232,228,218,1)";
context.stroke();
context.closePath();

////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(240,215,290,300,300,240);
context.lineWidth=15;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(300,245,290,200,300,270);
context.lineWidth=15;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();



////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(300,145,290,200,300,270);
context.lineWidth=15;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(300,145,290,300,300,270);
context.lineWidth=15;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////FORELOCK
context.beginPath();
context.moveTo(430,150);
context.bezierCurveTo(300,145,280,300,300,270);
context.lineWidth=15;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


////MANE
context.beginPath();
context.moveTo(510,178);
context.bezierCurveTo(570,90,500,300,580,315);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(520,178);
context.bezierCurveTo(580,90,500,300,534,290);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(530,178);
context.bezierCurveTo(590,90,500,300,590,290);
context.lineWidth=22;
context.strokeStyle = "rgba(242, 235, 217, 1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(550,178);
context.bezierCurveTo(590,90,530,280,590,310);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(580,190);
context.bezierCurveTo(560,90,590,320,570,275);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(600,190);
context.bezierCurveTo(570,120,600,480,600,255);
context.lineWidth=18;
context.strokeStyle = "gba(242, 235, 217, 1)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(620,300);
context.bezierCurveTo(585,-20,600,490,600,300);
context.lineWidth=18;
context.strokeStyle = "rgba(242, 235, 217, 1)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(620,300);
context.bezierCurveTo(585,-20,650,490,599,270);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(680,350);
context.bezierCurveTo(585,-20,650,490,639,280);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(690,390);
context.bezierCurveTo(525,-70,650,390,659,280);
context.lineWidth=22;
context.strokeStyle = "rgba(242, 235, 217, 1)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(680,390);
context.bezierCurveTo(585,-50,450,290,639,220);
context.lineWidth=22;
context.strokeStyle = "rgba(242, 235, 217, 1)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(620,380);
context.bezierCurveTo(685,7,510,520,639,220);
context.lineWidth=22;
context.strokeStyle = "rgba(242, 235, 217, 1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(660,400);
context.bezierCurveTo(685,7,510,520,649,220);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(700,400);
context.bezierCurveTo(685,7,510,520,649,220);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(730,425);
context.bezierCurveTo(685,9,510,500,629,220);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(760,485);
context.bezierCurveTo(625,2,510,500,629,220);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(700,445);
context.bezierCurveTo(655,-70,500,500,599,220);
context.lineWidth=22;
context.strokeStyle = "rgba(247,247,234,1)";
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(730,480);
context.bezierCurveTo(665,-60,500,500,670,220);
context.lineWidth=22;
context.strokeStyle = "rgba(242, 235, 217, 1)";
context.stroke();
context.closePath();


context.beginPath();
context.arc(260,370,15,0*Math.PI,2*Math.PI,false);
context.fillStyle="rgba(2,2,1,5)";
context.fill();
context.lineWidth=5;
context.strokeStyle = "rgba(218,218,166,1)";
context.stroke();
context.closePath();


context.beginPath();
context.arc(265,379,5,0*Math.PI,2*Math.PI,false);
context.fillStyle="rgba(2,2,1,5)";
context.fill();
context.lineWidth=5;
context.strokeStyle = "rgba(2,2,1,5)";
context.stroke();
context.closePath();