ART 210 Kim Conroy: January 2016

Wednesday, January 27, 2016

CANVAS HW CIRCLES & RECTANGLES
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">

body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}

body {
background-color: rgba(255,255,255,1);
}

#myCanvas { border: rgba(102,0,255,1) medium dashed; }

</style>

</head>

<body>

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

<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//large circle

context.beginPath();
context.arc(400, 300, 200, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=3;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(251, 238, 60, 0.6)'
context.fill();
context.stroke();

context.closePath();

//bottom left circle

context.beginPath();
context.arc(300, 400, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255,255,0,1)'
context.fill();
context.stroke();

context.closePath();

//bottom right circle

context.beginPath();
context.arc(500, 400, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();

context.closePath();

//top right circle

context.beginPath();
context.arc(500, 200, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();

context.closePath();

//top left circle

context.beginPath();
context.arc(300, 200, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();

context.closePath();

//middle circle

context.beginPath();
context.arc(400, 300, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();

context.closePath();

//small left circle

context.beginPath();
context.arc(250, 300, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();

context.closePath();

//small right circle

context.beginPath();
context.arc(550, 300, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();

context.closePath();

//small top circle

context.beginPath();
context.arc(400, 150, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();

context.closePath();

//small bottom circle

context.beginPath();
context.arc(400, 450, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();

context.closePath();

//bottom mid RCT
context.beginPath();

context.rect(375,425,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();

context.stroke();

context.closePath();

//top mid RCT
context.beginPath();

context.rect(375,125,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();

context.stroke();

context.closePath();
// mid RCT
context.beginPath();

context.rect(362,265,75,75);
context.fillStyle = 'rgba(50, 115, 255, 0.49)'
context.fill();

context.stroke();

context.closePath();
//small mid circle

context.beginPath();
context.rect(374,278,50,50);
context.fillStyle = 'rgba(50, 255, 190, 0.49)'
context.fill();

context.stroke();

//square left circle

context.beginPath();
context.rect(525,275,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();

context.stroke();

//square right circle

context.beginPath();
context.rect(225,275,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();

context.stroke();

//top left circle

context.beginPath();
context.rect(262,163,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();

context.stroke();

//top right circle

context.beginPath();
context.rect(462,163,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();

context.stroke();

//bottom left circle

context.beginPath();
context.rect(262,363,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();

context.stroke();

//top right circle

context.beginPath();
context.rect(462,363,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();

context.stroke();

//top right circle

context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = 'rgba(96, 165, 188, 0.15)'
context.fill();

context.stroke();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('ART 210 - CANVAS PROJECT', 20, 550);
context.closePath();

</script>

</body>
</html>

Tuesday, January 26, 2016

Canvas HW 1 Coding:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas hw01</title>
</head>

<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">

body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}

body {
background-color: rgba(255,255,255,1);
}

#myCanvas { border: rgba(102,0,255,1) medium dashed; }

</style>

</head>

<body>

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

<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//TRIANGLE 1 DARK PINK
context.beginPath();

context.moveTo(1,400); // STARTING POINT
context.lineTo(200,600);
context.lineTo(200,200);
context.lineTo(1,400);
// ENDING POINT

context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(224, 15, 119, 0.97)'
context.stroke();

context.fillStyle= 'rgba(224, 15, 119, 0.76)'
context.fill()

context.closePath();

//TRIANGLE 2 LIGHT BLUE
context.beginPath();

context.moveTo(200,400); // STARTING POINT
context.lineTo(400,600);
context.lineTo(400,200);
context.lineTo(200,400);

// ENDING POINT

context.lineWidth=15
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(63, 191, 184, 0.57)'
context.stroke();

context.fillStyle= 'rgba(63, 191, 184, 0.15)'
context.fill()

context.closePath();

//TRIANGLE 3 GREEN
context.beginPath();

context.moveTo(400,600); // STARTING POINT
context.lineTo(600,400);
context.lineTo(400,200);
context.lineTo(400,600);

// ENDING POINT

context.lineWidth=15
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(70, 191, 63, 0.8)'
context.stroke();

context.fillStyle= 'rgba(70, 191, 63, 0.56)'
context.fill()

context.closePath();

//TRIANGLE 4 DARK PURPLE
context.beginPath();

context.moveTo(600,600); // STARTING POINT
context.lineTo(600,200);
context.lineTo(800,400);
context.lineTo(600,600);

// ENDING POINT

context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(43, 6, 79, 0.93)'
context.stroke();

context.fillStyle= 'rgba(43, 6, 79, 0.8)'
context.fill()

context.closePath();

//TRIANGLE 5 RED
context.beginPath();

context.moveTo(215,355); // STARTING POINT
context.lineTo(355,200);
context.lineTo(215,200);
context.lineTo(215,355);

// ENDING POINT

context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(245, 15, 15, 0.89)'
context.stroke();

context.fillStyle= 'rgba(245, 15, 15, 0.74)'
context.fill()

context.closePath();

//TRIANGLE 6 ORANGE
context.beginPath();

context.moveTo(215,445); // STARTING POINT
context.lineTo(345,600);
context.lineTo(215,600);
context.lineTo(215,445);

// ENDING POINT

context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgb(251, 132, 13)'
context.stroke();

context.fillStyle= 'rgba(251, 132, 13, 0.71)'
context.fill()

context.closePath();

//TRIANGLE 7 YELLOW
context.beginPath();

context.moveTo(580,345); // STARTING POINT
context.lineTo(445,200);
context.lineTo(580,200);
context.lineTo(580,345);

// ENDING POINT

context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(255, 255, 35, 0.99)'
context.stroke();

context.fillStyle= 'rgba(241, 253, 6, 0.43)'
context.fill()

context.closePath();

//TRIANGLE 8 BLACK
context.beginPath();

context.moveTo(580,600); // STARTING POINT
context.lineTo(445,600);
context.lineTo(580,445);
context.lineTo(580,600);

// ENDING POINT

context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(2, 0, 5, 0.98)'
context.stroke();

context.fillStyle= 'rgba(11, 11, 3, 0.64)'
context.fill()

context.closePath();

//TRIANGLE 9 LIGHT PURPLE
context.beginPath();

context.moveTo(600,545); // STARTING POINT
context.lineTo(600,250);
context.lineTo(750,400);
context.lineTo(600,545);

// ENDING POINT

context.lineWidth=10
context.lineCap = 'round';
context.lineJoin= 'round'

context.strokeStyle= 'rgba(40, 31, 147, 0.83)'
context.stroke();

context.fillStyle= 'rgba(128, 119, 222, 0.96)'
context.fill()

context.closePath();

//TRIANGLE 10 LIGHT PINK
context.beginPath();

context.moveTo(50,400); // STARTING POINT
context.lineTo(200,550);
context.lineTo(200,250);
context.lineTo(50,400);
// ENDING POINT

context.lineWidth=10
context.lineCap ='round'
context.lineJoin= 'round'

context.strokeStyle= 'rgba(191, 63, 116, 0.89)'
context.stroke();

context.fillStyle= 'rgba(237, 186, 207, 0.64)'
context.fill()

context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('ART 210 HW Kim Conroy - CANVAS PROJECT', 20, 550);
context.closePath();

</script>

</body>
</html>