AlexandriaGuerra

I hate coding. I am just excited to move onto our next project using Illustrator! Here are my steps from the beginning to my final one.

I am a bit unsure on how to export this as a picture, but will load it soon. Here is all the fun coding that made this possible:!DOCTYPE html>

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line Ë‡Ë‡Ë‡Ë‡Ë‡Ë‡Ë‡Ë‡Ë‡Ë‡

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

//inner circle
var circ1X = 50;
var circ1Y = 50;
var circ1Radius = 100;

//outer circle
var circ2X = 100;
var circ2Y = 100;
var circ2Radius = 200;

//outer outer circle
var circ3X=200
var circ3Y=200
var circ3Radius=300

// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius, circ3X,circ3Y,circ3Radius);

// inner color
grd.addColorStop(0, "rgb(200,0,100)");

// second inner you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "rgb(100,255,0)");
// third color
grd.addColorStop(0, "rgb(50,50,200)");

// outer color
grd.addColorStop(1, "rgb(50,0,100)");

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

// starting point coordinates
var startX = 200;
var startY = canvas.height/2;

// control point coordinates ()
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 300;

// ending point coordinates
var endX = 600;
var endY = canvas.height/2;

//smile
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();

//nose
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = "white";
context.stroke();

//litle lips part 1
var x = 385;
var y = 450;
var radius = 40;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.8* Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = "white";
context.stroke();

//little lips part2
var x = 450;
var y = 450;
var radius = 40;
var startAngle = 1 * Math.PI;
var endAngle = 1.8* Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = "white";
context.stroke();

//lips bottom
var x = 420;
var y = 450;
var radius = 72;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.88 * Math.PI;
var counterClockwise = true;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = "white";
context.stroke();
// complete custom shape
context.closePath();
context.fillStyle = "#white";
context.fill();

//winking eye
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 650;
var y = 100;
var radius = 75;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = true;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "black";
context.stroke();
//eyelashes
context.beginPath();
context.moveTo(580,100);
context.lineTo(500,100);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(720,100);
context.lineTo(790,100);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(650,180);
context.lineTo(650,240);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(700,145);
context.lineTo(780,195);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(720,115);
context.lineTo(790,160);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(570,120);
context.lineTo(510,160);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(595,140);
context.lineTo(525,190);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(670,180);
context.lineTo(710,240);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(700,160);
context.lineTo(780,220);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(680,160);
context.lineTo(740,220);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(625,170);
context.lineTo(580,240);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

context.beginPath();
context.moveTo(605,150);
context.lineTo(555,220);
context.strokeStyle="black"
context.lineWidth=4
context.stroke();

//cheeks
var centerX = 70;
var centerY = 400;
var radius = 50;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#red";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//cheek 2
var centerX = 730;
var centerY = 400;
var radius = 50;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#red";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

};

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

</body></html>

AlexandriaGuerra

Tuesday, May 29, 2012

Project 1: Coding