digital art | hannah hughes: i'm sailing away

Saturday, September 13, 2014

i'm sailing away

i'm not gonna lie, this project was hard, i really enjoyed it though and i couldn't be happier with the finished product. i chose to do a sailboat because i love sailing and i wanted to challenge myself, and it definitely proved to be a challenge. i found a picture of a sailboat on google that i used as a reference for my project. i graphed a drawing of the original in order to make it easier to plug in the numbers. the boat was the first part that i did, then the sails and then the background. after i finished all the import and stuff i decided to add some clouds and some stars to the sunset in the background to help make it more interesting. adding the gradients and the clouds helped to add just a little bit of depth to the piece but i think the 2D-ness of it is what really makes it pop. i hope you like it!!

references:

code:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//background

context.beginPath();

context.rect(0, 0, 800, 600);

var grd = context.createRadialGradient(400, 400, 50, 400, 300, 200);

grd.addColorStop(0, 'FFD100');

grd.addColorStop(1, '604395');

context.fillStyle = grd;

context.fill();

//water

context.beginPath();

context.rect(0, 450, 800, 150);

var grd = context.createLinearGradient(0, 450, 800, 150);

grd.addColorStop(0, '#2A44B8');

grd.addColorStop(1, '#2AB8B6');

context.fillStyle = grd;

context.fill();

//stars

context.beginPath();

context.arc(25, 75, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(200, 75, 2, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(25, 75, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(200, 200, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(150, 400 , 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(150, 300, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(100, 350, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(30, 425, 2, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(75, 250, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(125, 25, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(400, 80, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(700, 400, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(780, 430, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(600, 420, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(790, 25, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(260, 40, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(600, 250, 4, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(500, 30, 2, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(675, 240, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(720, 90, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(720, 320, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(765, 200, 4, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(600, 100, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(675, 50, 2, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

//cloud 1

context.beginPath();

context.moveTo(0, 100);

context.bezierCurveTo(200, 150, 500, 50, 800, 100);

context.lineTo(800, 200)

context.bezierCurveTo(500, 100, 200, 250, 0, 200);

context.lineTo(0, 100);

context.closePath();

context.fillStyle = 'rgba(255, 0, 0, .2)';

context.fill();

context.strokeStyle = 'rgba(255, 0, 0, .1)';

context.stroke();

//cloud 2

context.beginPath();

context.moveTo(0, 400);

context.bezierCurveTo(200, 400, 500, 150, 800, 300);

context.lineTo(800, 400)

context.bezierCurveTo(500, 100, 200, 250, 0, 400);

context.lineTo(0, 400);

context.closePath();

context.fillStyle = 'rgba(250, 160, 180, .2)';

context.fill();

context.strokeStyle = 'rgba(250, 160, 180, .1)';

context.stroke();

//mast

context.beginPath();

context.moveTo(525, 100);

context.lineTo(525, 427);

context.lineWidth = 3;

context.lineCap = 'round';

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//boom

context.beginPath();

context.moveTo(525, 400);

context.lineTo(750, 400);

context.lineWidth = 3;

context.lineCap = 'round';

context.stroke();

//main sail

context.beginPath();

context.moveTo(525, 160);

context.bezierCurveTo(480, 225, 470, 300, 525, 400);

context.quadraticCurveTo(580, 350, 750, 400);

context.quadraticCurveTo(600, 300, 525, 160)

context.closePath();

context.fillStyle = '#FAF8D9';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAF8D9';

context.stroke();

//fore sail

context.beginPath();

context.moveTo(525, 140);

context.bezierCurveTo(300, 200, 400, 375, 428, 400);

context.quadraticCurveTo(450, 360, 525, 425);

context.quadraticCurveTo(430, 300, 525, 140)

context.closePath();

context.fillStyle = '#FAF8D9';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAF8D9';

context.stroke();

//burgee

context.beginPath();

context.moveTo(525, 105);

context.lineTo(525, 130);

context.quadraticCurveTo(550, 150, 590, 120);

context.quadraticCurveTo(550, 120, 525, 105)

context.closePath();

context.fillStyle = 'rgb(255, 0, 0)';

context.fill();

context.strokeStyle = 'rgb(255, 0, 0)';

context.lineWidth = 1;

context.stroke();

//hull

context.beginPath();

context.moveTo(425, 400);

context.bezierCurveTo(475, 525, 650, 475, 750, 450);

context.lineTo(750, 430);

context.bezierCurveTo(650, 425, 500, 445, 425, 400);

context.closePath();

context.fillStyle = '#011345';

context.fill();

context.strokeStyle = '#011345';

context.stroke();

//wave

context.beginPath();

context.moveTo(415, 470);

context.bezierCurveTo(450, 420, 600, 500, 730, 460);

context.quadraticCurveTo(600, 500, 500, 500);

context.quadraticCurveTo(400, 500, 415, 470);

context.fillStyle = '#7BDEE7';

context.fill();

context.strokeStyle = '#7BDEE7';

context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

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

</body>

</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)