Canvas Project

Final Composition 

In my Canvas Project, I wanted to create abstract minimalist art. That is why the image combines a series of shapes and curves in order to form a simple face. My work was inspired by my Pinterest page and how I wanted to connect my piece to an aspect of my life. My personal taste in art is abstract and minimalist images. Abstract art holds a complexity to it that I feel gives the artist the ability to express themselves in a way that lets so many different elements in art come together to form their final product. Whereas minimalistic images do the opposite, they use the least elements to give their message. While these styles can be very different, my goal was to combine them since they have had such an influence in my artwork throughout my life. 


I began by drawing the outline of the face with Bezier curves and quadratic curves. This was also used to make the lips for my face and the closed eye. Although these shapes may seem like common sense when making this kind of image there is a deeper meaning behind it. The curves serve as an outline for all the images inside of it. This simple line confines all the complexity into the face. The heart serving as the lips can be compared to love in the form of communication. I filled the face with multiple gradient shapes so I could try to create a contrast in the closest colors I could find to skin tones. I decided to make the hair in gradient circles because I felt that layering them could serve as an extension of the face, almost as if it was symbolizing the freedom from the outline I initially created. I choose blue for the hair color, even though it is not a common nor natural hair color. I did this because blue is known to symbolize freedom and is commonly associated with open spaces since it is dominate in the sky and sea. 

Although it is a simple face it holds a lot of complexity inside, that is why I contrasted it against a plain background while pulling a tone from the face into the background color. I wanted to add the dark blue lines to pull in a tone from the hair in order to connect the image all around. I felt that having the lines in the form of a circle surrounding the center just allowed the face to look like it is radiating energy.  I feel my piece is successful in its ability to combine shapes and colors to form an image that represents the complexity of a person through abstract and minimalist art forms.

-Approximately 10 hours to complete -

My Inspiration 




My Sketches 



CODE

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE


context2.beginPath();

context2.moveTo(canvas.width/3.5, canvas.height/3.5);

context2.lineTo(canvas.width*2/3, canvas.height*2/3);

///context2.rect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);

context2.strokeStyle = "#090546";

context2.lineWidth = 10;

context2.stroke();

context2.closePath();




for (var x=0; x<canvas.width; x+=10) {

context.save();

context.translate(canvas.width/2, canvas.height/2);

context.rotate(Math.PI*2*x/canvas.width);

//context.drawImage(canvas2,-canvas.width/2, -canvas.height/2);

// context.drawImage(canvas2,-canvas.width/4, -canvas.height/4);

context.drawImage(canvas2,0, 0);

context.restore();

}


//triagle 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 560;

var ty1 = 200;

var tx2 = 500;

var ty2 = 300;

var tx3 = 550;

var ty3 = 300;


var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;


context.beginPath();

context.strokeWidth = 5;

context.strokeStyle = 'rgba(97,49,11,1.00)';

context.stroke();


context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgba(136,126,58,1.00)');

grd.addColorStop(1, 'rgba(163,138,104,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//top arc

var centerX = 720;

        var centerY = 240

        var radius = 160;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#AC8729";

context.fill();

       context.lineWidth = 5;

        context.strokeStyle = "#A34222";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

       context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();


//circle  

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 460;

var centerY = 330;

var radius = 40;


var startX = 460;

var startY = 330;

var startRadius = 5;

var endX = 460;

var endY = 330;

var endRadius = 40;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(140,119,65,1.00)';

context.stroke();

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, 'rgba(94,73,38,1.00)');

grd.addColorStop(1, 'rgba(157,134,72,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Circle

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 650;

var centerY = 400;

var radius = 200;


var startX = 650;

var startY = 400;

var startRadius = 70;

var endX = 650;

var endY = 400;

var endRadius = 100;



context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(151,91,19,1.00)';

context.stroke();


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, 'rgba(196,158,108,1.00)');

grd.addColorStop(1, 'rgba(147,117,57,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();


//triagle 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 600;

var ty1 = 500;

var tx2 = 500;

var ty2 = 600;

var tx3 = 400;

var ty3 = 600;


var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;


context.beginPath();

context.strokeWidth = 5;

context.strokeStyle = 'rgba(193,159,159,1.00)';

context.stroke();


context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgba(136,126,58,1.00)');

grd.addColorStop(1, 'rgba(163,138,104,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//triagle 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 600;

var ty1 = 500;

var tx2 = 500;

var ty2 = 600;

var tx3 = 700;

var ty3 = 600;


var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;


context.beginPath();

context.strokeWidth = 5;

context.strokeStyle = 'rgba(113,61,15,1.00)';

context.stroke();


context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgba(197,153,65,1.00)');

grd.addColorStop(1, 'rgba(118,66,36,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//triagle 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 400;

var ty1 = 490;

var tx2 = 400;

var ty2 = 600;

var tx3 = 600;

var ty3 = 500;


var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;


context.beginPath();

context.strokeWidth = 5;

context.strokeStyle = 'rgba(113,61,15,1.00)';

context.stroke();


context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgba(197,153,65,1.00)');

grd.addColorStop(1, 'rgba(118,66,36,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//triagle 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 380;

var ty1 = 485;

var tx2 = 470;

var ty2 = 400;

var tx3 = 600;

var ty3 = 500;


var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;


context.beginPath();

context.strokeWidth = 5;

context.strokeStyle = 'rgba(146,105,69,1.00)';

context.stroke();


context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgba(101,77,31,1.00)');

grd.addColorStop(1, 'rgba(208,163,113,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//circle  

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 440;

var centerY = 380;

var radius = 40;


var startX = 440;

var startY = 380;

var startRadius = 5;

var endX = 440;

var endY = 380;

var endRadius = 40;


context.beginPath();

context.lineWidth = 3;

context.strokeStyle = 'rgba(206,182,123,1.00)';

context.stroke();

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, 'rgba(39,25,1,1.00)');

grd.addColorStop(1, 'rgba(126,105,49,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();


//forhead -------------------------------------

 

// bezier starting point coordinates

var x = 400;

var y = 300;


// control point 1 coordinates ( magnet )

var cpointX1 = 600;

var cpointY1 = 300;


// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 300; 


// ending point coordinates 

var x1 = 800;

var y1 = 100;



context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);


context.lineWidth = 20;

context.strokeStyle = "rgba(193,129,12,1.00)";

context.lineCap = 'round' 

context.stroke();


//Nose 

//top arc

var centerX = 400;

        var centerY = 350

        var radius = 50;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#95864B";

context.fill();

       context.lineWidth = 20;

        context.strokeStyle = "#AA7E0C";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

       context.lineWidth = 70;

        context.strokeStyle = "black";

        context.stroke();

//Nose 

//top arc

var centerX = 400;

        var centerY = 350

        var radius = 40;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#95864B";

context.fill();

       context.lineWidth = 5;

        context.strokeStyle = "#AA7E0C";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

       context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

// bezier starting point coordinates

var x = 350;

var y = 350;


// control point 1 coordinates ( magnet )

var cpointX1 = 350;

var cpointY1 = 400;


// control point 2 coordinates ( magnet )

var cpointX2 = 500;

var cpointY2 = 400; 


// ending point coordinates 

var x1 = 400;

var y1 = 450;



context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);


context.lineWidth = 20;

context.strokeStyle = "rgba(126,99,48,1.00)";

context.lineCap = 'round' 

context.stroke();

 

//arc chin

 

 // starting point coordinates

var x = 380;

var y = 500;


// control point coordinates ( magnet )

var cpointX = 450;

var cpointY = 600;


// ending point coordinates

var x1 = 300;

var y1 = 700;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 20;

context.strokeStyle = "rgba(139,103,9,1.00)";

context.stroke();

 

//Heart


//Bezier Curve Variables




var Ax = 400;

var Ay = 490;

var Bx = 425;

var By = 520;

var control1x = 300;

var control1y = 400;

var control2x = 305;

var control2y = 505;

var control3x = 315;

var control3y = 270;

var control4x = 405;

var control4y = 600;


        context.beginPath();

        context.moveTo(Ax, Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

        context.lineWidth = 10;

        // line color

        context.strokeStyle = 'rgba(140,29,29,1.00)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgba(115,42,11,1.00)';

        context.fill();

 

//Eye lid 

//top arc

var centerX = 640;

        var centerY = 280

        var radius = 70;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#EAD1AC";

context.fill();

       context.lineWidth = 3;

        context.strokeStyle = "#E6D099";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.5;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

       context.lineWidth = 50;

        context.strokeStyle = "#020202";

        context.stroke();

//eye

// starting point coordinates

var x = 570;

var y = 250;


// control point coordinates ( magnet )

var cpointX = 550;

var cpointY = 320;


// ending point coordinates

var x1 = 700;

var y1 = 280;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 10;

context.strokeStyle = "rgba(87,48,0,1.00)";

context.stroke();

 

//Hair ----------------------------------------

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 700;

var centerY = 130;

var radius = 50;


var startX = 700;

var startY = 130;

var startRadius = 10;

var endX = 700;

var endY = 130;

var endRadius = 50;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

 //Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 650;

var centerY = 130;

var radius = 20;


var startX = 650;

var startY = 130;

var startRadius = 5;

var endX = 650;

var endY = 130;

var endRadius = 20;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 660;

var centerY = 100;

var radius = 15;


var startX = 660;

var startY = 100;

var startRadius = 5;

var endX = 660;

var endY = 100;

var endRadius = 15;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 660;

var centerY = 100;

var radius = 15;


var startX = 660;

var startY = 100;

var startRadius = 5;

var endX = 660;

var endY = 100;

var endRadius = 15;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 640;

var centerY = 110;

var radius = 15;


var startX = 640;

var startY = 110;

var startRadius = 5;

var endX = 640;

var endY = 110;

var endRadius = 15;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//hair

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 750;

var centerY = 140;

var radius = 40;


var startX = 750;

var startY = 140;

var startRadius = 10;

var endX = 750;

var endY = 140;

var endRadius = 40;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();


//hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 800;

var centerY = 200;

var radius = 70;


var startX = 800;

var startY = 200;

var startRadius = 20;

var endX = 800;

var endY = 200;

var endRadius = 70;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//hair

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 800;

var centerY = 330;

var radius = 70;


var startX = 800;

var startY = 330;

var startRadius = 10;

var endX = 800;

var endY = 330;

var endRadius = 70;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 750;

var centerY = 260;

var radius = 15;


var startX = 750;

var startY = 260;

var startRadius = 5;

var endX = 750;

var endY = 260;

var endRadius = 15;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 //Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 750;

var centerY = 600;

var radius = 90;


var startX = 750;

var startY = 600;

var startRadius = 30;

var endX = 750;

var endY = 600;

var endRadius = 90;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(107,107,123,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 750;

var centerY = 400;

var radius = 40;


var startX = 750;

var startY = 400;

var startRadius = 20;

var endX = 750;

var endY = 400;

var endRadius = 40;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 760;

var centerY = 500;

var radius = 70;


var startX = 760;

var startY = 500;

var startRadius = 20;

var endX = 760;

var endY = 500;

var endRadius = 70;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 760;

var centerY = 50;

var radius = 70;


var startX = 760;

var startY = 50;

var startRadius = 20;

var endX = 760;

var endY = 50;

var endRadius = 70;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Hair 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


var centerX = 700;

var centerY = 70;

var radius = 40;


var startX = 700;

var startY = 70;

var startRadius = 20;

var endX = 700;

var endY = 70;

var endRadius = 40;


context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(186,186,217,1.00)';

context.stroke();

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, 'rgba(2,22,79,1.00)');

grd.addColorStop(1, 'rgba(137,235,235,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//context.lineCap = Lines can have one of three cap styles: butt, round, or square

// lineCap property must be set before calling stroke()

 


// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////


// CREDITS


context.save();

var credits = "Name, Title, FMX XYZ, FA/SP YEAR";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.restore();


//////////////////////////////////////////////////////////////////

// HTML DISPLAY FIELD FOR TESTING PURPOSES


display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);


/////////////////////////////////////////////////////////////////

// LAST LINE CREATES THE ANIMATION


requestAnimFrame(draw); // CALLS draw() every nth of a second


}


</script>


</body>

</html>






 


 


 











Comments

  1. Kyle JungMay 2, 2022 at 7:54 AM

    I like how you incorporated all the different shapes we used in class to create a marvelous project!

    ReplyDelete

Post a Comment

Popular posts from this blog

Final Portfolio

Image
Final Portfolio Artist statement  To end the semester, my FMX 210 class submitted a final portfolio. After putting this together I like the consistency my work has throughout all of my projects really stood out. My art maintained a minimalistic abstract style, which was my goal when creating it. I was also able to use symbolism in each of my pieces rather that be represented through a wave, the sun, colors, or style choice all of it had meaning when I was making my pieces. That is why when making my art, I wanted it to hold meaning to me so when I put my portfolio together, I could see the connection everything had to each other. One of my favorite parts of making my art work was picking the colors especially when we made our logos. I love the symbolism certain colors have and when making my art work colorful, keeping the a conscious effort to pick colors that emphasize the message I am trying to have my work send really allows me to appreciate what I make more.  In FMX 210, the class
Read more
  The Connection FMX 210- Digital Media Caroline Nordheim The internet and the World Wide Web are something humans have access to everyday and normally don’t question where it comes from or if there is even a difference. In reality there is a surprising difference between these two platforms and came around during two different time periods. However although different these websites work together since the World Wide Web was able to come into reality from the internet being created  The Internet was created by Bob Kahn and Vint Cerf in the 1950s. According to britannica.com , the internet is defined as “a system architecture that has revolutionized communications and methods of commerce by allowing various computer networks around the world to interconnect.” The internet came around during what is known as The Cold War, when tensions were high between North America and the Soviet Union. The desire for a communication system in order to be prepared for attacks became more and more appea
Read more

BW to Color

Image
  Monochromatic   Split Complementary  complementary   My image   When creating my black and white to color assignment, I started by selecting different areas of the background that I wanted to color. I than proceed to do this with all parts of the image. After selecting the areas, I made a layer mask, which allows me to color the specic areas that I selected. I chose to make copies of each of these layers with the masks I made in order to allow myself to edit each of them based on the set of color rules I chose.  I choose to do monochromatic, split complementary and complementary color rules for my coloring. My favorite color is blue and begie thats why when I found that some of the color coordianted with each other I wanted to use those specific pairs. I did my best to pick the colors I also found the most asthetically appealing. 
Read more