Digital Arts!: A Day at a Deserted Beach

The final canvas captures the happiness that a simple image of sand and ocean may bring out in a person. The bright colors represent the energy that each waves takes as it crashes on the deserted island sand then fizzles out to return back to the ocean. I had chosen a calm yellow to color the sun because I didn't not want aggressiveness to come into the picture. The progress began to come all at once. At the beginning I had no idea what image I wanted to create in the canvas. However as soon as I created to simple one mound of sand using a Bezier Curve, the background just flowed along with it. Then I thought of all the excitement that is always taking place on a beach, this resulted to the images of a beach ball, using circle code with linear gradient to color, a beach towel and an umbrella for shade, always was created using bezier curves and quadratic curves. At the end I added the clouds, which I thought added simplicity to the sky. My piece is successful because it contains the simple, happy moments that one might see everyday with just a little bit of sand and water. (Always has ten objects that add a certain something to the picture.)

The horizontal lightness of the sky was corrected my a Professor Santiago.

CODE:

!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

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

var grdstartX = 400;

var grdstartY = 0;

var grdendX = 400;

var grdendY = 600;

var controlX1 = 450;

var controlY1 = 360;

var controlX2 = 500;

var controlY2 = 350;

var endX = 800;

var endY = 600;

var radius = 50;

var controlX3 = 500;

var controlY3 = 250;

var controlX4 = 475;

var controlY4 = 325;

var endX2 = 450;

var endY2 = 430;

var quadcontrolX = 475;

var quadcontrolY = 420;

var quadendX = 500;

var quadendY = 430;

var controlX5 = 515;

var controlY5 = 300;

var controlX6 = 520;

var controlY6 = 325;

var endX3 = 510;

var endY3 = 200;

var quadcontrolX2 = 475;

var quadcontrolY2 = 210;

var quadendX2 = 450;

var quadendY2 = 200;

//Rectangle Background

context.beginPath();

context.rect(0, 0, canvas.width, canvas.height);

context.lineWidth = 10;

var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);

grd.addColorStop(0, 'rgb(153, 204, 255)');

grd.addColorStop(.8, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(0, 153, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//background water

context.beginPath();

context.rect(0, 490, 800, 415);

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

context.fill();

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

context.stroke();

//Bezier Curve Sand

context.beginPath();

context.moveTo(0,600);

context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

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

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

context.fill();

context.lineWidth = 3;

context.stroke();

//Circle Sun

context.beginPath();

context.arc(700, 100, radius, 0 , 2 * Math.PI, false);

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

context.fill();

context.strokeStyle = 'yellow';

context.stroke();

//Bezier Curve tree

context.beginPath();

context.moveTo(450,200);

context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endX2, endY2);

context.quadraticCurveTo(quadcontrolX, quadcontrolY, quadendX, quadendY);

context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX3, endY3);

context.quadraticCurveTo(quadcontrolX2, quadcontrolY2, quadendX2, quadendY2);

context.fillStyle = 'rgb(153,102,51)';

context.strokeStyle = 'rgb(153,105,51)';

context.fill();

context.stroke();

var cloudcontrolX1 = 110;

var cloudcontrolY1 = 145;

var cloudcontrolX2 = 95;

var cloudcontrolY2 = 105;

var cloudendX = 145;

var cloudendY = 85;

var cloudcontrolX3 = 165;

var cloudcontrolY3 = 45;

var cloudcontrolX4 = 200;

var cloudcontrolY4 = 20;

var cloudendX2 = 245;

var cloudendY2 = 56;

var cloudcontrolX5 = 280;

var cloudcontrolY5 = 45;

var cloudcontrolX6 = 310;

var cloudcontrolY6 = 78;

var cloudendX3 = 280;

var cloudendY3 = 108;

var cloudcontrolX7 = 300;

var cloudcontrolY7 = 118;

var cloudcontrolX8 = 275;

var cloudcontrolY8 = 165;

var cloudendX4 = 235;

var cloudendY4 = 143;

var cloudcontrolX9 = 210;

var cloudcontrolY9 = 185;

var cloudcontrolX10 = 175;

var cloudcontrolY10 = 190;

var cloudendX5 = 150;

var cloudendY5 = 145;

var cloudgrdstartX = 100;

var cloudgrdstartY = 100;

var cloudgrdendX = 150;

