Thursday, June 28, 2012
Monday, June 4, 2012
THE TRIUMPH OF THE NERDS
SO IN CLASS WE STARTED TALKING ABOUT THE INTRODUCTION TO MACINTOSH! THIS WAS TO INTRODUCE TO US THE PROGRAM ILLUSTRATOR!! OUR FIRST PROJECT WAS TO CREATE A CALLIGRAM. I WAS GOING TO DO MINES ON A MICHAEL JACKSON SONG BUT I DECIDED TO CHANGE IT TO MAYA ANGELOU POEM PHONEMAIL WOMAN!
 |
| THE ORIGINAL IMAGE |
 |
| WHILE CREATING THE IMAGE I THOUGHT THIS WAS VERY BEAUTIFUL ON ITS OWN |
 |
| I ADDED COLOR JUST TO BE ON THE SAFE SIDE!! BUT THEY BOTH CAME OUT GREAT!! |
OMG MY WORST NIGHTMARE!!!
I HATE CODING!!!! LEARN THAT DURING THIS PROJECT WITH STILL IS HORRIBLE!!! SAY HELLO TO CHARLIE LONG LOST TWIN CHRIS!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var startX = 300;
var startY = 30;
var endX = canvas.width - 50;
var endY = canvas.width / 2;
context.rect(0,0, canvas.width, canvas.height);
var myGradient = context.createLinearGradient(startX, startY, endX, endY);
myGradient.addColorStop(0, "rgb(190,222,157)"); // GREEN
myGradient.addColorStop(1, "rgb(255,255,255)"); // WHITE
context.fillStyle = myGradient;
context.fill();
///// Charlie head//
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 200, Math.PI*0, Math.PI*2, false);
context.lineWidth = 5;
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';/////SKIN COLOR
context.fill();
context.stroke();
};
{
///
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(canvas.width/2, canvas.height/2, 150, Math.PI*0.2, Math.PI*0.8, false);
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
context.counterclockwise
};
/// RIGHT EAR
context.beginPath();
///arc(x, y, radius, startingangle, endingangle, [true | false])
context.arc(575, 300, 55, Math.PI* 0.4, 1.6 * Math.PI, true);
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//NOSE
context.beginPath();
context.arc(400,250,50, Math.PI*1.5, 0.5*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//LEFT EAR
///arc(x, y, radius, startingangle, endingangle, [true | false])
context.beginPath();
context.arc(219,330,40, Math.PI*1.3, 2.6*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
///STRAIGHT LINE
context.beginPath();
context.moveTo(400,100);
//context.lineTo(90,300);
context.stroke();
///LEFT EYE
var centerX = 320;
var centerY = 238;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
///RIGHT EYE
var centerX = 450;
var centerY = 238;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//HAIR
///arc(x, y, radius, startingangle, endingangle, [true | false])
/////////////////
context.beginPath();
context.arc(410,150,30, Math.PI*1.2, 2*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//////////////
context.beginPath();
context.arc(375,150,40, Math.PI*1.7, 2*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
////////////
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var startX = 300;
var startY = 30;
var endX = canvas.width - 50;
var endY = canvas.width / 2;
context.rect(0,0, canvas.width, canvas.height);
var myGradient = context.createLinearGradient(startX, startY, endX, endY);
myGradient.addColorStop(0, "rgb(190,222,157)"); // GREEN
myGradient.addColorStop(1, "rgb(255,255,255)"); // WHITE
context.fillStyle = myGradient;
context.fill();
///// Charlie head//
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 200, Math.PI*0, Math.PI*2, false);
context.lineWidth = 5;
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';/////SKIN COLOR
context.fill();
context.stroke();
};
{
///
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(canvas.width/2, canvas.height/2, 150, Math.PI*0.2, Math.PI*0.8, false);
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
context.counterclockwise
};
/// RIGHT EAR
context.beginPath();
///arc(x, y, radius, startingangle, endingangle, [true | false])
context.arc(575, 300, 55, Math.PI* 0.4, 1.6 * Math.PI, true);
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//NOSE
context.beginPath();
context.arc(400,250,50, Math.PI*1.5, 0.5*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//LEFT EAR
///arc(x, y, radius, startingangle, endingangle, [true | false])
context.beginPath();
context.arc(219,330,40, Math.PI*1.3, 2.6*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
///STRAIGHT LINE
context.beginPath();
context.moveTo(400,100);
//context.lineTo(90,300);
context.stroke();
///LEFT EYE
var centerX = 320;
var centerY = 238;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
///RIGHT EYE
var centerX = 450;
var centerY = 238;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//HAIR
///arc(x, y, radius, startingangle, endingangle, [true | false])
/////////////////
context.beginPath();
context.arc(410,150,30, Math.PI*1.2, 2*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//////////////
context.beginPath();
context.arc(375,150,40, Math.PI*1.7, 2*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
////////////
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)