AlexandriaGuerra: 2012

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>

My name is Alexandria Guerra and this is the second time I have taken a class taught by the one and only Sanitago. I learned so much from the prior class art and technology and am ready to learn more. Last week we practiced coding which I have never ever done before. I strongly hate math so I found coding to be a bit challenging for me. Now, I have a lot more respect for program designers and ascii geeks, such as the ascii Star Wars, we watched in class. It was definitely interesting to see how coding works, but I am so ready to move on to the next topic. My previous projects for Art and Technology are on this blog. I am realy looking forward to logo creations and posters because, I have used Illustrator and like working with it. We are also creating mini animations at the end of the semester I am nervous about! It should be an interesting next month but, I will have to challenge myself. Also, if you are a foodie such as me please check out my food blog called, Caviar Chronicles.

AlexandriaGuerra

Tuesday, June 26, 2012

Magazine Cover and Menu

Tuesday, June 12, 2012

Morphing

Frida

Monday, June 11, 2012

Photoshop Projects

Wednesday, June 6, 2012

Tuesday, June 5, 2012

Poster

Monday, June 4, 2012

Project 2

Tuesday, May 29, 2012

Project 1: Coding