When the Professor first mentioned this project the first thing I thought of doing was Spongebob Squarepants, which lead into me making his pineapple house instead. I was definitely tedious at times having the little details, and trying to replicate something that is round. I enjoyed working on this project and seeing my image progress.
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//rectangle and gradient
context.beginPath();
context.rect(0,50,800,600);
var grd=context.createLinearGradient(400,0,400,600);
grd.addColorStop(0,'rgb(50,250,250)');
grd.addColorStop(.74,'rgb(100,100,200)');
grd.addColorStop(.75,'rgb(0,0,0)');
grd.addColorStop(.76,'rgb(100,100,100)');
grd.addColorStop(1,'rgb(255,255,225)');
context.fillStyle = grd;
context.fill();
context.stroke();
//top part of pineapple
context.beginPath();
context.moveTo(310,280);
context.bezierCurveTo(230,130,250,130,340,255);
context.strokeStyle='rgb(8,152,78)';
var grd=context.createLinearGradient(230,135,250,340,255);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.moveTo(330,250)
context.bezierCurveTo(275,75,275,75,370,235);
var grd=context.createLinearGradient(330,75,275,325,275,75);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.moveTo(360,235)
context.bezierCurveTo(330,40,350,40,400,225);
var grd=context.createLinearGradient(360,50,350,150,360,150);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.moveTo(390,225)
context.bezierCurveTo(410,25,410,25,435,225);
var grd=context.createLinearGradient(410,25,350,100,200,150);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.moveTo(425,225)
context.bezierCurveTo(500,40,500,40,470,250);
var grd=context.createLinearGradient(425,0,350,90,470,250);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.moveTo(460,240)
context.bezierCurveTo(575,130,575,130,490,270);
var grd=context.createLinearGradient(600,0,500,0,500,300);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();
//pinapple shape
context.beginPath();
context.moveTo(225,600);
context.bezierCurveTo(225, 100, 575, 100, 575, 600);
context.strokeStyle='rgb(143,92,16)';
context.lineWidth=5;
var grd=context.createLinearGradient(75,100,500,600);
grd.addColorStop(0.,'rgb(255,255,255)');
grd.addColorStop(.75,'rgb(212,101,16)');
context.fillStyle=grd;
context.fill();
context.stroke();
//lines in pineapple
context.beginPath();
context.moveTo(365,230);
context.quadraticCurveTo(500,300,560,450);
context.stroke();
context.beginPath();
context.moveTo(305,275);
context.quadraticCurveTo(450,350,575,600);
context.stroke();
context.beginPath();
context.moveTo(265,350);
context.quadraticCurveTo(375,400,500,600);
context.stroke();
context.beginPath();
context.moveTo(245,425);
context.quadraticCurveTo(300,450,425,600);
context.stroke();
context.beginPath();
context.moveTo(230,500);
context.quadraticCurveTo(225,475,350,600);
context.stroke();
context.beginPath();
context.moveTo(225,600);
context.quadraticCurveTo(275,475,490,270);
context.stroke();
context.beginPath();
context.moveTo(235,450);
context.quadraticCurveTo(375,250,440,235);
context.stroke();
context.beginPath();
context.moveTo(300,600);
context.quadraticCurveTo(400,450,525,325);
context.stroke();
context.beginPath();
context.moveTo(400,600);
context.quadraticCurveTo(500,450,550, 400);
context.stroke();
context.beginPath();
context.moveTo(500,600);
context.quadraticCurveTo(575,475,570, 485);
context.stroke();
//little vertical lines in pineapple
context.beginPath();
context.moveTo(405,305);
context.lineTo(405,290);
context.stroke();
context.beginPath();
context.moveTo(405,400);
context.lineTo(405,415);
context.stroke();
context.beginPath();
context.moveTo(455,340);
context.lineTo(455,355);
context.stroke();
context.beginPath();
context.moveTo(450,450);
context.lineTo(450,465);
context.stroke();
context.beginPath();
context.moveTo(500,400);
context.lineTo(500,415);
context.stroke();
context.beginPath();
context.moveTo(300,405);
context.lineTo(300,420);
context.stroke();
context.beginPath();
context.moveTo(350,255);
context.lineTo(350,270);
context.stroke();
context.beginPath();
context.moveTo(450,255);
context.lineTo(450,270);
context.stroke();
context.beginPath();
context.moveTo(500,305);
context.lineTo(500,290);
context.stroke();
context.beginPath();
context.moveTo(300,310);
context.lineTo(300,295);
context.stroke();
context.beginPath();
context.moveTo(300,500);
context.lineTo(300,515);
context.stroke();
context.beginPath();
context.moveTo(350,450);
context.lineTo(350,465);
context.stroke();
context.beginPath();
context.moveTo(260,460);
context.lineTo(260,475);
context.stroke();
context.beginPath();
context.moveTo(270,555);
context.lineTo(270,570);
context.stroke();
context.beginPath();
context.moveTo(240,530);
context.lineTo(240,545);
context.stroke();
context.beginPath();
context.moveTo(490,530);
context.lineTo(490,545);
context.stroke();
context.beginPath();
context.moveTo(450,570);
context.lineTo(450,585);
context.stroke();
context.beginPath();
context.moveTo(535,570);
context.lineTo(535,585);
context.stroke();
context.beginPath();
context.moveTo(535,450);
context.lineTo(535,465);
context.stroke();
context.beginPath();
context.moveTo(260,375);
context.lineTo(260,390);
context.stroke();
//windows
context.beginPath();
context.arc(325,350,40,0,2 * Math.PI,false);
context.lineWidth=15;
context.strokeStyle='rgb(125,129,149)';
var grd=context.createLinearGradient(275,345,380,355);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(.50,'rgb(42,155,241)');
grd.addColorStop(1,'rgb(12,223,216)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.arc(525,525,30,0,2 * Math.PI,false);
context.lineWidth=15;
context.strokeStyle='rgb(125,129,149)';
var grd=context.createLinearGradient(500,550,575,550);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(.5,'rgb(42,155,241)');
grd.addColorStop(1,'rgb(12,223,216)');
context.fillStyle=grd;
context.fill();
context.stroke();
//door
context.beginPath();
context.moveTo(300,600);
context.bezierCurveTo(300, 410, 440, 410, 440, 600);
context.strokeStyle='rgb(125,129,149)';
context.lineWidth=10;
context.fillStyle='rgb(149,153,169)';
context.fill();
context.stroke();
context.beginPath();
context.arc(370,540,0,0,2 * Math.PI,false);
context.lineWidth=12;
context.strokeStyle='rgb(125,129,149)';
context.stroke();
context.beginPath();
context.moveTo(367,505)
context.lineTo(367,495)
context.lineCap='round'
context.lineWidth=10;
context.strokeStyle='rgb(125,129,149)';
context.stroke();
context.beginPath();
context.moveTo(400,525)
context.lineTo(410,520)
context.stroke();
context.beginPath();
context.moveTo(335,525)
context.lineTo(325,520)
context.stroke();
context.beginPath();
context.moveTo(345,565)
context.lineTo(335,575)
context.stroke();
context.beginPath();
context.moveTo(390,565)
context.lineTo(400,575)
context.stroke();
context.beginPath();
context.arc(368,540,30,0,2 * Math.PI,false);
context.lineWidth=9;
context.strokeStyle='rgb(125,129,149)';
context.stroke();
//pipe on house
context.beginPath();
context.moveTo(515,360);
context.lineTo(590,355);
context.strokeStyle='rgb(79,107,137)';
context.lineCap='square'
context.lineWidth=20;
context.stroke();
context.beginPath();
context.moveTo(515,365);
context.lineTo(590,370);
context.lineWidth=20;
context.stroke();
context.beginPath();
context.moveTo(585,365);
context.lineTo(580,275);
context.lineWidth=20;
context.stroke();
context.beginPath();
context.moveTo(590,365);
context.lineTo(595,275);
context.lineWidth=20;
context.stroke();
context.beginPath();
context.moveTo(575,330);
context.lineTo(600,330);
context.lineWidth=3;
context.strokeStyle= 'rgb(57,60,74)';
context.stroke();
context.beginPath();
context.moveTo(560,350);
context.lineTo(560,375);
context.lineWidth=3;
context.strokeStyle= 'rgb(57,60,74)';
context.stroke();
//flowers
context.beginPath();
context.moveTo(500,600)
context.bezierCurveTo(425,550,500,525,520,600);
context.lineWidth=5;
context.strokeStyle='hotpink';
context.stroke();
context.beginPath();
context.moveTo(520,600)
context.bezierCurveTo(520,550,610,525,540,600);
context.lineWidth=5;
context.strokeStyle='hotpink';
context.stroke();
context.beginPath();
context.moveTo(450,600)
context.bezierCurveTo(420,575,475,575,475,600);
context.lineWidth=5;
context.strokeStyle='limegreen';
context.stroke();
context.beginPath();
context.moveTo(475,600)
context.bezierCurveTo(450,575,525,575,500,600);
context.lineWidth=5;
context.strokeStyle='limegreen';
context.stroke();
context.beginPath();
context.moveTo(550,600)
context.bezierCurveTo(520,575,575,575,575,600);
context.lineWidth=5;
context.strokeStyle='purple';
context.stroke();
context.beginPath();
context.moveTo(575,600)
context.bezierCurveTo(550,575,625,575,600,600);
context.lineWidth=5;
context.strokeStyle='purple';
context.stroke();
context.beginPath();
context.moveTo(250,600)
context.bezierCurveTo(175,550,250,525,270,600);
context.lineWidth=5;
context.strokeStyle='rgb(227,245,91)';
context.stroke();
context.beginPath();
context.moveTo(270,600)
context.bezierCurveTo(270,550,360,525,290,600);
context.lineWidth=5;
context.strokeStyle='rgb(227,245,91)';
context.stroke();
context.beginPath();
context.moveTo(220,600)
context.bezierCurveTo(190,575,245,575,245,600);
context.lineWidth=5;
context.strokeStyle='rgb(102,204,252)';
context.stroke();
context.beginPath();
context.moveTo(245,600)
context.bezierCurveTo(220,575,290,575,270,600);
context.lineWidth=5;
context.strokeStyle='rgb(102,204,252)';
context.stroke();
//bubbles
context.beginPath();
context.arc(575,225,25,0,2 * Math.PI,false);
context.lineWidth=2;
var grd=context.createLinearGradient(550,220,590,250);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(1,'rgb(42,155,241)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.arc(605,155,20,0,2 * Math.PI,false);
context.lineWidth=2;
var grd=context.createLinearGradient(585,150,620,180);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(1,'rgb(42,155,241)');
context.fillStyle=grd
context.fill();
context.stroke();
context.beginPath();
context.arc(575,100,15,0,2 * Math.PI,false);
context.lineWidth=2;
var grd=context.createLinearGradient(565,95,590,125);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(1,'rgb(42,155,241)');
context.fillStyle=grd
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment