The theme of soccer is shown in multiple places, in the soccer ball itself (whose design is inspired by last years Champions League official match-ball), and a goalpost. I also added some aesthetic design in the background and rest of the image. The viewer should notice the sun in the top left corner, as well as a mountain in the middle of the left side (on the edge of the grass). Normally, a mountain would be larger, but it is smaller in this image, since it is a good distance away from the field. Notice the light gradient on the grass, which not only adds texture to the grass, but adds a small shadow effect for the ball.
In my work, creating lines was very important. I made a lot of shapes in this drawing, five stars, a ball, two mountain sides, a goal post, and even the sun. However, making lines that were exact was a challenge and very important to the piece. I was able to do so perfectly with the mountain and goalpost, while it was harder to do so on the ball. I couldn't shorten the lines in a few spots, where it lightly protrudes from the ball, without compromising the star's shape. Despite this, I feel that my lines were made exactly as well as they needed to be, and subtly make this image even better.
P.S. What does the title mean? I figured to make it a funny caption. A group that just played on the field asking themselves if they forgot to bring their ball with them, where the image directly answers their question.
 |
| The Champions League ball that inspired my design |
 |
| My design: |
Hours taken to create: 3
Lines of code (including spaces): 314
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Sky
context.rect(0,0, canvas.width, canvas.height);
// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 90;
// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 200;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "#ffff00");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "#ffffcc");
// outer color
grd.addColorStop(1, "#b3d1ff");
context.fillStyle = grd;
context.fill();
//Grass
var x=0;
var y=390;
var width = 800
var height= 210;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = '#00FF00';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "#00FF00");
//intermediate color
grd.addColorStop(0.6, "#00AA00");
// ending color
grd.addColorStop(1, "#00FF00");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//Ball
var startAngle = 0 * Math.PI;
var endAngle = 2 * Math.PI;
context.beginPath();
context.arc(450, 320, 120, startAngle, endAngle, true);
context.lineWidth = 15;
context.strokeStyle = 'white';
context.fillStyle = "#0066FF";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(330, 270);
context.lineTo(360, 300);
context.lineTo(360, 270);
context.lineTo(390, 240);
context.lineTo(360, 240);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(390, 240);
context.lineTo(420, 270);
context.lineTo(420, 300);
context.lineTo(450, 270);
context.lineTo(480, 300);
context.lineTo(480, 270);
context.lineTo(510, 240);
context.lineTo(480, 240);
context.lineTo(450, 210);
context.lineTo(420, 240);
context.lineTo(390, 240);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(540, 240);
context.lineTo(510, 240);
context.lineTo(540, 270);
context.lineTo(540, 300);
context.lineTo(570, 270);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(330, 360);
context.lineTo(360, 390);
context.lineTo(360, 420);
context.lineTo(390, 390);
context.lineTo(420, 420);
context.lineTo(420, 390);
context.lineTo(450, 360);
context.lineTo(420, 360);
context.lineTo(390, 330);
context.lineTo(360, 360);
context.lineTo(330, 360);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(450, 360);
context.lineTo(480, 390);
context.lineTo(480, 420);
context.lineTo(510, 390);
context.lineTo(540, 420);
context.lineTo(540, 390);
context.lineTo(570, 360);
context.lineTo(540, 360);
context.lineTo(510, 330);
context.lineTo(480, 360);
context.lineTo(450, 360);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
//Net
context.beginPath();
context.moveTo(660, 285);
context.lineTo(715, 285);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(660, 300);
context.lineTo(735, 300);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(660, 315);
context.lineTo(750, 315);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(660, 330);
context.lineTo(765, 330);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(660, 345);
context.lineTo(770, 345);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(660, 360);
context.lineTo(775, 360);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(660, 375);
context.lineTo(780, 375);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
//LineUpDown
context.beginPath();
context.moveTo(675, 270);
context.lineTo(675, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(690, 275);
context.lineTo(690, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(705, 280);
context.lineTo(705, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(720, 285);
context.lineTo(720, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(735, 295);
context.lineTo(735, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(750, 305);
context.lineTo(750, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(765, 330);
context.lineTo(765, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
//Goal Post
context.beginPath();
context.moveTo(660, 265);
context.lineTo(660, 385);
context.lineTo(780, 385);
context.lineWidth = 10;
context.strokeStyle = 'Silver';
context.stroke();
var startAngle = 0 * Math.PI;
var endAngle = 1.5 * Math.PI;
context.beginPath();
context.arc(660, 390, 120, startAngle, endAngle, true);
context.lineWidth = 10;
context.strokeStyle = 'silver';
context.stroke();
//Landscape Mountain
var x = 0;
var y = 300;
var cpointX1 = 30;
var cpointY1 = 270;
var cpointX2 = 90;
var cpointY2 = 360;
var x1 = 90;
var y1 = 330;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineTo(120, 360);
context.lineTo(150, 385);
context.lineTo(0, 385);
context.lineTo(0, 300);
context.lineWidth = 5;
context.strokeStyle = "#86592d";
context.fillStyle = "#bf8040";
context.fill();
context.lineCap = 'round'
context.stroke();
var x = 0;
var y = 360;
var cpointX = 30;
var cpointY = 330;
var x1 = 60;
var y1 = 360;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineTo(80, 385);
context.lineWidth = 5;
context.strokeStyle = "#604020";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment