Tuesday, February 11, 2020


Inspiration:


Final Product:





My Project Code


////// Background 
for (var yay=-1500; yay<canvas.height; yay+=7) {

var startX = 1000;
var startY = yay-2000;
var endX = canvas.width;
var endY = canvas.height;
var cpointX = yay+200;
var cpointY = -yay;
context.beginPath();
context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
//context.closePath();
context.strokeStyle = "rgb(255,255,120)";
context.fillStyle = "rgb(255,255,150)";
context.fill();
context.lineWidth = 2;
context.stroke();

}

/////// BEZIER CURVE 1 on right side
for (var i=1; i<canvas.height; i+=10) {
var startX =-200;     
var startY = i;
// starting point coordinates
var endX = 800;   
var endY = i;
var cpoint1X = 650;
var cpoint1Y = 200; 
var cpoint2X = i;
var cpoint2Y = 400;
context.beginPath();
context.moveTo(startX, startY);  ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(255,200,255)";
context.stroke();
}

/////// BEZIER CURVE 2 middle
for (var i=0; i<canvas.height; i+=10) {
var startX = -3000;     
var startY = 900;
// starting point coordinates
var endX = i;   
var endY = -2000;
var cpoint1X = 800;
var cpoint1Y = 1600; 
var cpoint2X = 150;
var cpoint2Y = 800;
context.beginPath();
context.moveTo(startX, startY);  ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(100,210,255)";
context.stroke();
}

/////// BEZIER CURVE 3 left side
for (var i=0; i<canvas.height; i+=10) {
var startX = -500;     
var startY = 1;
// starting point coordinates
var endX = -500;   
var endY = 200;
var cpoint1X = 900;
var cpoint1Y = -200; 
var cpoint2X = 2000;
var cpoint2Y = i;
context.beginPath();
context.moveTo(startX, startY);  ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(0,255,255)";
context.stroke();
}



////bezeir curve 4 left side
for (var i=0; i<canvas.height; i+=10) {
var startX = -250;     
var startY = 800;
// starting point coordinates
var endX = -500;   
var endY = 200;
var cpoint1X = 450;
var cpoint1Y = 2000; 
var cpoint2X = 1000;
var cpoint2Y = i;
context.beginPath();
context.moveTo(startX, startY);  ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = .5;
context.strokeStyle = "rgb(64,224,208)";
context.stroke();
}

/////// BEZIER CURVE 5 in middle
for (var i=1; i<canvas.height; i+=10) {
var startX =400;     
var startY = i;
// starting point coordinates
var endX = 400;   
var endY = i;
var cpoint1X = 850;
var cpoint1Y = 400; 
var cpoint2X = i;
var cpoint2Y = 200;
context.beginPath();
context.moveTo(startX, startY);  ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(64,224,208)";
context.stroke();
}
/////// BEZIER CURVE 6 in middle
for (var i=1; i<canvas.height; i+=10) {
var startX =i;     
var startY = 400;
// starting point coordinates
var endX = i;   
var endY = 400;
var cpoint1X = 1200;
var cpoint1Y = 100; 
var cpoint2X = i;
var cpoint2Y = 100;
context.beginPath();
context.moveTo(startX, startY);  ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();
}
///triangle gradient
context.beginPath(); // begin a shape

context.moveTo(-10,615); // point A coordinates

context.lineTo(1050, 800); // point B coords

context.lineTo(400,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 15; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(53,153,255,190)"; // Reb Green Blue Alpha

context.stroke();

var trianglegrade = context.createLinearGradient(400,300,400,600);
trianglegrade.addColorStop(0, 'rgb(51,153,255)');
trianglegrade.addColorStop(.5,'rgb(51,200,200)');
trianglegrade.addColorStop(1,'rgb(51,255,255)');
context.fillStyle = trianglegrade; ///"rgba(205,255,255,1)";

context.fill();





///tree trunk

// starting point coordinates
var x = 370;
var y = 200;

// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 525;
var cpointY = canvas.height / 1 - 225;

// ending point coordinates
var x1 = 350;
var y1 = 450;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;
context.strokeStyle = "rgb(153,76,0)";
context.stroke();

 var x = 285;
var y = 200;

// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 580;
var cpointY = canvas.height / 1 - 200;

// ending point coordinates
var x1 = 400;
var y1 = 450;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;
context.strokeStyle = "rgb(153,76,0)";
context.stroke();

///tree trunk base
var x = 417;
var y = 490;
var controlX = 375;
var controlY = 350;
var x1 = 275;
var y1 = 350;
var controlX1 = 300;
var controlY1 = 450;
var x2 = 370;
var y2 = 487;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(153, 76, 0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(153,76,0)";
context.stroke();

///tree trunk
var x = 275;
var y = 200;
var controlX = 235;
var controlY = 365;
var x1 = 350;
var y1 = 400;
var controlX1 = 310;
var controlY1 = 265;
var x2 = 380;
var y2 = 200;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(153, 76, 0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(153,76,0)";
context.stroke();


////tree leaves one
var x = 100;
var y = 200;
var controlX = 360;
var controlY = 40;
var x1 = 685;
var y1 = 150;
var controlX1 = 500;
var controlY1 = 215;
var x2 = 100;
var y2 = 200;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(0, 128, 255)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,255,50)";
context.stroke();

////tree leaves two
var x = 150;
var y = 100;
var controlX = 385;
var controlY = 40;
var x1 = 685;
var y1 = 150;
var controlX1 = 400;
var controlY1 = 215;
var x2 = 150;
var y2 = 100;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(51, 153, 255)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,255,80)";
context.stroke();

////tree leaves three
var x = 300;
var y = 50;
var controlX = 750;
var controlY = 100;
var x1 = 685;
var y1 = 150;
var controlX1 = 400;
var controlY1 = 175;
var x2 = 300;
var y2 = 50;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(102, 178, 255)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,255,102)";
context.stroke();

////tree leaves four
var x = 450;
var y = 25;
var controlX = 750;
var controlY = 100;
var x1 = 685;
var y1 = 150;
var controlX1 = 485;
var controlY1 = 125;
var x2 = 450;
var y2 = 25;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(153, 204, 255)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,255,35)";
context.stroke();

///rock 1
var centerX = 365;
var centerY = 485;
var radius = 35;

var startX = 300;
var startY = 200;
var startRadius = 200;
var endX = 400;
var endY = 300;
var endRadius = 200;



context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(0, 250, 255)');
grd.addColorStop(1, 'rgb(192,192,192)');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(128,128,128)'
context.stroke();

///rock 2
var centerX = 435;
var centerY = 480;
var radius = 35;

var startX = 300;
var startY = 200;
var startRadius = 200;
var endX = 400;
var endY = 300;
var endRadius = 200;



context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(0, 250, 255)');
grd.addColorStop(1, 'rgb(192,192,192)');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(128,128,128)'
context.stroke();

///rock 3
var centerX = 400;
var centerY = 500;
var radius = 35;

var startX = 300;
var startY = 200;
var startRadius = 200;
var endX = 400;
var endY = 300;
var endRadius = 200;



context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(0, 250, 255)');
grd.addColorStop(1, 'rgb(192,192,192)');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(128,128,128)'
context.stroke();
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)