7.5 hours
Concept Statement:My initial thought when coming up with ideas for this project was to create an elephant. The piece would feature a simple art deco inspired background with neutral colors. However, as I began the project I started with the background and just kept adding more and more to the design. When it became clear to me that the design of rectangles would be the focus, I thought of ways to incorporate the elephant into the project. But somewhere along the line I made the decision that adding the elephant would only take away from this piece.
In this project I used a lot of repetition, which was inspired from the art deco style.
This piece is successful because I was able to use what I learned in class and apply it in this project. And even though my project looks nothing like what I envisioned, I'm really happy with the end product. After I got to a certain point I was afraid to add more to the design, because the piece is very busy and I didn't want it to be extremely overwhelming.
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
/////Background
///Background
var background = context.createRadialGradient(400,300,5,400,300,500);
background.addColorStop(0,"rgb(33, 52, 128)");
background.addColorStop(0.05,"rgb(34, 40, 64)");
background.addColorStop(0.1,"rgb(33, 52, 128)");
background.addColorStop(0.15,"rgb(34, 40, 64)");
background.addColorStop(0.2,"rgb(33, 52, 128)");
background.addColorStop(0.25,"rgb(34, 40, 64)");
background.addColorStop(0.3,"rgb(33, 52, 128)");
background.addColorStop(0.35,"rgb(34, 40, 64)");
background.addColorStop(0.4,"rgb(33, 52, 128)");
background.addColorStop(0.45,"rgb(34, 40, 64)");
background.addColorStop(0.5,"rgb(33, 52, 128)");
background.addColorStop(0.55,"rgb(34, 40, 64)");
background.addColorStop(0.6,"rgb(33, 52, 128)");
background.addColorStop(0.65,"rgb(34, 40, 64)");
background.addColorStop(0.7,"rgb(33, 52, 128)");
background.addColorStop(0.75,"rgb(34, 40, 64)");
background.addColorStop(0.8,"rgb(33, 52, 128)");
background.addColorStop(0.85,"rgb(34, 40, 64)");
background.addColorStop(0.9,"rgb(33, 52, 128)");
background.addColorStop(0.95,"rgb(34, 40, 64)");
background.addColorStop(1,"rgb(33, 52, 128)");
context.beginPath();
context.rect(0,0, canvas.width, canvas.height);
context.fillStyle = background;
context.fill();
context.closePath();
/////Triangle left
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(15, 25);
context.lineTo(15, 575);
context.lineTo(380, 300);
context.closePath();
// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();
// the fill color
context.fillStyle = "black";
context.fill();
/////Triangle right
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(785, 25);
context.lineTo(785, 575);
context.lineTo(420, 300);
context.closePath();
// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();
// the fill color
context.fillStyle = "black";
context.fill();
/////Triangle top
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(50, 20);
context.lineTo(750, 20);
context.lineTo(400, 280);
context.closePath();
// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();
// the fill color
context.fillStyle = "black";
context.fill();
/////Triangle bottom
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(50, 580);
context.lineTo(750, 580);
context.lineTo(400, 320);
context.closePath();
// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();
// the fill color
context.fillStyle = "black";
context.fill();
/////Rectangles
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//1st rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "magenta";
ctx.rect(5, 5, 790, 590);
ctx.stroke();
//2nd rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "silver";
ctx.rect(30, 30, 740, 540);
ctx.stroke();
//3rd rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "aqua";
ctx.rect(55, 55, 690, 490);
ctx.stroke();
//4th rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "magenta";
ctx.rect(80, 80, 640, 440);
ctx.stroke();
//5th rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "silver";
ctx.rect(105, 105, 590, 390);
ctx.stroke();
//6th rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "aqua";
ctx.rect(130, 130, 540, 340);
ctx.stroke();
// 7th rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "magenta";
ctx.rect(155, 155, 490, 290);
ctx.stroke();
//8th rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "silver";
ctx.rect(180, 180, 440, 240);
ctx.stroke();
//9th rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "aqua";
ctx.fillRect(205,205,390,190)
ctx.rect(205, 205, 390, 190);
ctx.stroke();
///top bezier curve 1
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(210, 212);
ctx.bezierCurveTo(210, 200, 580, 400, 590, 210);
ctx.stroke();
///top bezier curve 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(245, 212);
ctx.bezierCurveTo(240, 200, 580, 380, 585, 210);
ctx.stroke();
///top bezier curve 3
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(280, 212);
ctx.bezierCurveTo(270, 200, 580, 360, 580, 210);
ctx.stroke();
///top bezier curve 4
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(315, 212);
ctx.bezierCurveTo(300, 200, 580, 340, 575, 210);
ctx.stroke();
///bottom bezier curve 1
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(210, 390);
ctx.bezierCurveTo(250, 290, 550, 290, 590, 390);
ctx.stroke();
///bottom bezier curve 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(215, 390);
ctx.bezierCurveTo(270, 290, 540, 310, 570, 390);
ctx.stroke();
///bottom bezier curve 3
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(220, 390);
ctx.bezierCurveTo(290, 290, 530, 330, 550, 390);
ctx.stroke();
///bottom bezier curve 4
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(225, 390);
ctx.bezierCurveTo(310, 290, 520, 350, 530, 390);
ctx.stroke();
/////Quadratic curve 1
// starting point coordinates
var x = 225;
var y = 250;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2 ;
var cpointY = canvas.height / 2 +10;
// ending point coordinates
var x1 = 225;
var y1 = 320;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 3;
context.strokeStyle = "silver";
context.stroke();
/////Quadratic curve 2
// starting point coordinates
var x = 225;
var y = 260;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1-420 ;
var cpointY = canvas.height / 2+10 ;
// ending point coordinates
var x1 = 225;
var y1 = 310;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 3;
context.strokeStyle = "aqua";
context.stroke();
//////Quadratic curve 3
// starting point coordinates
var x = 445;
var y = 305;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 285;
// ending point coordinates
var x1 = 580;
var y1 = 275;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 2.5;
context.strokeStyle = "aqua";
context.stroke();
//////Quadratic curve 4
// starting point coordinates
var x = 445;
var y = 305;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 280;
// ending point coordinates
var x1 = 580;
var y1 = 350;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 2.5;
context.strokeStyle = "aqua";
context.stroke();
//////Quadratic curve 5
// starting point coordinates
var x = 520;
var y = 312;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 280;
// ending point coordinates
var x1 = 580;
var y1 = 335;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "silver";
context.stroke();
//////Quadratic curve 6
// starting point coordinates
var x = 520;
var y = 312;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 290;
// ending point coordinates
var x1 = 580;
var y1 = 295;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 2.5;
context.strokeStyle = "silver";
context.stroke();
///////Circle 1
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 2.03;
var radius = 6;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "violet");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
///////Circle 2
var centerX = canvas.width / 2.25;
var centerY = canvas.height / 2.02;
var radius = 5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "magenta");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
///////Circle 3
var centerX = canvas.width / 2.13;
var centerY = canvas.height / 2.015;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "purple");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
///////Circle 4
var centerX = canvas.width / 2.03;
var centerY = canvas.height / 2.008;
var radius = 3;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "violet");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
///////Circle 5
var centerX = canvas.width / 1.94;
var centerY = canvas.height / 1.995;
var radius = 2;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "magenta");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
///////Circle 6
var centerX = canvas.width / 1.871;
var centerY = canvas.height / 1.985;
var radius = 1.5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "purple");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
///////Circle 7
var centerX = canvas.width / 1.39;
var centerY = canvas.height / 1.905;
var radius = 8;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "aqua");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
///////Circle 8
var centerX = canvas.width / 3.49;
var centerY = canvas.height / 2.1;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 45);
grd.addColorStop(1, "rgb(0,0,0)");
grd.addColorStop(0, "silver");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "violet";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment