Sun
HTML Project - Description
I decided to create a html code creating a sun. I thought it would make an interesting design and I was successful in this. I thought it would be an interesting way to play with different shapes as well as better learn the order in which they must go in when writing code. I started from the back going forward and then adjusting the order later if needed. I started with the blue box as the background to my canvas, then the back circle and continuing towards the forward-most circle. Labeling each code also helped me organize my work. The most difficult area of the project was figuring out how to conduct the curves to the way I wanted them to go and my project would not be as interesting or successful without them. The above pictures were used as references as well as the graph below. I am glad to have learned some basic code and hope to use it in the future.
Code Used
<!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);
context.lineWidth = 5;
context.fillStyle = 'rgb(100, 100, 225)';
context.fill();
context.stroke();
//back circle
context.beginPath();
context.arc(400, 300, 300 ,0 ,2*Math.PI,false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(100, 100, 225)';
var grd2 = context.createRadialGradient(400, 300, 25, 400, 300, 320);
grd2.addColorStop(0, 'orange');
grd2.addColorStop(1, 'rgb(255, 255, 200)');
context.fillStyle = grd2;
context.fill();
context.stroke();
//back square
context.beginPath();
context.rect(250, 150, 300, 300);
context.lineWidth = 0;
context.strokeStyle = 'orange';
context.fillStyle = 'orange';
context.fill();
context.stroke();
//Bezier curves
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(50, 600, 0, i);
context.strokeStyle = 'rgb(225, 220, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(750, 100, 800, i);
context.strokeStyle = 'rgb(225, 220, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(750, i, 100, 800);
context.strokeStyle = 'rgb(225, 200, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(50, i, 600, 0);
context.strokeStyle = 'rgb(225, 200, 0)';
context.stroke();
}
//twirl continued
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300)
context.lineTo(canvas.width, i);
context.strokeStyle = 'rgb(255, 153, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300)
context.lineTo(0, i);
context.strokeStyle = 'rgb(255, 153, 0)';
context.stroke();
}
//triangles
context.beginPath();
context.moveTo(400, 0);
context.lineTo(450, 250);
context.lineTo(350, 250);
context.lineTo(400, 0);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(400, 600);
context.lineTo(450, 350);
context.lineTo(350, 350);
context.lineTo(400, 600);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(700, 300);
context.lineTo(450, 250);
context.lineTo(450, 350);
context.lineTo(700, 300);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(100, 300);
context.lineTo(350, 250);
context.lineTo(350, 350);
context.lineTo(100, 300);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
//curves
context.beginPath();
context.moveTo(500, 300);
context.quadraticCurveTo(425, 175, 300, 100);
context.quadraticCurveTo(375, 200, 400, 300);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(500, 300);
context.quadraticCurveTo(300, 325, 200, 400);
context.quadraticCurveTo(275, 275, 400, 200);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(300, 300);
context.quadraticCurveTo(375, 425, 500, 500);
context.quadraticCurveTo(425, 375, 400, 300);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(500, 275, 600, 200);
context.quadraticCurveTo(525, 325, 400, 400);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
//front circle
context.beginPath();
context.arc(400, 300, 115 ,0 ,2*Math.PI,false);
context.lineWidth = 1;
var grd3 = context.createRadialGradient(400, 300, 25, 400, 300, 320);
grd3.addColorStop(0, 'orange');
grd3.addColorStop(1, 'rgb(255, 255, 200)');
context.fillStyle = grd3;
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</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);
context.lineWidth = 5;
context.fillStyle = 'rgb(100, 100, 225)';
context.fill();
context.stroke();
//back circle
context.beginPath();
context.arc(400, 300, 300 ,0 ,2*Math.PI,false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(100, 100, 225)';
var grd2 = context.createRadialGradient(400, 300, 25, 400, 300, 320);
grd2.addColorStop(0, 'orange');
grd2.addColorStop(1, 'rgb(255, 255, 200)');
context.fillStyle = grd2;
context.fill();
context.stroke();
//back square
context.beginPath();
context.rect(250, 150, 300, 300);
context.lineWidth = 0;
context.strokeStyle = 'orange';
context.fillStyle = 'orange';
context.fill();
context.stroke();
//Bezier curves
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(50, 600, 0, i);
context.strokeStyle = 'rgb(225, 220, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(750, 100, 800, i);
context.strokeStyle = 'rgb(225, 220, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(750, i, 100, 800);
context.strokeStyle = 'rgb(225, 200, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(50, i, 600, 0);
context.strokeStyle = 'rgb(225, 200, 0)';
context.stroke();
}
//twirl continued
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300)
context.lineTo(canvas.width, i);
context.strokeStyle = 'rgb(255, 153, 0)';
context.stroke();
}
for (var i = 0; i < canvas.height; i+=20){
context.beginPath();
context.moveTo(400, 300)
context.lineTo(0, i);
context.strokeStyle = 'rgb(255, 153, 0)';
context.stroke();
}
//triangles
context.beginPath();
context.moveTo(400, 0);
context.lineTo(450, 250);
context.lineTo(350, 250);
context.lineTo(400, 0);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(400, 600);
context.lineTo(450, 350);
context.lineTo(350, 350);
context.lineTo(400, 600);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(700, 300);
context.lineTo(450, 250);
context.lineTo(450, 350);
context.lineTo(700, 300);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(100, 300);
context.lineTo(350, 250);
context.lineTo(350, 350);
context.lineTo(100, 300);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
//curves
context.beginPath();
context.moveTo(500, 300);
context.quadraticCurveTo(425, 175, 300, 100);
context.quadraticCurveTo(375, 200, 400, 300);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(500, 300);
context.quadraticCurveTo(300, 325, 200, 400);
context.quadraticCurveTo(275, 275, 400, 200);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(300, 300);
context.quadraticCurveTo(375, 425, 500, 500);
context.quadraticCurveTo(425, 375, 400, 300);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(500, 275, 600, 200);
context.quadraticCurveTo(525, 325, 400, 400);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();
//front circle
context.beginPath();
context.arc(400, 300, 115 ,0 ,2*Math.PI,false);
context.lineWidth = 1;
var grd3 = context.createRadialGradient(400, 300, 25, 400, 300, 320);
grd3.addColorStop(0, 'orange');
grd3.addColorStop(1, 'rgb(255, 255, 200)');
context.fillStyle = grd3;
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
