#1 Canvas

Inspiration:
Sketch:

Canvas Project:

Hour Count: 12 

When I first started this project, I drew a couple of sketches only to realize that the sketches that I drew were simple everyday things that did not catch my interest. This led me to think about my childhood and growing up, I remember reading the Diary of a Wimpy Kid series written by Jeff Kidney and this was one of my favorite series that I enjoyed reading growing up. What inspired me to create the red outline around the character named Greg Heffley is in honor of the first book of the Diary of a Wimpy Kid series. 

In the first phase of my canvas, I started by creating a sketch of Greg Heffley. I created the sketch to ensure that I encapture all the small details that are on the character such as the small detail of putting socks on the character. As I was going through the process, I thought I had a good baseline until I had to create the backpack. Once I arrived at the backpack aspect, I tried to create circles for the character but I ran into the obstacle that the circle component did not close at the particular angle that I would have liked to. To overcome the obstacle, I utilized the swoosh quad curve and shaped the curve to the shape that I would have liked. I did this because when designing the character, the character's back is not perfectly straight but has a hunch. The swoosh quad curve was a tool that I utilized to compensate for the character's hunch. 

Overall, my canvas consists of bezier curves, lines, and triangles. I think the bezier curves serve as the most important component of my artwork because it was able to encapture all the small details that are on character. This was the most difficult and time-consuming part of the process in terms of aligning the coordinates and finding the right height for the curve. The lines serve as capturing the small details and the background of the canvas. The triangles serve as a crucial part of the background and act as the icing on the cake to the canvas. This project was a very challenging and time-consuming process for me and even though it is not the most visually appealing piece of artwork, it is a piece of artwork that I am proud of because of the amount of effort I put to display my appreciation for my favorite book series growing up. 


My Code: 

////Head

 

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 4;

        var radius = 65;

        var startangle = 0;

        var endangle = 1.7 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();


 //Right Eye

context.beginPath(1);