var cloudgrdendY = 110;

//cloud bezier curve

context.beginPath();

context.moveTo(150,145);

context.bezierCurveTo(cloudcontrolX1, cloudcontrolY1, cloudcontrolX2, cloudcontrolY2, cloudendX, cloudendY);

context.bezierCurveTo(cloudcontrolX3, cloudcontrolY3, cloudcontrolX4, cloudcontrolY4, cloudendX2, cloudendY2);

context.bezierCurveTo(cloudcontrolX5, cloudcontrolY5, cloudcontrolX6, cloudcontrolY6, cloudendX3, cloudendY3);

context.bezierCurveTo(cloudcontrolX7, cloudcontrolY7, cloudcontrolX8, cloudcontrolY8, cloudendX4, cloudendY4);

context.bezierCurveTo(cloudcontrolX9, cloudcontrolY9, cloudcontrolX10, cloudcontrolY10, cloudendX5, cloudendY5);

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

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

context.fill();

context.stroke();

var cloud2controlX1 = 375;

var cloud2controlY1 = 55;

var cloud2controlX2 = 415;

var cloud2controlY2 = 50;

var cloud2endX = 473;

var cloud2endY = 75;

var cloud2controlX3 = 505;

var cloud2controlY3 = 48;

var cloud2controlX4 = 545;

var cloud2controlY4 = 65;

var cloud2endX2 = 548;

var cloud2endY2 = 106;

var cloud2controlX5 = 585;

var cloud2controlY5 = 125;

var cloud2controlX6 = 565;

var cloud2controlY6 = 170;

var cloud2endX3 = 530;

var cloud2endY3 = 160;

var cloud2controlX7 = 500;

var cloud2controlY7 = 195;

var cloud2controlX8 = 450;

var cloud2controlY8 = 205;

var cloud2endX4 = 415;

var cloud2endY4 = 148;

var cloud2controlX9 = 360;

var cloud2controlY9 = 145;

var cloud2controlX10 = 370;

var cloud2controlY10 = 115;

var cloud2endX5 = 390;

var cloud2endY5 = 105;

//Cloud 2

context.beginPath();

context.moveTo(390,105);

context.bezierCurveTo(cloud2controlX1, cloud2controlY1, cloud2controlX2, cloud2controlY2, cloud2endX, cloud2endY);

context.bezierCurveTo(cloud2controlX3, cloud2controlY3, cloud2controlX4, cloud2controlY4, cloud2endX2, cloud2endY2);

context.bezierCurveTo(cloud2controlX5, cloud2controlY5, cloud2controlX6, cloud2controlY6, cloud2endX3, cloud2endY3);

context.bezierCurveTo(cloud2controlX7, cloud2controlY7, cloud2controlX8, cloud2controlY8, cloud2endX4, cloud2endY4);

context.bezierCurveTo(cloud2controlX9, cloud2controlY9, cloud2controlX10, cloud2controlY10, cloud2endX5, cloud2endY5);

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

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

context.fill();

context.stroke();

var treecontrolX1 = 410;

var treecontrolY1 = 180;

var treecontrolX2 = 300;

var treecontrolY2 = 210;

var treeendX = 275;

var treeendY = 245;

var treecontrolX3 = 289;

var treecontrolY3 = 130;

var treecontrolX4 = 365;

var treecontrolY4 = 154;

var treeendX2 = 435;

var treeendY2 = 156;

var treecontrolX5 = 395;

var treecontrolY5 = 110;

var treecontrolX6 = 325;

var treecontrolY6 = 85;

var treeendX3 = 285;

var treeendY3 = 75;

var treecontrolX7 = 300;

var treecontrolY7 = 40;

var treecontrolX8 = 400;

var treecontrolY8 = 60;

var treeendX4 = 450;

var treeendY4 = 100;

var treecontrolX9 = 435;

var treecontrolY9 = 60;

var treecontrolX10 = 485;

var treecontrolY10 = 10;

var treeendX5 = 495;

var treeendY5 = 5;

var treecontrolX11 = 508;

var treecontrolY11 = 45;

var treecontrolX12 = 503;

var treecontrolY12 = 65;

var treeendX6 = 505;

var treeendY6 = 100;

var treecontrolX13 = 575;

var treecontrolY13 = 75;

var treecontrolX14 = 625;

var treecontrolY14 = 95;

var treeendX7 = 657;

var treeendY7 = 115;

var treecontrolX15 = 620;

var treecontrolY15 = 125;

var treecontrolX16 = 580;

var treecontrolY16 = 125;

var treeendX8 = 535;

var treeendY8 = 165;

var treecontrolX17 = 555;

var treecontrolY17 = 155;

var treecontrolX18 = 625;

var treecontrolY18 =175;

var treeendX9 = 665;

var treeendY9 = 235;

var treecontrolX19 = 635;

var treecontrolY19 = 225;

var treecontrolX20 = 560;

var treecontrolY20 = 200;

var treeendX10 = 510;

var treeendY10 = 205;

var QtreecontrolX = 475;

var QtreecontrolY = 203;

var QtreeendX = 450;

var QtreeendY = 200;

//Tree Branches

context.beginPath();

context.moveTo(450,200);

context.bezierCurveTo(treecontrolX1, treecontrolY1, treecontrolX2, treecontrolY2, treeendX, treeendY);

context.bezierCurveTo(treecontrolX3, treecontrolY3, treecontrolX4, treecontrolY4, treeendX2, treeendY2);

context.bezierCurveTo(treecontrolX5, treecontrolY5, treecontrolX6, treecontrolY6, treeendX3, treeendY3);

context.bezierCurveTo(treecontrolX7, treecontrolY7, treecontrolX8, treecontrolY8, treeendX4, treeendY4);

context.bezierCurveTo(treecontrolX9, treecontrolY9, treecontrolX10, treecontrolY10, treeendX5, treeendY5);

context.bezierCurveTo(treecontrolX11, treecontrolY11, treecontrolX12, treecontrolY12, treeendX6, treeendY6);

context.bezierCurveTo(treecontrolX13, treecontrolY13, treecontrolX14, treecontrolY14, treeendX7, treeendY7);

context.bezierCurveTo(treecontrolX15, treecontrolY15, treecontrolX16, treecontrolY16, treeendX8, treeendY8);

context.bezierCurveTo(treecontrolX17, treecontrolY17, treecontrolX18, treecontrolY18, treeendX9, treeendY9);

context.bezierCurveTo(treecontrolX19, treecontrolY19, treecontrolX20, treecontrolY20, treeendX10, treeendY10);

context.quadraticCurveTo(QtreecontrolX, QtreecontrolY, QtreeendX, QtreeendY);

context.fillStyle = 'rgb(51, 153, 0)';

context.fill();

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

context.stroke();

var firstwatcontrolX = 168;

var firstwatcontrolY = 505;

var firstwatcontrolX2 = 165;

var firstwatcontrolY2 = 474;

var firstwatendX = 170;

var firstwatendY = 700;

var firstwatcontrolX3 = 210;

var firstwatcontrolY3 = 460;

var firstwatcontrolX4 = 260;

var firstwatcontrolY4 = 505;

var firstwatendX2 = 350;

var firstwatendY2 = 700;

var firstwatcontrolX5 = 385;

var firstwatcontrolY5 = 430;

var firstwatcontrolX6 = 505;

var firstwatcontrolY6 = 510;

var firstwatendX3 = 450;

var firstwatendY3 = 700;

var firstwatcontrolX7 = 508;

var firstwatcontrolY7 = 460;

var firstwatcontrolX8 = 620;

var firstwatcontrolY8 = 460;

var firstwatendX4 = 580;

var firstwatendY4 = 700;

var firstwatcontrolX9 = 655;

var firstwatcontrolY9 = 480;

var firstwatcontrolX10 = 700;

var firstwatcontrolY10 = 490;

var firstwatendX5 = 700;

var firstwatendY5 = 700;

var firstwatcontrolX11 = 725;

var firstwatcontrolY11 = 520;

var firstwatcontrolX12 = 760;

var firstwatcontrolY12 = 540;

var firstwatendX6 = 900;

var firstwatendY6 = 700;

//First Wave

context.beginPath();

context.moveTo(0,600);

context.bezierCurveTo(firstwatcontrolX, firstwatcontrolY, firstwatcontrolX2, firstwatcontrolY2, firstwatendX, firstwatendY);

context.bezierCurveTo(firstwatcontrolX3, firstwatcontrolY3, firstwatcontrolX4, firstwatcontrolY4, firstwatendX2, firstwatendY2);

context.bezierCurveTo(firstwatcontrolX5, firstwatcontrolY5, firstwatcontrolX6, firstwatcontrolY6, firstwatendX3, firstwatendY3);

context.bezierCurveTo(firstwatcontrolX7, firstwatcontrolY7, firstwatcontrolX8, firstwatcontrolY8, firstwatendX4, firstwatendY4);

context.bezierCurveTo(firstwatcontrolX9, firstwatcontrolY9, firstwatcontrolX10, firstwatcontrolY10, firstwatendX5, firstwatendY5);

context.bezierCurveTo(firstwatcontrolX11, firstwatcontrolY11, firstwatcontrolX12, firstwatcontrolY12, firstwatendX6, firstwatendY6);

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

context.fill();

context.strokeStyle = 'rgb(102,204,255)';

context.stroke();

var watcontrolX = 162;

var watcontrolY = 505;

var watcontrolX2 = 140;

var watcontrolY2 = 500;

var watendX = 170;

var watendY = 700;

var watcontrolX3 = 205;

var watcontrolY3 = 475;

var watcontrolX4 = 260;

var watcontrolY4 = 515;

var watendX2 = 350;

var watendY2 = 700;

var watcontrolX5 = 375;

var watcontrolY5 = 450;

var watcontrolX6 = 505;

var watcontrolY6 = 515;

var watendX3 = 450;

var watendY3 = 700;

var watcontrolX7 = 500;

var watcontrolY7 = 480;

var watcontrolX8 = 620;

var watcontrolY8 = 470;

var watendX4 = 580;

var watendY4 = 700;

var watcontrolX9 = 650;

var watcontrolY9 = 500;

var watcontrolX10 = 700;

var watcontrolY10 = 500;

var watendX5 = 700;

var watendY5 = 700;

var watcontrolX11 = 740;

var watcontrolY11 = 530;

var watcontrolX12 = 760;

var watcontrolY12 = 550;

var watendX6 = 900;

var watendY6 = 700;

//Bezier Curve Water

context.beginPath();

context.moveTo(0,600);

context.bezierCurveTo(watcontrolX, watcontrolY, watcontrolX2, watcontrolY2, watendX, watendY);

context.bezierCurveTo(watcontrolX3, watcontrolY3, watcontrolX4, watcontrolY4, watendX2, watendY2);

context.bezierCurveTo(watcontrolX5, watcontrolY5, watcontrolX6, watcontrolY6, watendX3, watendY3);

context.bezierCurveTo(watcontrolX7, watcontrolY7, watcontrolX8, watcontrolY8, watendX4, watendY4);

context.bezierCurveTo(watcontrolX9, watcontrolY9, watcontrolX10, watcontrolY10, watendX5, watendY5);

context.bezierCurveTo(watcontrolX11, watcontrolY11, watcontrolX12, watcontrolY12, watendX6, watendY6);

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

context.fill();

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

context.stroke();

var towcontrolX1 = 350;

var towcontrolY1 = 425;

var towcontrolX2 = 320;

var towcontrolY2 = 440;

var towendX = 300;

var towendY = 450;

var towcontrolX3 = 267;

var towcontrolY3 = 500;

var towendX2 = 242;

var towendY2 = 530;

var towcontrolX4 = 350;

var towcontrolY4 = 515;

var towendX3 = 425;

var towendY3 = 510;

var towcontrolX5 = 435;

var towcontrolY5 = 460;

var towendX4 = 450;

var towendY4 = 413;

var towgrdstartX = 350;

var towgrdstartY = 435;

var towgrdendX = 445;

var towgrdendY = 420;

//Towel Bezier Curve

context.beginPath();

context.moveTo(450,413);

context.bezierCurveTo(towcontrolX1, towcontrolY1, towcontrolX2, towcontrolY2, towendX, towendY);

context.quadraticCurveTo(towcontrolX3, towcontrolY3, towendX2, towendY2);

context.quadraticCurveTo(towcontrolX4, towcontrolY4, towendX3, towendY3);

context.quadraticCurveTo(towcontrolX5, towcontrolY5, towendX4, towendY4);

var grd = context.createLinearGradient(towgrdstartX, towgrdstartY, towgrdendX, towgrdendY);

