#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

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

Blog #0

Image
My name is Kyle Jung and I am currently a Senior at the University of Tampa majoring in Marketing. I am from Washington D.C. and my hobbies are working out, reading, watching films, golf, hiking, and snowboarding. My accomplishments are that I had the opportunity to play college lacrosse and that I hiked Mount Kilimanjaro at the age of 13! My biggest fails are that I did not get accepted to my dream college which was Penn State.  My expectation for the class is that it will be very laborious. As a Senior who is anticipated to graduate in the Spring, I look forward to the class as I believe creating an online presence will open opportunities for me moving forward. In addition, I think FMX 210 will teach me skills that will benefit me after graduation. I think that I will learn a lot and will be a fun class. I look forward to this Spring Semester! 
Read more

Logo Tag Brush

Image
  Artist Statement:  The purpose of why I created this art piece is to show the audience who is Kyle Jung. The arrow in the artwork is to demonstrate that Kyle is a goal oriented person and the initials "KJ" is secretly hidden in the arrow similarly to how Fedex hides the arrow in their logo. The purpose of creating this aspect it to demonstrate that I do not like being the center of attention and prefer to focus on a goal in privately. What inspired me to creating this artwork is that life is more enjoyable when you have a set goal in mind whatever the case may be. I mention this aspect of goal orientation having a set plan of where you envision yourself being five to ten years down the road only makes the drive to getting up more exciting and rewarding when you reach a milestone.  The artwork is to demonstrate who I am as a person which is a goal oriented person that is driven. In addition, the artwork is designed to replicate the Korean flag symbolizing that I am Korean. T
Read more