For the assignment, I decided to go for something abstract since I enjoyed abstract art, and most of my art pieces are more focused on the abstract aspect of art. I think what contributed to the success of this piece were all the distinct colors I used to give it some pop, but the dark colors also help the more lighter colors to give them a pop.
I struggled with the HML5 codes and constructing shapes and objects, so if I had a longer chance to do this again, it would be different and I would have chosen to do a more complex piece. I do think that the piece would have been a bit more stronger if I had added more shapes and lines coming from every direction. While doing the lines, I thought of adding a spider to make it seem as if the piece was a spiders web however I found it hard to construct the spiders body and legs so I just left it out.
Before I started this assignment I looked for some sources of inspiration and came up with a few;
HTML5 Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//retangle variables
var x = 0;
var y = 0;
var width = 800;
var height = 600;
//rectangle gradiant
var startx = 0;
var starty = 300;
var endx = 800;
var endy = 300;
//circle variables(black)
var centerx = 600;
var centery = 200;
var radius = 90;
//circle variables(yellow)
var centerx2 = 600;
var centery2 = 100;
var radius2 = 90;
//circle variables (white)
var centerx3 = 750;
var centery3 = 100;
var radius3 = 10;
//circle variable (pink)
var centerX4 = 100;
var centerY4 = 400;
var radius4 = 90;
//circle variable (black-left)
var centerX5 = 200;
var centerY5 = 500;
var radius5 = 70;
//inner yellow left
var centerX6 = 100;
var centerY6 = 400;
var radius6 = 60;
//inner green circle left
var centerX7 = 100;
var centerY7 = 400;
var radius7 = 30;
//inner top right white circle (yellow)
var centerX8 = 750;
var centerY8 = 100;
var radius8 = 5;
//light purple left
var centerX9 = 600;
var centerY9 = 200;
var radius9 = 70;
//quadratic Curve
var controlx = 400;
var controly = 600;
var endx = 800;
var endy = 300;
// starting point coordinates(beizer)
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
// control point 2 coordinates
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX2 = 0;
var startY2 = canvas.height/4;
// control point 1 coordinates ( magnet )
var cpointX12 = canvas.width / 6;
var cpointY12 = canvas.height / 4 + 400;
// control point 2 coordinates ( magnet )
var cpointX22 = canvas.width * 4/6;
var cpointY22 = canvas.height / 4 - 400;
// ending point coordinates
var endX2 = canvas.width;
var endY2 = canvas.height/4;
//quadratic curve green
var controlX3 = 0;
var controlY3 = 300;
var endX3 = 400;
var endY3 = 600;
//bezier curve - white
var startX2 = 0;
var startY2 = canvas.height/800;
var cpointX2 = canvas.width / 400;
var cpointY2 = canvas.height / 2 + 200;
var cpointX2 = canvas.width * 1/4;
var cpointY2 = canvas.height / 2 - 200;
var endX = canvas.width;
var endY = canvas.height/800;
//bezier curve - dark green
var startX3 = 0;
var startY3 = canvas.height/500;
var cpointX3 = canvas.width / 400;
var cpointY3 = canvas.height / 2 + 600;
var cpointX3 = canvas.width * 2/4;
var cpointY3 = canvas.height / 2 - 600;
var endX33 = canvas.width;
var endY33 = canvas.height/500;
//circle in triangle
var centerX10 = 720;
var centerY10 = 450;
var Radius10 = 60;
//rectangle inside circle
var rectX = 680;
var rectY = 420;
var rectwidth = 80;
var rectheight = 70;
//circle inside rectangle
var centerX11 = 680;
var centerY11 = 420;
var Radius11 = 10;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(0 , 150, 150)'
var grd = context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(1, 'rgb(255, 51, 102)');
context.fillStyle = grd;
context.fill();
context.stroke();
//circles(black)
context.beginPath();
context.arc(600, 200, 100, 90, 2* Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//circle ( right yellow)
context.globalAlpha = 0.5;
context.beginPath();
context.arc(600, 100, 90, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(204, 204, 0)';
context.fill();
context.strokeStyle = 'rgb(204, 204, 0)';
context.restore();
context.stroke();
//circle(white)
context.globalAlpha = 1;
context.beginPath();
context.arc(750, 100, 10, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//cirlce (inner white-yellow)
context.beginPath();
context.arc(750, 100, 5, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 204, 51)';
context.fill();
context.strokeStyle = 'rgb(255, 204, 51)';
context.stroke();
//circle(pink)
context.beginPath();
context.arc(100, 400, 90, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 0, 102)';
context.fill();
context.strokeStyle = 'rgb(255, 0, 102)';
context.stroke();
//circle (yellow)
context.beginPath();
context.arc(100, 400, 60, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 0)';
context.stroke();
//circle(light green)
context.globalAlpha = 0.5;
context.beginPath();
context.arc(100, 400, 30, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(153, 255, 51)';
context.fill();
context.strokeStyle = 'rgb(153, 255, 51)';
context.stroke();
//circle (black- left)
context.globalAlpha = 0.5;
context.beginPath();
context.arc (200, 500, 70, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//circle (left top white)
context.beginPath();
context.arc(100, 100, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb( 255, 255, 255)';
context.stroke();
//cirlce underneath black(light purple)
context.beginPath();
context.arc(600, 200, 70, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 153, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 153, 255)';
context.stroke();
//quadratic curve
context.beginPath();
context.moveTo(0, 300);
context.quadraticCurveTo(400, 600, 800, 300);
context.lineTo(0, 800);
context.quadraticCurveTo(0, 400, 800, 200);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 255, 0)';
context.stroke();
context.beginPath();
context.moveTo(0,600);
context.quadraticCurveTo(400, 100, 800, 400);
context.lineTo(0, 200);
context.lineTo(650, 600);
context.lineTo(0, 350);
context.lineTo(500, 600);
context.lineTo(0, 300);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 51, 204)';
context.stroke();
//bezier curve red
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();
//quadratic curve green
context.beginPath();
context.moveTo(0, 600);
context.quadraticCurveTo(0, 300, 400, 600);
context.quadraticCurveTo(300, 400, 800, 50);
context.quadraticCurveTo(400, 300, 100, 100);
context.lineTo(400, 600);
context.lineTo(0, 300 );
context.lineTo(800, 100);
context.strokeStyle = 'rgb(0, 255, 0)';
context.stroke();
context.beginPath();
context.moveTo(800, 600);
context.lineTo(0,0);
context.lineTo(800, 550);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 51, 0)';
context.stroke();
context.beginPath();
context.moveTo(800, 600);
context.lineTo(0, 200);
context.lineTo(450, 0);
context.lineTo(800, 200);
context.lineTo(500, 350);
context.lineTo(0, 600);
context.lineWidth = 3;
context.lineCap = 'round'
context.strokeStyle = 'rgb(51, 0, 204)';
context.stroke();
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(400, 200, 0, 600);
context.quadraticCurveTo(400, 300, 800, 100);
context.quadraticCurveTo(500, 300, 700, 600);
context.quadraticCurveTo(400, 400, 0, 600);
context.strokeStyle = 'rgb(0, 204, 255)';
context.stroke();
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(400, 200, 800, 100);
context.lineTo(600, 600);
context.lineTo(150, 0);
context.lineTo(10, 600);
context.lineTo(290, 0);
context.strokeStyle = 'rgb(255, 153, 51)';
context.stroke();
//bezier curve-white
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX2, cpointY2, cpointX2, cpointY2, endX2, endY2);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//bezie curve- dark green
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX3, cpointY3, cpointX3, cpointY3, endX3, endY3);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 51, 0,)';
context.stroke();
context.beginPath();
context.moveTo(800, 550)
context.quadraticCurveTo(500, 350, 800, 250);
context.quadraticCurveTo(700, 350, 800, 500);
context.lineWidth = 1;
context.strokeStyle = 'rgb(204, 255, 102 )';
context.stroke();
context.beginPath();
context.globalAlpha = 1;
context.moveTo(800,300);
context.lineTo(550, 450);
context.lineTo(800, 600);
context.lineWidth = 3;
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//circle inside triangle
context.beginPath();
context.globalAlpha = 1;
context.arc(720, 450, 60, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 51, 153)';
context.fill();
context.strokeStyle = 'rgb(255, 51, 153)';
context.stroke();
//rectangle inside circle
context.beginPath();
context.globalAlpha = 0.5;
context.rect(679, 420, 82, 70);
context.lineJoin = 'round'
context.fillStyle = 'rgb(255, 255 ,0)';
context.fill();
context.stroke
//circle inside rectangle
context.beginPath();
context.arc(720, 455, 20, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0, 204, 255)';
context.fill();
context.strokeStyle = 'rgb(0, 204, 255)';
context.stroke();
context.font = '80pt Calibri';
context.fillStyle = 'rgb(204, 0, 102)';
context.textAlign = 'start';
context.textBaseline = 'left';
context.strokeText ('MEL' , 100, 100);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment