☼ D a n i e l l e ☼ C i r a o l o ☼: Project 2 ASCII

For this project, I decided to do a sunset beach scene. I had a lot of difficulty with this project, and I find html coding to be extremely difficult. I decided to keep the picture pretty simple, as it was hard enough for me to create simple shapes and put them together to form an image. I am not totally pleased with the final project, however I am glad that I could create and finish something using html coding even though I found it so difficult.

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

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

///sky////

context.beginPath();

context.rect(100, 10, 600, 400);

context.fillStyle = '#A9E2F3';

context.fill();

context.lineWidth = 1;

// create radial gradient

var grd = context.createRadialGradient(300, 250, 100, 238, 300, 300);

// light blue

grd.addColorStop(0, '#FBF6D9');

// dark blue

grd.addColorStop(1, '#FFA62F');

context.fillStyle = grd;

context.fill()

context.strokeStyle = 'black';

context.stroke();

/////island////

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

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

context.beginPath();

context.moveTo(500, 250);

context.quadraticCurveTo(500, 220, 550, 250);

context.fillStyle = '#347235';

context.fill();

context.lineWidth = 2;

// line color

context.strokeStyle = '#347235';

context.stroke();

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

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

context.beginPath();

context.moveTo(540, 250);

context.quadraticCurveTo(550, 220, 580, 250);

context.fillStyle = '#347235';

context.fill();

context.lineWidth = 2;

// line color

context.strokeStyle = '#347235';

context.stroke();

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

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

context.beginPath();

context.moveTo(580, 250);

context.quadraticCurveTo(580, 220, 610, 250);

context.fillStyle = '#347235';

context.fill();

context.lineWidth = 2;

// line color

context.strokeStyle = '#347235';

context.stroke();

//////sun/////

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

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

var centerX = canvas.width / 2.7;

var centerY = canvas.height / 2.5;

var radius = 70;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFCD2B';

context.fill();

context.lineWidth = 0;

context.strokeStyle = '#FFCD2B';

context.stroke();

////sand/////

context.beginPath();

context.rect(100, 250, 600, 200);

context.fillStyle = '#F1ECCF';

context.fill();

context.lineWidth = 1;

context.strokeStyle = 'black';

context.stroke();

///cloud///

context.beginPath();

context.moveTo(170, 80);

context.bezierCurveTo(90, 100, 130, 150, 230, 150);

context.bezierCurveTo(150, 180, 320, 150, 340, 150);

context.bezierCurveTo(420, 150, 420, 120, 390, 100);

context.bezierCurveTo(430, 40, 370, 30, 340, 50);

context.bezierCurveTo(320, 5, 250, 20, 250, 50);

context.bezierCurveTo(200, 5, 150, 20, 170, 80);

// complete custom shape

context.closePath();

context.fillStyle = '#FFE5B4';

context.fill();

context.lineWidth = 0;

context.strokeStyle = '#FFE5B4';

context.stroke();

///bird////

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

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

var x = canvas.width / 1.5;

var y = canvas.height / 4;

var radius = 10;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 1;

// line color

context.strokeStyle = 'black';

context.stroke();

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

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

var x = canvas.width / 1.55;

var y = canvas.height / 4;

var radius = 10;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 1;

// line color

context.strokeStyle = 'black';

context.stroke();

///bird2/////

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

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

var x = canvas.width / 1.4;

var y = canvas.height / 5.5;

var radius = 17;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 1;

// line color

context.strokeStyle = 'black';

context.stroke();

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

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

var x = canvas.width / 1.48;

var y = canvas.height / 5.5;

var radius = 17;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 1;

// line color

context.strokeStyle = 'black';

context.stroke();

//water///

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

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

context.beginPath();

context.moveTo(100, 250);

// line 1

context.quadraticCurveTo(310, 470, 700, 250);

context.lineWidth = 2;

context.strokeStyle = '#C2DFFF';

context.stroke();

context.closePath();

context.lineWidth = 5;

// add linear gradient

var grd = context.createLinearGradient(150, 50, canvas.width, canvas.height);

// light blue

grd.addColorStop(0, '#C2DFFF');

// dark blue

grd.addColorStop(1, '#357EC7');

context.fillStyle = grd;

context.fill();

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

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

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

////sunset reflection///

// round line cap (middle line)

context.beginPath();

context.moveTo(240, canvas.height / 2.3);

context.lineTo(canvas.width - 443, canvas.height / 2.3);

context.lineWidth = 10;

context.strokeStyle = '#CCE9F5';

context.lineCap = 'round';

context.stroke();

// round line cap (middle line)

context.beginPath();

context.moveTo(260, canvas.height / 2.2);

context.lineTo(canvas.width - 460, canvas.height / 2.2);

context.lineWidth = 7;

context.strokeStyle = '#CCE9F5';

context.lineCap = 'round';

context.stroke();

// round line cap (middle line)

context.beginPath();

context.moveTo(280, canvas.height / 2.1);

context.lineTo(canvas.width - 475, canvas.height / 2.1);

context.lineWidth = 5;

context.strokeStyle = '#CCE9F5';

context.lineCap = 'round';

context.stroke();

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

};

</script>

</head>

<body>

</body>

</html>

☼ D a n i e l l e ☼ C i r a o l o ☼

Tuesday, March 24, 2015

Project 2 ASCII

No comments:

Post a Comment

Blog Archive