Art And Technology/ Digital Design: September 2014

I chose to make a geometric fox for project one. However, it was coming up with the idea that was easy. I started with the background and created a gradient starting with yellow (the sun) and ending in dark green (the forest). The hard part came when deciding what points to put into the code to draw the shapes in the correct place. I found the arches to be the hardest to place. It was a large amount of guessing on my part on which numbers to put in for the position of the arches. I made the head of the fox stick out more by making it a solid fill of red, while I made the body to be 25% transparent. All in all I am proud of what I was able to create using code.

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

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

//rectangle background

var x=0;
var y=0;
var width = 600
var height= 800;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'lime';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,55)");
//intermediate color
grd.addColorStop(0.5, "rgb(153,255,51)");
// ending color
grd.addColorStop(1, "rgb(0,51,0)");
context.fillStyle = grd;
context.fill();
context.fill();

context.stroke();

//Body
// Set the style properties.
context.fillStyle = "rgba(255,0,0,0.75)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(300, 175); // give the (x,y) coordinates
context.lineTo(475, 650);
context.lineTo(100, 650);
context.lineTo(300, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//head
// Set the style properties.
context.fillStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;
context.fillStyle = "rgb(255,0,0)";
context.beginPath();
// Start from the top-left point.
context.moveTo(150, 175); // give the (x,y) coordinates
context.lineTo(450, 175);
context.lineTo(300, 425);
context.lineTo(150, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();
context.fill();

//left ear
// Set the style properties.
context.fillStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(150, 50); // give the (x,y) coordinates
context.lineTo(250, 175);
context.lineTo(150, 175);
context.lineTo(150, 50);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//inner
//Simple V line in pink
context.fillStyle= 'white';
var x= 160;
var y = 150;
var x1 = 160;
var y1 = 80;
var x2 = 215;
var y2 = 160;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'butt';
context.lineWidth = 2;// declare the width in pixels of the line
context.strokeStyle = 'white'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x=160;
var y=150;
var x1=215;
var y1=160;
//comment
context.beginPath();
context.moveTo (x,y);
context.lineTo (x1,y1);
context.lineCap= "butt";
context.lineWidth= 2;
context.strokeStyle= 'white';

context.stroke();
context.fill();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"

//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"

//right ear
// Set the style properties.
context.fillStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(350, 175); // give the (x,y) coordinates
context.lineTo(450, 50);
context.lineTo(450, 175);
context.lineTo(350, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//inner
//Simple V line in pink

var x= 375;
var y = 160;
var x1 = 430;
var y1 = 90;
var x2 = 435;
var y2 = 150;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'butt';
context.lineWidth = 2;// declare the width in pixels of the line
context.strokeStyle = 'white'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x=375;
var y=160;
var x1=435;
var y1=150;
//comment
context.beginPath();
context.moveTo (x,y);
context.lineTo (x1,y1);
context.lineCap= "butt";
context.lineWidth= 2;
context.strokeStyle= 'white';

context.stroke();
context.fill();
//left eye

//Arc
var x = canvas.width / 2.5;
var y = canvas.height / 3;
var radius = 25;
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 = 'black';
context.stroke();

//right eye

//Arc
var x = canvas.width / 1.75;
var y = canvas.height / 3;
var radius = 25;
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 = 'black';
context.stroke();

//nose

// Set the style properties.
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(275, 390); // give the (x,y) coordinates
context.lineTo(325, 390);
context.lineTo(300, 425);
context.lineTo(275, 390);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//right leg

var x= 325;
var y = 525;
var x1 = 325;
var y1 = 650;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 400;
var y = 525;
var x1 = 400;
var y1 = 650;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates // draw line to following point
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//right paw
var x=330;
var y=625;
var width =75
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'white';
context.strokeStyle = 'white';
context.fill();

context.stroke();

var x= 350;
var y = 640;
var x1 = 350;
var y1 = 675;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 375;
var y = 640;
var x1 = 375;
var y1 = 675;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//left leg
var x= 175;
var y = 525;
var x1 = 260;
var y1 = 450;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 250;
var y = 530;
var x1 = 280;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates // draw line to following point
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//left paw
var x=250;
var y=450;
var width =75
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'white';
context.strokeStyle = 'white';
context.fill();

context.stroke();

var x= 275;
var y = 475;
var x1 = 275;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 300;
var y = 475;
var x1 = 300;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//tail
context.fillStyle= "rgba(255,0,0,.75)";

var x = canvas.width / 1.5;
var y = canvas.height / 1.65;
var radius = 175;
var startAngle = .38 * Math.PI;
var endAngle = 1.54 * Math.PI;
var counterClockwise = true;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 3;

// line color
context.strokeStyle = 'red';
context.stroke();
context.fill();

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

};

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

Art And Technology/ Digital Design

Tuesday, September 9, 2014

Project 1

Monday, September 1, 2014

Digital Rectangle