Code Project
The following code and art is a code I created in canvas. I tried to do my own spin on my favorite album cover art. I created this using three semi circles (quadratic curves), 10 bezier curves that mirror each-other, and all together 10 shapes (6 boxes, 1 circle, and 3 semi circles). I wanted this to have a cool feel with the color choices and I wanted there to be hard geometric shapes as well as flowing curvy lines. Though this design doesn't make a known character or object (such as sponge bob, a turtle, or a flower), I think this is a sound design and it is unique compared to what my peers chose to do. This took me about 12-15 hours to create. I personally really enjoy this design and am proud that I created it myself.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
////////////////////////////////////// BACKGROUND
// the rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
context.closePath();
// the outline
context.lineWidth = 10;
context.strokeStyle = '#383838';
context.stroke();
// the fill color
context.fillStyle = "#383838";
context.fill();
/////////////
//////////////////////////////////// Bottom left box
var x=0;
var y=429;
var width = 170
var height= 170;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(250,250,250,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgba(17,0,255,1.00)");
//intermediate color
grd.addColorStop(0.5, "rgba(255,112,0,1.00)");
// ending color
grd.addColorStop(1, "rgba(117,24,233,1.00)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
/////////////////////////////// bottom right box
var x=629;
var y=429;
var width = 170
var height= 170;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(250,250,250,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgba(17,0,255,1.00)");
//intermediate color
grd.addColorStop(0.5, "rgba(255,112,0,1.00)");
// ending color
grd.addColorStop(1, "rgba(117,24,233,1.00)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//////////////////////////left side middle box
var x=0;
var y=300;
var width = 125
var height= 125;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(250,250,250,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgba(117,62,188,1.00)");
//intermediate color
grd.addColorStop(0.5, "rgba(255,251,0,1.00)");
// ending color
grd.addColorStop(1, "rgba(24,118,7,1.00)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
////////////////////////right side middle box
var x=675;
var y=300;
var width = 125
var height= 125;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(250,250,250,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgba(117,62,188,1.00)");
//intermediate color
grd.addColorStop(0.5, "rgba(255,251,0,1.00)");
// ending color
grd.addColorStop(1, "rgba(24,118,7,1.00)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//////////////////////left top box
var x=0;
var y=202;
var width = 95
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(250,250,250,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgba(200,187,5,1.00)");
//intermediate color
grd.addColorStop(0.5, "rgba(179,16,16,1.00)");
// ending color
grd.addColorStop(1, "rgba(7,52,169,1.00)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//////////////////////right top box
var x=703;
var y=202;
var width = 95
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(243,241,241,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgba(200,187,5,1.00)");
//intermediate color
grd.addColorStop(0.5, "rgba(179,16,16,1.00)");
// ending color
grd.addColorStop(1, "rgba(7,52,169,1.00)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
/////////////////////////////// middle blue semi circle
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(400, 0, 70, 0, Math.PI, false);
context.closePath();
context.lineWidth = 150;
context.fillStyle = '#';
context.fill();
context.strokeStyle = '#00C8';
context.stroke();
////////////////////////////////// bottom blue circle
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(400, 0, 70, 0, Math.PI, false);
context.closePath();
context.lineWidth = 300;
context.fillStyle = '#00CC8';
context.fill();
context.strokeStyle = '#00C8';
context.stroke();
/////////////// BALL MIDDLE
var centerX = 400;
var centerY = 400;
var radius = 70;
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, 5, centerX, centerY, 50);
grd.addColorStop(0, "rgba(180,180,180,1.00)");
grd.addColorStop(1, "rgba(113,112,112,1.00)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#777575";
context.stroke();
////////////CURVES BELLOW
//////////////////////Curve ONE purple 1 LEFT
context.beginPath();
context.moveTo(380, 777);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(400, 150, 100, 500, 190, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(133,18,222,1.00)";
context.stroke();
//////////////////////Curve TWO purple 2 RIGHT
context.beginPath();
context.moveTo(525, 820);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(285, 100, 750, 580, 620, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(133,18,222,1.00)";
context.stroke();
//////////////////////Curve TWO orange 1 left
context.beginPath();
context.moveTo(374, 779);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(400, 150, 100, 500, 160, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(232,103,37,1.00)";
context.stroke();
//////////////////////Curve TWO orange 2 RIGHT
context.beginPath();
context.moveTo(530, 815);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(285, 100, 750, 580, 650, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(232,103,37,1.00)";
context.stroke();
//////////////////////Curve three Blue left
context.beginPath();
context.moveTo(365, 787);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(400, 150, 100, 500, 132, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(12,0,212,1.00)";
context.stroke();
//////////////////////Curve three blue RIGHT
context.beginPath();
context.moveTo(545, 815);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(285, 100, 750, 580, 675, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(12,0,212,1.00)";
context.stroke();
//////////////////////Curve four green left
context.beginPath();
context.moveTo(359, 805);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(400, 150, 100, 500, 109, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(3,101,39,1.00)";
context.stroke();
//////////////////////Curve three blue RIGHT
context.beginPath();
context.moveTo(555, 830);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(285, 100, 750, 580, 700, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(3,101,39,1.00)";
context.stroke();
//////////////////////Curve five yellow left
context.beginPath();
context.moveTo(345, 809);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(400, 150, 100, 500, 82, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(221,243,8,1.00)";
context.stroke();
//////////////////////Curve five yellow RIGHT
context.beginPath();
context.moveTo(565, 815);
/////////ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.bezierCurveTo(285, 100, 750, 580, 730, 0)
context.lineWidth = 5;
context.strokeStyle = "rgba(221,243,8,1.00)";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment