Blog Posts: September 2019

The purpose of my work was to show diversity of skill and shape within my design. I chose a sunset so that it would give me a variety of ways to showcase my skills whilst building the landscape. When choosing my design, I was heavily influenced by nature. I feel the most natural shapes and forms are found in nature. It was a logical choice for me to incorporate the most shape and skill.
I tried my best to take the image of sunset and recreate it with flatter shapes. To do this, I had to study the way the sun peaks out from the land and the rays cascade into the gradient sky. I used Bézier curves to imitate the rays and a quadratic curve to create the sun peaking o ut from the landscape. Grass and a bed of flowers lie at the bottom to build in the landscape even more. The flower petals took much manipulation to get them to be the correct composition. The birds acted as another chance to use quadratic curves.

Final Code

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=0;
var y=0;
var width = 900
var height= 600;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(255,0,0)';
// add linear gradient
var grd = context.createLinearGradient(200.000, 0.000, 200.000, 600.000);
// starting color
grd.addColorStop(0, "rgb(255, 255, 0");
//intermediate color
grd.addColorStop(0.5, "rgb(255, 102, 0)");
// ending color
grd.addColorStop(1, "rgb(255, 0, 0)");
context.fillStyle = grd;
context.fill();
context.fill();

//repeat yelow lines top left

var x = 800;
var y = 600;

////Repeat loops example

for (var i=200; i<canvas.height; i+=25) {

context.beginPath();

context.lineWidth = i/300;

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

context.moveTo(400, 500);

context.lineTo(canvas.width, i);

context.stroke();

}

for (var i=0; i<canvas.height; i+=10) {
var startX = 3;
var startY = 800;
// starting point coordinates
var endX = 1000;
var endY = i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 275;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(255, 255, 102)";
context.stroke();
}

/////// BEZIER CURVE 2 middle
for (var i=0; i<canvas.height; i+=10) {
var startX = 50;
var startY = +800;
// starting point coordinates
var endX = i;
var endY = -1000;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 175;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb(255, 255, 102)";
context.stroke();
}

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

// starting point coordinates
var x = 0;
var y = 600;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 50;
var cpointY = canvas.height / 1.5 - 300;

// ending point coordinates
var x1 = 800;
var y1 = 600;

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

context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 255, 102)';
context.stroke();
context.fillStyle = 'rgb(255, 255, 102)';
context.fill();

var x=50;
var y=100;
var width = 300
var height= 250;

context.stroke();

//stem
// for a square width = height , the width and the height have the same value

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.rect(285, 450, 10, 450);
ctx.fillStyle = "green";
ctx.fill();

//petal 1
var Ax = 300;
var Ay = 450;
var Bx = 300;
var By = 450;
var control1x = 250;
var control1y = 400;
var control2x = 250;
var control2y = 475;

context.beginPath();
context.moveTo(Ax,Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(255, 0, 0)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();

//petal 2
var Ax = 300;
var Ay = 450;
var Bx = 300;
var By = 450;
var control1x = 350;
var control1y = 400;
var control2x = 350;
var control2y = 475;

context.beginPath();
context.moveTo(Ax,Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(227, 148, 169)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(227, 148, 169)';
context.fill();

//petal 3
var Ax = 300;
var Ay = 450;
var Bx = 300;
var By = 450;
var control1x = 275;
var control1y = 400;
var control2x = 350;
var control2y = 400;

context.beginPath();
context.moveTo(Ax,Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(177, 126, 224)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(177, 126, 224)';
context.fill();

//petal 4
var Ax = 300;
var Ay = 450;
var Bx = 300;
var By = 450;
var control1x = 275;
var control1y = 500;
var control2x = 350;
var control2y = 500;

context.beginPath();
context.moveTo(Ax,Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(2, 137, 209)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(2, 137, 209)';
context.fill();

//petal 5
var Ax = 300;
var Ay = 450;
var Bx = 300;
var By = 450;
var control1x = 215;
var control1y = 475;
var control2x = 290;
var control2y = 500;

context.beginPath();
context.moveTo(Ax,Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(255, 145, 0)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 145, 0)';
context.fill();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.rect(0, 550, 900, 460);
ctx.fillStyle = "green";
ctx.fill();

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

// control point coordinates ( magnet )
var cpointX = canvas.width / 3 - 50;
var cpointY = canvas.height / 3 - 15;

// ending point coordinates
var x1 = 250;
var y1 = 225;

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

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

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

// control point coordinates ( magnet )
var cpointX = canvas.width / 2.5 - 50;
var cpointY = canvas.height / 3 - 15;

// ending point coordinates
var x1 = 250;
var y1 = 225;

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

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

// bird 2
// starting point coordinates
var x = 600;
var y = 50;

// control point coordinates ( magnet )
var cpointX = canvas.width / 1.2 - 10;
var cpointY = canvas.height / 10 - 15;

// ending point coordinates
var x1 = 650;
var y1 = 75;

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

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

// starting point coordinates
var x = 700;
var y = 50;

// control point coordinates ( magnet )
var cpointX = canvas.width / 1.2 - 10;
var cpointY = canvas.height / 10 - 15;

// ending point coordinates
var x1 = 650;
var y1 = 75;

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

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

context.stroke();

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

};

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

Blog Posts

Tuesday, September 17, 2019

My Canvas Experiment