context.arc(460, 130, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(3,3,3,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();

context.beginPath();

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

    

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();


//Left Eye

 var centerX = canvas.width / 2;

        var centerY = canvas.height / 4.6;

        var radius = 3;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();


//Nose

//top arc

var centerX = 455;

        var centerY = 160

        var radius = 18.5;

        var startangle = 0.5* Math.PI;;

        var endangle =  1.5* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FFFFFF";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#000000";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 200;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();


//Top nose


context.moveTo(430,142); // COORDINATES OF STARTING POINT

context.lineTo(460,142); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Bottom nose


context.moveTo(430,177); // COORDINATES OF STARTING POINT

context.lineTo(460,177); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Mouth

 // starting point coordinates

var x = 435;

var y = 195;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 5;

var cpointY = canvas.height / 2 - 120;


// ending point coordinates

var x1 = 370;

var y1 = 195;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//hair

// starting point coordinates

var x = 310;

var y = 100;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 70;

var cpointY = canvas.height / 2 - 215;


// ending point coordinates

var x1 = 360;

var y1 = 100;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

 

//hair 2

// starting point coordinates

var x = 310;

var y = 70;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 70;

var cpointY = canvas.height / 2 - 235;


// ending point coordinates

var x1 = 360;

var y1 = 100;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//hair 3

// starting point coordinates

var x = 360;

var y = 50;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 60;

var cpointY = canvas.height / 2 - 220;


// ending point coordinates

var x1 = 360;

var y1 = 100;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//ear

////circle

 

  var centerX = canvas.width / 2.51;

        var centerY =   canvas.height / 3.7;

        var radius = 18;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();


//Arm

// starting point coordinates

var x = 270;

var y = 350;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 130;

var cpointY = canvas.height / 2 - 10;


// ending point coordinates

var x1 = 370;

var y1 = 210;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

 

//Arm 2

// starting point coordinates

var x = 310;

var y = 302;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 90;

var cpointY = canvas.height / 2 - 10;


// ending point coordinates

var x1 = 298;

var y1 = 350;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//sleeve

context.moveTo(323,300); // COORDINATES OF STARTING POINT

context.lineTo(286,300); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Sleeve

// starting point coordinates

var x = 320;

var y = 300;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 80;

var cpointY = canvas.height / 2 - 10;


// ending point coordinates

var x1 = 346;

var y1 = 250;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//Pinky

 

var x = 260;

var y = 370;

var controlX = 250;

var controlY = 390;

var x1 = 250;

var y1 = 395;

var controlX1 = 225;

var controlY1 = 350;

var x2 = 270;

var y2 = 350;



context.beginPath();

context.moveTo(x, y);

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

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

context.fillStyle = 'rgba(255,255,255,1.00)';

context.fill();


context.lineWidth = 5;

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

context.stroke();

//Finger 2

var x = 260;

var y = 370;

var controlX = 244;

var controlY = 390;

var x1 = 260;

var y1 = 405;

var controlX1 = 275;

var controlY1 = 410;

var x2 = 270;

var y2 = 390;





context.beginPath();

context.moveTo(x, y);

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

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

context.fillStyle = 'rgba(255,255,255,1.00)';

context.fill();


context.lineWidth = 5;

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

context.stroke();

//Finger 3

var x = 290;

var y = 370;

var controlX = 290;

var controlY = 400;

var x1 = 280;

var y1 = 405;

var controlX1 = 265;

var controlY1 = 410;

var x2 = 270;

var y2 = 370;



context.beginPath();

context.moveTo(x, y);

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

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

context.fillStyle = 'rgba(255,255,255,1.00)';

context.fill();


context.lineWidth = 5;

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

context.stroke();


//Thumb

var x = 298;

var y = 350;

var controlX = 315;

var controlY = 370;

var x1 = 300;

var y1 = 350;

var controlX1 = 340;

var controlY1 = 410;

var x2 = 290;

var y2 = 370;



context.beginPath();

context.moveTo(x, y);

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

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

context.fillStyle = 'rgba(255,255,255,1.00)';

context.fill();


context.lineWidth = 5;

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

context.stroke();



//Strap

// starting point coordinates

var x = 330;

var y = 280;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 20;

var cpointY = canvas.height / 2 - 20;


// ending point coordinates

var x1 = 338;

var y1 = 240;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//Strap Right

// starting point coordinates

var x = 325;

var y = 290;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 1;

var cpointY = canvas.height / 2 - 1;


// ending point coordinates

var x1 = 350;

var y1 = 230;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//Chest

// starting point coordinates

var x = 355;

var y = 380;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 40;

var cpointY = canvas.height / 2 - 10;


// ending point coordinates

var x1 = 400;

var y1 = 215;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//Bottom Shirt

context.moveTo(355,380); // COORDINATES OF STARTING POINT

context.lineTo(315,380); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Right leg pants


var x=322;

var y=380;

var width = 33

var height= 70;


context.beginPath();

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

context.lineWidth = 5;

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

context.strokeStyle = 'rgba(0,0,0,1.00)';

// add linear gradient

        var grd = context.createLinearGradient(x, y, x+width, y+height);

        // starting color

        grd.addColorStop(0, "rgba(0,0,0,1.00)");

        //intermediate color

        grd.addColorStop(0.5, "rgba(0,0,0,1.00)");

        // ending color

        grd.addColorStop(1, "rgb(0,0,0)");

        context.fillStyle = grd;

        context.fill();

context.fill();



context.stroke();

//Left leg pants


var x=293;

var y=390;

var width = 35

var height= 70;


context.beginPath();

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

context.lineWidth = 5;

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

context.strokeStyle = 'rgba(0,0,0,1.00)';

// add linear gradient

        var grd = context.createLinearGradient(x, y, x+width, y+height);

        // starting color

        grd.addColorStop(0, "rgba(0,0,0,1.00)");

        //intermediate color

        grd.addColorStop(0.5, "rgba(0,0,0,1.00)");

        // ending color

        grd.addColorStop(1, "rgb(0,0,0)");

        context.fillStyle = grd;

        context.fill();

context.fill();



context.stroke();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(290,370); // point A coordinates

context.lineTo(290, 400); // point B coords

context.lineTo(315,390); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(6,6,6,1.00)";

context.fill();

//Right leg right side

// starting point coordinates

var x = 365;

var y = 550;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 20;

var cpointY = canvas.height / 2 + 200;


// 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 = "rgba(0,0,0,1.00)";

context.stroke();

//Right leg left side 

// starting point coordinates

var x = 350;

var y = 550;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 35;

var cpointY = canvas.height / 2 + 200;


// ending point coordinates

var x1 = 335;

var y1 = 450;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//Left leg Right side 

// starting point coordinates

var x = 315;

var y = 570;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 60;

var cpointY = canvas.height / 2 + 200;


// ending point coordinates

var x1 = 310;

var y1 = 450;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//Left leg left side 

// starting point coordinates

var x = 300;

var y = 570;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 75;

var cpointY = canvas.height / 2 + 200;


// ending point coordinates

var x1 = 300;

var y1 = 450;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//Right sock

context.moveTo(353,530); // COORDINATES OF STARTING POINT

context.lineTo(367,530); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Left sock

context.moveTo(305,550); // COORDINATES OF STARTING POINT

context.lineTo(320,550); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Left Shoe

// starting point coordinates

var x = 370;

var y = 590;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 40;

var cpointY = canvas.height / 2 + 260;


// ending point coordinates

var x1 = 300;

var y1 = 570;

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//Left Shoe left side

// starting point coordinates

var x = 370;

var y = 590;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 120;

var cpointY = canvas.height / 2 + 310;


// ending point coordinates

var x1 = 300;

var y1 = 570;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//Right Shoe left side

// starting point coordinates

var x = 370;

var y = 550;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 70;

var cpointY = canvas.height / 2 + 240;


// ending point coordinates

var x1 = 330;

var y1 = 570;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//Right Shoe Right side

// starting point coordinates

var x = 370;

var y = 550;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 + 45;

var cpointY = canvas.height / 2 + 280;


// ending point coordinates

var x1 = 367;

var y1 = 585;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();


//Backpack

var x = 250;

var y = 230;

var controlX = 200;

var controlY = 380;

var x1 = 350;

var y1 = 220;

var controlX1 = 315;

var controlY1 = 180;

var x2 = 270;

var y2 = 200;



context.beginPath();

context.moveTo(x, y);

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

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

context.fillStyle = 'rgba(4,4,4,1.00)';

context.fill();


context.lineWidth = 5;

context.strokeStyle = "rgba(2,2,2,1.00)";

context.stroke();

//backpack bottom half 

var x = 240;

var y = 230;

var controlX = 200;

var controlY = 300;

var x1 = 270;

var y1 = 320;

var controlX1 = 380;

var controlY1 = 180;

var x2 = 255;

var y2 = 210;



context.beginPath();

context.moveTo(x, y);

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

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

context.fillStyle = 'rgba(4,4,4,1.00)';

context.fill();


context.lineWidth = 5;

context.strokeStyle = "rgba(2,2,2,1.00)";

context.stroke();

//Backpack


context.moveTo(240,230); // COORDINATES OF STARTING POINT

context.lineTo(260,205); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Backpack


context.moveTo(259,205); // COORDINATES OF STARTING POINT

context.lineTo(276,200); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE


// Background

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,500); // point A coordinates

context.lineTo(100, 600); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,500); // point A coordinates

context.lineTo(100, 500); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,400); // point A coordinates

context.lineTo(100, 500); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,300); // point A coordinates

context.lineTo(100, 400); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,200); // point A coordinates

context.lineTo(100, 300); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,100); // point A coordinates

context.lineTo(100, 200); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,0); // point A coordinates

context.lineTo(100, 0); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(0,0); // point A coordinates

context.lineTo(100, 100); // point B coords

context.lineTo(0,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(200,0); // point A coordinates

context.lineTo(50, 00); // point B coords

context.lineTo(130,30); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(300,0); // point A coordinates

context.lineTo(150, 00); // point B coords

context.lineTo(230,30); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(400,0); // point A coordinates

context.lineTo(250, 00); // point B coords

context.lineTo(330,30); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(500,0); // point A coordinates

context.lineTo(350, 00); // point B coords

context.lineTo(430,30); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(600,0); // point A coordinates

context.lineTo(450, 00); // point B coords

context.lineTo(530,30); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(700,0); // point A coordinates

context.lineTo(550, 00); // point B coords

context.lineTo(630,30); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,0); // point A coordinates

context.lineTo(650, 00); // point B coords

context.lineTo(730,30); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,0); // point A coordinates

context.lineTo(730, 0); // point B coords

context.lineTo(800,100); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,0); // point A coordinates

