The Prospective- Leah Edition: Canvas Project

"On Your Journey"

Concept Statment:

“On Your Journey” is a piece inspired by cubism. The idea of the piece is to be “simplistic” yet meaningful and complex. “On Your Journey” represent one’s feelings as they journey through the struggles, good times, and depths of life. There is a representation of both smooth and appealing lines and curved “jumbled” lines as they symbolize the easy and the chaotic areas of one’s life. All of the lines are representative of the different paths one will take during their life.

Inspiration: "Rhythm” by Sonia Delaunay

Planning:

Artist Statment:

“On Your Journey” was created using a combination of rectangles, circles, circle fragments, quadratic curves, and bezier curves. The inspiration for the piece came from a sample of cubism art called “Rhythm” by Sonia Delaunay. “Rhythm” is simplistic yet complex and that was my take away from the piece. I wanted to create something that was impactful in the simplest way. “On Your Journey” took me over five hours to complete. Surprising the most difficult part was the circles, as my original design consisted of mainly circle fragments, I faced challenges of still having my background show through or having different components be seen or be hidden using circle fragments. Another unexpected challenge was the quadratic curves, I had originally planned for them to be very rounded, very similar to circle fragments but I had difficulty achieving that, that is when I had the new idea of the quadratic curves crossing paths. The quadratic curves crossing paths represent life as it contains many obstacles and challenges causing people to at times to feel like that are in a ball of chaos. I am very pleased with the way that this piece turned out. I personally enjoy more “simpler” yet extremely powerful art. If it were up to me, I would have this painted and hung in my room. In addition to that, I love the style and emphasis that a paintbrush has on a canvas, I am glad that I got to somewhat recreate that effect through using curves/ “the swoosh” to emulate that weight that of a brushstroke might have. I choose to use cool earth tone colors as I personally find them very appealing and the colors help capture what I was trying to symbolize in the piece. The colors I choose are” dull” earthy tones, I choose them as they are to represent the reality of life since life is not all about the vibrancy of “glitz and glamour” but can be full of hardships and struggles and to overcome one must work hard and persevere.

Hours Worked: 5

Full Code:

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start here

////// Bezier Curve background

for (var yay=-1800; yay<canvas.height; yay+=8) {

var startX = 1500;

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(131,103,133)";

context.fillStyle = "rgb(227,197,89)";

context.fill();

context.lineWidth = 2;

context.stroke();

}

//rectangle left 1

var x=25;

var y=240;

var width = 275

var height= 200;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(42,123,181)';

// add linear gradient

context.fill();

context.stroke();

var rectWidth = 150

var rectHeight = 75

////rectangle left 2

var x1=112.5;

var y1=365;

var width = 187.5

var height= 60;

context.beginPath();

context.rect(x1, y1, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(42,123,181)';

// add linear gradient

context.fill();

context.stroke();

var rectWidth = 150

var rectHeight = 75

//rectangle left 3

var x=175;

var y=380;

var width = 100

var height= 30;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(42,123,181)';

// add linear gradient

context.fill();

context.stroke();

var rectWidth = 150

var rectHeight = 75

//rectangle right 1

var x=490;

var y=260;

var width = 210

var height= 220;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(145, 117,99)';

// add linear gradient

context.fill();

context.stroke();

var rectWidth = 150

var rectHeight = 75

//rectangle right 2

var x=510;

var y=300;

var width = 170

var height= 160;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(145, 117,99)';

// add linear gradient

context.fill();

context.stroke();

var rectWidth = 150

var rectHeight = 75

//rectangle right 3

var x=550;

var y=340;

var width = 100

var height= 60;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(145, 117,99)';

// add linear gradient

context.fill();

context.stroke();

var rectWidth = 150

var rectHeight = 75

//circle top 1

var centerX = 275;

var centerY = 180;

var radius = 160;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.lineWidth = 15;

context.fillStyle = 'rgb(109,135,128)';

context.fill();

//circle frag top 2

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 275;

var centerY = 180;

var radius = 125;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 12;

context.strokeStyle = 'rgb(99,126,145)';

context.stroke();

context.beginPath();

context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);

context.stroke();

//circle frag top 3

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 275;

var centerY = 180;

var radius = 68;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 23;

context.strokeStyle = 'rgb(217,186,50)';

context.stroke();

context.beginPath();

context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);

context.stroke();

//circle bottom 1

var centerX = 500;

var centerY = 420;

var radius = 125;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.lineWidth = 15;

context.fillStyle = 'rgb(176,124,91)';

context.fill();

//circle bottom 2

var centerX = 500;

var centerY = 420;

var radius = 100;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.lineWidth = 15;

context.fillStyle = 'rgb(27,144,150)';

context.fill();

//circle bottom 3

var centerX = 500;

var centerY = 420;

var radius = 50;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.lineWidth = 5;

context.strokeStyle = 'rgb(199,109,0)';

context.stroke();

//middle circle 1

var centerX = 400;

var centerY = 320;

var radius = 154;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.lineWidth = 15;

context.fillStyle = 'rgb(99,63,41)';

context.fill();

//quad line 1

// starting point coordinates

var x = 498;

var y = 202;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 770;

var cpointY = canvas.height / 1 - 230;

// ending point coordinates

var x1 = 462;

var y1 = 458;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 13;

context.strokeStyle = "rgb(110, 110, 110)";

context.stroke();

//swoosh back 1

var x = 271;

var y = 400;

var controlX = 500;

var controlY = 400;

var x1 = 535;

var y1 = 250;

var controlX1 = 450;

var controlY1 = 400;

var x2 = 249;

var y2 = 350;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(167,204,194,.75)';

context.fill();

///quad line 2

// starting point coordinates

var x = 314;

var y = 194;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 200;

var cpointY = canvas.height / 1 - 230;

// ending point coordinates

var x1 = 314;

var y1 = 448;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 4;

context.strokeStyle = "rgb(145,99,99)";

context.stroke();

///quad line 3

// starting point coordinates

var x = 546;

var y = 275;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 752;

var cpointY = canvas.height / 1 - 425;

// ending point coordinates

var x1 = 514;

var y1 = 422;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 7;

context.strokeStyle = "rgb(168,157,50)";

context.stroke();

//swoosh back 2

var x = 310;

var y = 400;

var controlX = 150;

var controlY = 400;

var x1 = 450;

var y1 = 172;

var controlX1 = 200;

var controlY1 = 420;

var x2 = 320;

var y2 = 400;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(156,56,151,.5)';

context.fill();

///quad line 4

// starting point coordinates

var x = 253;

var y = 275;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 45;

var cpointY = canvas.height / 1 - 270;

// ending point coordinates

var x1 = 260;

var y1 = 381;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 9;

context.strokeStyle = "rgb(131,117,99)";

context.stroke();

//walk text

var canvas = "walk";

context.beginPath();

context.font = 'bold 20px Gerogia';

context.fillStyle = "rgba(255,255,255,1)";

context.shadowColor = "rgba(110,25,25,1)";

context.shadowBlur = 15;

context.shadowOffsetX = 15;

context.shadowOffsetY = 10;

context.fill();

context.fillText(canvas, 125, 362);

context.closePath();

//by text

var canvas = "by";

context.beginPath();

context.font = 'bold 20px Gerogia';

context.fillStyle = "rgba(255,255,255,1)";

context.fillText(canvas, 365, 427);

context.closePath();

//faith text

var canvas = "faith";

context.beginPath();

context.font = 'bold 20px Gerogia';

context.fillStyle = "rgba(255,255,255,1)";

context.fillText(canvas, 624, 457);

context.closePath();

//credits

var canvas = "Leah Cordier, FMX 210, Spring 2019";

context.beginPath();

context.font = '10px Arial';

context.fillStyle = "rgba(0,0,0,1)";

context.fillText(canvas, 10, 597);

context.closePath();

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

};

</script>

</head>

<body>

</body>

</html>

The Prospective- Leah Edition

Monday, February 10, 2020

Canvas Project

"On Your Journey"

No comments:

Post a Comment