Digital Arts: My first Project!

I am not sure if I am supposed to post it up yet or not, but I just finished and wanted to share! Here is my code (I think about 700 lines?) and the picture. It doesn't look like much but it took a long time. I hope its ok!

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start here
//canvas border for gradient

context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
// add linear gradient
var grd = context.createLinearGradient(400, 0, 400, 600);
// black
grd.addColorStop(0, "#000000");
// more black
grd.addColorStop(.2, "#000000");
// blue
grd.addColorStop(.7, "#2609B4");
// sunset colors
grd.addColorStop(1, "#F80683");
context.fillStyle = grd;
context.fill();
// Sun
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX2 = 400;
var centerY2 = 500;
var radius2 = 60;

context.beginPath();
context.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
context.fillStyle = "brown";
context.fill();

// add linear gradient to SUN
var grd = context.createLinearGradient(400, 430, 400, 570);
// yellow
grd.addColorStop(0, "#FAEA06");
// orange
grd.addColorStop(1, "#FA8006");
context.fillStyle = grd;
context.fill();

// Saturn
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 575;
var centerY = 125;
var radius = 45;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "brown";
context.fill();

// add linear gradient to SATURN
var grd = context.createLinearGradient(centerX, centerY, radius, 0, 2 * Math.PI, false);
// yellow
grd.addColorStop(0, "#450606");
// brown/red
grd.addColorStop(.2, "#EBCD0C");
// yellow
grd.addColorStop(.5, "#450606");
// dark yellow
grd.addColorStop(.7, "#605A32");
// orange brown
grd.addColorStop(1, "#503414");
context.fillStyle = grd;
context.fill();

// Piramid 1
context.beginPath();
context.moveTo(200, 400);
context.lineTo(400, 600);
context.bezierCurveTo(175, 600, 175, 600, 0, 600);
context.lineTo(200, 400);
context.fillStyle = "#E4A316";
context.fill();
context.strokeStyle = "#CB9624";
context.stroke();

//piramid shadow
context.beginPath();
context.moveTo(200, 400);
context.lineTo(450, 600);
context.bezierCurveTo(425, 600, 425, 600, 400, 600);
context.fillStyle = "#A17415";
context.fill();
context.strokeStyle = "#A17415";
context.stroke();

// Piramid 2
context.beginPath();
context.moveTo(550, 400);
context.lineTo(725, 600);
context.bezierCurveTo(550, 600, 550, 600, 400, 600);
context.lineTo(550, 400);
context.fillStyle = "#E4A316";
context.fill();
context.strokeStyle = "#BF8A19";
context.stroke();

//piramid 2 shadow
context.beginPath();
context.moveTo(550, 400);
context.lineTo(775, 600);
context.bezierCurveTo(750, 600, 750, 600, 725, 600);
context.lineTo(550, 400);
context.fillStyle = "#B07E12";
context.fill();
context.strokeStyle = "#BF8A19";
context.stroke();

// Saturns ring
context.beginPath();
context.moveTo(500, 50);
context.lineTo(570, 80);
context.bezierCurveTo(525, 53, 525, 53, 625, 185);
context.fill();

context.beginPath();
context.moveTo(625, 185);
context.lineTo(610, 155);
context.stroke();

//green star
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 700;
var centerY = 200;
var radius = 20;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
//green star gradient
var grd = context.createLinearGradient(670, 220, 730, 170);
// light green
grd.addColorStop(0, "#7BF573");
// dark green
grd.addColorStop(1, "#1E491A");
context.fillStyle = grd;
context.fill();
context.strokeStyle = "#1E491A";
context.stroke();

//pink planet
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 750;
var centerY = 50;
var radius = 30;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// pink star gradient
var grd = context.createLinearGradient(720, 20, 780, 80);
// pink
grd.addColorStop(0, "#FA08F2");
// gray
grd.addColorStop(1, "#474047");
context.fillStyle = grd;
context.fill();
context.stroke();

//shooting star
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX3 = 150
var centerY3 = 70
var radius3 = 10;

context.beginPath();
context.arc(centerX3, centerY3, radius3, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "grey";
context.stroke();

// shooting star 2 color gradient
var grd = context.createLinearGradient(145, 68, 153, 72);
// white
grd.addColorStop(0, "white");
// grey
grd.addColorStop(1, "#857F8E");
context.fillStyle = grd;
context.fill();

//shooting star tale
context.beginPath();
context.moveTo(150, 70);
context.lineTo(75, 40);
context.bezierCurveTo(142, 68, 148, 68, 50, 60);
context.lineTo(146, 70);
context.fill();

//shooting star 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX4 = 300;
var centerY4 = 200;
var radius4 = 25;

context.beginPath();
context.arc(centerX4, centerY4, radius4, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "grey";
context.stroke();
// shooting star 2 color gradient
var grd = context.createLinearGradient(290, 200, 325, 200);
// white
grd.addColorStop(0, "white");
// grey
grd.addColorStop(1, "#857F8E");
context.fillStyle = grd;
context.fill();

//shooting star tale 2
context.beginPath();
context.moveTo(295, 195);
context.lineTo(200, 75);
context.bezierCurveTo(290, 210, 273, 210, 150, 130);
context.lineTo(280, 200)
context.fill();

//little stars
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 400;
var centerY = 80;
var radius = 5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 350;
var centerY = 150;
var radius = 5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 190;
var centerY = 50;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 280;
var centerY = 20;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 295;
var centerY = 80;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 400;
var centerY = 20;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 350;
var centerY = 40;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 235;
var centerY = 60;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 135;
var centerY = 18;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 20;
var centerY = 100;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 30;
var centerY = 80;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 35;
var centerY = 30;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 430;
var centerY = 30;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 470;
var centerY = 60;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 500;
var centerY = 35;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 545;
var centerY = 20;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 600;
var centerY = 45;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 610;
var centerY = 20;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 630;
var centerY = 30;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 700;
var centerY = 90;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 670;
var centerY = 70;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 720;
var centerY = 20;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 680;
var centerY = 30;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 300;
var centerY = 30;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 490;
var centerY = 100;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 460;
var centerY = 85;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 375;
var centerY = 85;
var radius = 3;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();

// ground
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.rect(0, 600, 800, 700);
context.fillStyle = '#F6E549';
context.fill();

//oasis water
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(0, 625);

// line 1
context.lineTo(200, 675);

// quadratic curve
context.quadraticCurveTo(225, 680, 350, 625);

// bezier curve
context.bezierCurveTo(370, 610, 325, 610, 500, 650);

// quadratic curve
context.quadraticCurveTo(550, 660, 800, 645);

context.lineWidth = 8;
context.strokeStyle = "blue";
context.stroke();

// foliage
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 200;
var centerY = 670;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 205;
var centerY = 670;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 210;
var centerY = 670;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 203;
var centerY = 664;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 207;
var centerY = 663;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();

// foliage 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 375;
var centerY = 625;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 368;
var centerY = 626;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 364;
var centerY = 622;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 363;
var centerY = 630;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 372;
var centerY = 632;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();

////////////////////////////////////// end here

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="700"></canvas>
</body>
</html>

Digital Arts

Monday, July 9, 2012

My first Project!

No comments:

Post a Comment