grd.addColorStop(0, 'rgb(102, 0, 51)');

grd.addColorStop(.5, 'rgb(153, 0, 51)');

grd.addColorStop(1, 'rgb(204, 51, 102 )');

context.fillStyle = grd;

context.fill();

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

context.stroke();

var bellacontrolX = 338;

var bellacontrolY = 420;

var bellacontrolX2 = 315;

var bellacontrolY2 = 350;

var bellaendX = 300;

var bellaendY = 320;

var QbellacontrolX = 305;

var QbellacontrolY = 323;

var QbellaendX = 315;

var QbellaendY = 320;

var bellacontrolX3 = 320;

var bellacontrolY3 = 340;

var bellacontrolX4 = 345;

var bellacontrolY4 = 400;

var bellaendX2 = 340;

var bellaendY2 = 480;

var QbellacontrolX2 = 335;

var QbellacontrolY2 = 483;

var QbellaendX2 = 330;

var QbellaendY2 = 480;

//Unmbrella

context.beginPath();

context.moveTo(330,480);

context.bezierCurveTo(bellacontrolX, bellacontrolY, bellacontrolX2, bellacontrolY2, bellaendX, bellaendY);

context.quadraticCurveTo(QbellacontrolX, QbellacontrolY, QbellaendX, QbellaendY);

context.bezierCurveTo(bellacontrolX3, bellacontrolY3, bellacontrolX4, bellacontrolY4, bellaendX2, bellaendY2);

context.quadraticCurveTo(QbellacontrolX2, QbellacontrolY2, QbellaendX2, QbellaendY2);

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

context.fill();

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

context.stroke();

var bellatopcontrolX = 235;

var bellatopcontrolY = 240;

var bellatopcontrolX2 = 325;

var bellatopcontrolY2 = 215;

var bellatopendX = 435;

var bellatopendY = 290;

var bellatopcontrolX3 = 400;

var bellatopcontrolY3 = 283;

var bellatopcontrolX4 = 375;

var bellatopcontrolY4 = 300;

var bellatopendX2 = 360;

var bellatopendY2 = 325;

var bellatopcontrolX5 = 325;

var bellatopcontrolY5 = 310;

var bellatopcontrolX6 = 290;

var bellatopcontrolY6 = 325;

var bellatopendX3 = 285;

var bellatopendY3 = 350;

var bellatopcontrolX7 = 265;

var bellatopcontrolY7 = 330;

var bellatopcontrolX8 = 235;

var bellatopcontrolY8 = 350;

var bellatopendX4 = 220;

var bellatopendY4 = 375;

//Umbella Top

context.beginPath();

context.moveTo(220,375);

context.bezierCurveTo(bellatopcontrolX, bellatopcontrolY, bellatopcontrolX2, bellatopcontrolY2, bellatopendX, bellatopendY);

context.bezierCurveTo(bellatopcontrolX3, bellatopcontrolY3, bellatopcontrolX4, bellatopcontrolY4, bellatopendX2, bellatopendY2);

context.bezierCurveTo(bellatopcontrolX5, bellatopcontrolY5, bellatopcontrolX6, bellatopcontrolY6, bellatopendX3, bellatopendY3);

context.bezierCurveTo(bellatopcontrolX7, bellatopcontrolY7, bellatopcontrolX8, bellatopcontrolY8, bellatopendX4, bellatopendY4);

context.fillStyle = 'rgb(102, 0, 204)';

context.fill();

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

context.stroke();

var beachgrdstartX = 309;

var beachgrdstartY = 473;

var beachgrdendX = 310;

var beachgrdendY = 470;

//Circle Beach Ball

context.beginPath();

context.arc(320, 470, radius, 0 , 2 * Math.PI, false);

var grd = context.createLinearGradient(beachgrdstartX, beachgrdstartY, beachgrdendX, beachgrdendY);

grd.addColorStop(0, 'rgb(255, 102, 0)');

grd.addColorStop(.8, 'rgb(255, 153, 0)');

grd.addColorStop(1, 'rgb(255, 51, 0 )');

context.fillStyle = grd;

context.fill();

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

context.stroke();

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

};

</script>

</head>

<body>

</body>

</html>

Digital Arts!

Tuesday, September 18, 2012

A Day at a Deserted Beach

No comments:

Post a Comment

Blog Archive