Digital Arts Blog: ASCII Project

For my project, I decided to do a picture of a sunrise. I got the idea when I was messing around with colors for the background and found the ones seen in my picture. I used a linear gradient to set the tone of my picture. I made a circle for the sun, and put in multiple rays shining out of it. I had some difficulty with the sun rays because it was taking me extremely long to get the coordinates right for each individual line. However, once I had finished the sun, I was able to move on to the cloud. I used a combination of multiple different curves to make the cloud perfect. After that, I decided to make some birds flying in front of the sunrise. For these, I used quadratic curves. Again, I had some trouble getting the coordinates right to make the birds truly look like they were flying. Finally, I put some green grass at the bottom of the picture. I think that my picture is successful because you can easily recognize what it is a picture of, and the bright, happy colors set a relaxing tone.

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

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

//Background Gradient

context.beginPath();

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

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

var grd = context.createLinearGradient(0, 500, 0, 0);

grd.addColorStop(0, 'rgb(250, 250, 100)');

grd.addColorStop(1, 'rgb(200, 100, 100)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Cloud

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

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

context.beginPath();

context.moveTo(170, 80);

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

context.bezierCurveTo(250, 180, 320, 180, 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);

context.closePath();

context.fillStyle = 'white';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'white';

context.stroke();

//Sun

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

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

var centerX = canvas.width / 5;

var centerY = canvas.height / 5;

var radius = 70;

context.beginPath();

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

context.fillStyle = 'rgb(235, 235, 175)';

context.fill();

context.strokeStyle = 'rgb(235, 235, 175)';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(200, 300);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(300, 250);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(50, 350);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(15, 205);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(10, 100);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(350, 130);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(300, 30);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(300, -200);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(centerX, centerY);

context.lineTo(5, -200);

context.lineWidth = 10;

context.strokeStyle = 'rgb(235, 235, 175)';

context.lineCap = 'square';

context.stroke();

//Birds

context.beginPath();

context.moveTo(610, 130);

context.quadraticCurveTo(650, 100, 650, 130);

context.quadraticCurveTo(690, 100, 680, 130);

context.strokeStyle = "black"

context.lineWidth = 8;

context.stroke();

context.beginPath();

context.moveTo(510, 230);

context.quadraticCurveTo(550, 200, 550, 230);

context.quadraticCurveTo(590, 200, 580, 230);

context.strokeStyle = "black"

context.lineWidth = 8;

context.stroke();

//Grass

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

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

context.beginPath();

context.rect(0, 570, 800, 30);

context.fillStyle = 'green';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'green';

context.stroke();

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

};

</script>

</head>

<body>

</body>

</html>

Digital Arts Blog

Wednesday, September 18, 2013

ASCII Project

No comments:

Post a Comment