context.lineTo(750, 100); // point B coords

context.lineTo(800,100); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,100); // point A coordinates

context.lineTo(750, 100); // point B coords

context.lineTo(800,200); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,200); // point A coordinates

context.lineTo(750, 200); // point B coords

context.lineTo(800,100); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,200); // point A coordinates

context.lineTo(750, 200); // point B coords

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

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,300); // point A coordinates

context.lineTo(750, 300); // point B coords

context.lineTo(800,200); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,300); // point A coordinates

context.lineTo(750, 300); // point B coords

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

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,400); // point A coordinates

context.lineTo(750, 400); // point B coords

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

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,400); // point A coordinates

context.lineTo(750, 400); // point B coords

context.lineTo(800,500); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,500); // point A coordinates

context.lineTo(750, 500); // point B coords

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

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,500); // point A coordinates

context.lineTo(750, 500); // point B coords

context.lineTo(800,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(800,600); // point A coordinates

context.lineTo(720, 600); // point B coords

context.lineTo(800,500); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(177,9,9,1.00)";

context.fill();

//light blue line

    

var x= 98;

var y= 60;

var x1= 345

var y1= 60;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 363;

var y= 60;

var x1= 765

var y1= 60;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 480;

var y= 160;

var x1= 765

var y1= 160;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 387;

var y= 260;

var x1= 765

var y1= 260;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

   

//light blue line

    

var x= 365;

var y= 360;

var x1= 765

var y1= 360;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

   

//light blue line

    

var x= 365;

var y= 460;

var x1= 765

var y1= 460;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

   

//light blue line

    

var x= 405;

var y= 560;

var x1= 745

var y1= 560;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();


//light blue line

    

var x= 70;

var y= 560;

var x1= 295;

var y1= 560;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

   

//light blue line

    

var x= 75;

var y= 460;

var x1= 285;

var y1= 460;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 85;

var y= 360;

var x1= 235;

var y1= 360;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 90;

var y= 260;

var x1= 220;

var y1= 260;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 90;

var y= 160;

var x1= 293;

var y1= 160;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

context.strokeStyle = '#D8DCF2';

context.lineCap = 'round';

context.stroke();

 

Comments

  1. Sage BoutelleMay 1, 2022 at 5:21 PM

    This rendition is very faithful to the character. Splendid job. I especially like how you did the paper rips around the edge.

    ReplyDelete
  2. Ben BickerstaffMay 2, 2022 at 7:10 AM

    This was very well executed. You did a great job making it look just like the actual character.

    ReplyDelete
  3. gabby pelechatyMay 2, 2022 at 7:43 AM

    Hi Kyle,
    This project is supe impressive. I think overall this is the most sport on from the class. You literally would never be able to tell this was made using code. Props to you!

    ReplyDelete

Post a Comment

Popular posts from this blog

Final Project Blog

Image
Artist Statement:  I made this art piece because it consists of everything that I have created in the class Digital Media. In addition, I believe that this final project does a great job demonstrating who I am. What inspired me to make this art piece is consolidate all the projects that I have created throughout the semester into one consolidated artwork. It illustrates all of my memories and experiences that I had the opportunity experience until this point in time. I believe that people should care because I hope that this consolidation of projects inspires people to create a project to share their story. I believe people should care about this because I believe this artwork allows people to reflect on the things they have accomplished in the past.  This artwork of my final project represents my personality, characteristics, and story. My artwork demonstrates this because all the artworks within my final project has a symbol that I have a happy memory tied to or symbol that I believe
Read more

BW to Color

Image
  Artist Statement:            The reason why I made my art is because each portrait demonstrates the different emotions that I envision when I think of the corresponding colors. The first portrait colors represents my emotional feeling of accomplishment. The second portrait portrays my feeling of anger. The portrait represents when I am in a relaxed state of mind. What inspired me to choosing the colors I did is because I believe that they all represent different spectrums of feelings in correspondence to the atmosphere and my feelings based on the set circumstance.      I believe that the audience should care because the colors that I utilized in my portraits symbolize emotional feelings that can enlighten their mood. In addition, as people we tend to correspond colors with emotional feeling and I believe the colors that I chose encourages a positive mindset. I believe that my portraits enforce positivity because they are all bright colors which has been correlated to staying positiv
Read more