Monday, February 11, 2013

ASC II Project

I created the nyan cat using HTML codes. I tried to stick to mostly basic shapes. I used a lot of rectangles. I started with the pop tart body and then did the rainbow. Eventually I added the cat features and added stars to the background. This is my first experience using HTML, I would consider myself almost expert in illustrator and photoshop, so this was very different and challenging since it's all codes instead of creating shapes yourself in illustrator. It is very time consuming, but it help me better understand how exactly illustrator works. 





<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

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

//background
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(x, y, width, height);
context.fillStyle = 'rgb(0,0,75)';
context.fill();
context.stroke();

//stars

context.beginPath();
context.rect(150, 50, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(150, 75, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(160, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(140, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();


context.beginPath();
context.rect(350, 100, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 125, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(360, 112, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(340, 112, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();


context.beginPath();
context.rect(700, 150, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(700, 175, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();


context.beginPath();
context.rect(710, 162, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(690, 162, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 50, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 75, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(560, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(540, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(150, 500, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(150, 525, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(160, 512, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(140, 512, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 450, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 475, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(360, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(340, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 500, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 525, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(560, 513, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(540, 513, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(700, 450, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(700, 475, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(710, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(690, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

//rainbow
context.beginPath();
context.rect(0, 150, 250, 50);
context.fillStyle = 'red';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 190, 250, 50);
context.fillStyle = 'orange';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 220, 250, 50);
context.fillStyle = 'yellow';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 250, 250, 50);
context.fillStyle = 'green';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 280, 250, 50);
context.fillStyle = 'blue';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 310, 250, 50);
context.fillStyle = 'indigo';
context.fill();
context.stroke();

// cat paw 4
//cat paw 2
context.beginPath();
context.arc(225,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();

context.beginPath();
context.rect(0, 350, 250, 50);
context.fillStyle = 'violet';
context.fill();
context.stroke();

//cat paw 2
context.beginPath();
context.arc(500,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();

//cat paw 3
context.beginPath();
context.arc(300,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();
   
 //tail
 context.beginPath();
context.moveTo(200,325);
context.quadraticCurveTo(110, 250, 150, 175);
context.bezierCurveTo(175, 125, 200, 125, 175, 175);
context.quadraticCurveTo(130, 250, 200, 280);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
context.stroke();


//poptart crust

var x1 = 200
var y1 = 150
var width1 = 400
var height1 = 250

context.beginPath();
context.rect(x1, y1, width1, height1);
context.fillStyle = 'rgb(255,255,200)';
context.fill();
context.stroke();

//poptart frosting
var x2 = 250
var y2 = 175
var width2 = 300
var height2 = 200

context.beginPath();
context.rect(x2, y2, width2, height2);
context.fillStyle = 'pink';
context.fill();
 context.strokeStyle = 'pink';
context.stroke();

//sprinkles
context.beginPath();
context.rect(300, 225, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 325, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 215, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(400, 275, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(275, 300, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();



context.beginPath();
context.rect(425, 225, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(425, 225, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(450, 300, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();



context.beginPath();
context.rect(525, 205, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

  //cat paw 1
  context.beginPath();
context.arc(610,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();




//cat head

context.beginPath();
  context.moveTo(525,400);
  context.lineTo(500,375);
  context.lineTo(500,225);
  context.lineTo(575,275);
  context.lineTo(650,275);
  context.lineTo(700,225);
  context.lineTo(700,375);
  context.lineTo(675,400);
  context.fillStyle = 'rgb(100,100,100)';
context.fill();
   context.strokeStyle = 'rgb(100,100,100)';
  context.stroke();


//cat face

//eyes
context.beginPath();
context.rect(625, 325, 25, 25);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 325, 25, 25);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(625, 325, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 325, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

//nose
context.beginPath();
context.rect(600, 350, 10, 10);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

//mouth

  context.beginPath();
  context.moveTo(550,370);
  context.lineTo(550,380);
  context.lineTo(600,380);
  context.lineTo(600,370);
    context.lineWidth = 3;
     context.strokeStyle = 'rgb(0,0,0)';
  context.stroke();

context.beginPath();
  context.moveTo(650,370);
  context.lineTo(650,380);
  context.lineTo(600,380);
    context.lineWidth = 3;
  context.strokeStyle = 'rgb(0,0,0)';
  context.stroke();

  //cheeks
    context.beginPath();
context.arc(675,345,10,0,2*Math.PI,false);
context.fillStyle = 'pink';
context.fill();
 context.strokeStyle = 'pink';
context.stroke();

context.beginPath();
context.arc(525,345,10,0,2*Math.PI,false);
context.fillStyle = 'pink';
context.fill();
 context.strokeStyle = 'pink';
context.stroke();






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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)