Canvas Experiment

Estimated Time : 10 hours

 

    The first image visible here is my final project, an abstract representation of Mickey Mouse. Each subsequent images are sketches of what I had planned before starting the project. You can see from comparing the sketches and the final, I chose to alter or remove certain elements. I am a big fan of Disney as well as abstract art and how it can capture elements of an object or person in ways traditional art may not be capable of. In this case, I wanted to capture the creativity and energy that Mickey embodies.

 

    Mickey, I believe, has a special way of entertaining his audience, and friends, in a very welcoming and energetic manner. Thinking also of his background, what he represents, and how he came to be, I find that he stands for creativity as well. Going into this project with these points, I was able to keep an open mind in planning and sketches. Towards the end of my time working on it, this mindset also allowed me to play around with the code and see how different edits affected shapes, negative space, colors, and designs. This openness to change and idea of creating "energy," in a sense, is what led to the abstract star to the bottom left of Mickey's head.

 

    One of my challenges came in the form of the vast number of open shapes. This made it difficult to fill in color in a way that stayed true to the ebb and flow of the character's shapes and outline. As is somewhat evident in the top left of Mickey's body, having an open shape created a hard line where the body's color ended and the background color came into play. To fix this, I played with a gradient that slowly disappeared as the color reached the top of the body as well as adding a looping shape to hint towards a continuation of the body and color which added a cleaner transition.

    I believe this piece is so successful thanks to a mix of the abstract representation of the character as a whole, the use of simple shapes, and the presence of the star to the left of the body. These elements all come together to create feeling, telling a story through emotions and action rather than concrete imagery. While a straightforward recreation of the commonly recognized Mickey character would have been an interesting composition, the abstraction elevates the piece to a more interesting, interactive composition.

 

    In the end, after everything was said and done, I had about 650 lines of code, including breaks and comments.

Code:

 

//BACKGROUND
var x= 0;
var y= 0;
var width = 550;
var height = 800;

        context.beginPath();
    
        context.rect(x, y, width, height);
    
        context.fillStyle = "rgba(222,222,222,1.00)";
    
        context.fill();
    
        context.lineWidth = 1;
    
        context.stroke();
    
//HEAD
var centerX = 250;
var centerY = 250;
var radius = 75;


context.beginPath();
    
        context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
    
        var gradient2 = context.createLinearGradient(198, 198, 309, 309);
    
        gradient2.addColorStop(0, 'rgba(0, 0, 0, 1.00)');
    
        gradient2.addColorStop(0.3, 'rgba(0, 0, 0, 1.00)');
    
        gradient2.addColorStop(0.8, 'rgba(255, 255, 255, 0.00)');
    
        gradient2.addColorStop(1, 'rgba(255,255,255,0.00)');
    
        context.fillStyle = gradient2;
    
        context.fill();
    
        context.lineWidth = 3.0;
    
        context.stroke();
        
        context.beginPath();
    
    
//SNOUT
context.moveTo(300,260);
    
        context.bezierCurveTo(419, 335, 366, 163, 305, 295);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 1.0;

        context.stroke();
    
    
//NOSE
var centerX = 385;
var centerY = 245;
var radius = 5;
var startangle = 0;
var endangle = 2 * Math.PI;

        context.beginPath();
    
        context.arc(centerX, centerY, radius, startangle, endangle, false);
    
        context.lineWidth = 1;
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.strokeStyle = "black";
    
        context.stroke();
    
context.beginPath();
    
        context.moveTo(380,235);
    
        context.bezierCurveTo(380, 190, 350, 210, 380,235);
    
        context.lineWidth = 1.0;
    
        context.fillStyle = "black";
    
        context.fill();

        context.stroke();

context.closePath();
    
    
//LEFT EAR
var centerX = 135;
var centerY = 250;
var radius = 40;
var startangle = 0;
var endangle = 2 * Math.PI;

        context.beginPath();
    
        context.arc(centerX, centerY, radius, startangle, endangle, false);
    
        context.lineWidth = 1;
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.strokeStyle = "black";
    
        context.stroke();
    
    
//RIGHT EAR
context.beginPath();
    
        context.arc(215, 120, 60, 1.4*Math.PI, 0.4*Math.PI, false);
    
        context.stroke();
    
        context.quadraticCurveTo(185, 185, 165, 145);
    
        context.stroke();
    
        context.quadraticCurveTo(150, 100, 190, 80);
        
        context.stroke();
    
        context.quadraticCurveTo(240, 65, 260, 110);
    
        context.stroke();
    
        context.quadraticCurveTo(265, 155, 225, 163);
    
        context.stroke();
    
        context.quadraticCurveTo(200, 165, 185, 140);
        
        context.stroke();
    
        context.quadraticCurveTo(175, 120, 190, 101);
    
        context.stroke();
    
        context.quadraticCurveTo(210, 85, 230, 100);
    
        context.stroke();
    
        context.quadraticCurveTo(245, 113, 245, 130);
        
        context.stroke();
    
        context.quadraticCurveTo(237, 153, 215, 145);
            
        context.stroke();
    
        context.quadraticCurveTo(200, 138, 200, 125);
    
        context.stroke();
    
        context.quadraticCurveTo(200, 111, 210, 110);
    
        context.stroke();
    
        context.quadraticCurveTo(227, 108, 232, 127);
    
        context.stroke();
    
        context.quadraticCurveTo(232, 140, 217, 133);
    
        context.stroke();
    
        context.quadraticCurveTo(208, 126, 217, 121);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 4.0;
    
        context.strokeStyle = "white";
    
        context.stroke();
    
context.closePath();
    
    
//RECTANGLE
context.beginPath();
    
        context.moveTo(225, 525);
    
        context.lineTo(190, 580);
    
        context.lineTo(235, 608);
    
        context.lineTo(275, 545);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 1.0;
    
        context.strokeStyle = "black";
    
        context.stroke();
    
    
//FILLER
context.beginPath();
    
        context.moveTo(260, 408)
    
        context.bezierCurveTo(181, 211, 173, 524, 300, 310);
    
        context.fillStyle = "rgba(241,220,183,1.00)";
    
        context.fill();
    
        context.lineWidth = 1.5;
    
        context.strokeStyle = "black";
    
        context.stroke();
    
context.closePath();

    
//BODY
context.beginPath();
    
        context.arc(275, 475, 70, 1.6*Math.PI, 0.6*Math.PI, true);
    
        context.strokeStyle = "black";
    
        context.stroke();
    
        context.quadraticCurveTo(320, 560, 360, 505);
    
        context.lineWidth = 3.0;
    
        context.strokeStyle = "black";
        
        context.stroke();
    
        context.quadraticCurveTo(405, 430, 355, 345);
    
        context.lineWidth = 3.0;
    
        context.strokeStyle = "black";
        
        context.stroke();
    
        context.quadraticCurveTo(330, 315, 300, 310);
    
        context.lineWidth = 3.0;
    
        context.strokeStyle = "black";
    
        context.stroke();
    
        var gradient1 = context.createLinearGradient(299, 311, 218, 558);
    
        gradient1.addColorStop(0, 'rgba(229,187,115,0)');
    
        gradient1.addColorStop(0.3, 'rgba(229,187,115,1.00)');
    
        gradient1.addColorStop(0.4, 'rgba(229,187,115,1.00)');
    
        //gradient.addColorStop(0.5, 'rgba(255,0,0,1.00)');
    
        gradient1.addColorStop(1, 'rgba(255,0,0,1.00)');
    
        context.fillStyle = gradient1;
    
        context.fill();
    
    
//TRIANGLE
context.beginPath();
 
        context.moveTo(335, 490);
    
        context.lineTo(345, 575);
    
        context.lineTo(420, 530);
    
        context.closePath();
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 3.0;
    
        context.lineCap = 'round';
    
        context.strokeStyle = "black";
    
        context.stroke();
    
    
//SWIPES
context.beginPath();
    
        context.moveTo(297, 653);
    
        context.quadraticCurveTo(377, 653, 390, 580);
    
        context.lineWidth = 3.0;
    
        context.strokeStyle = "rgba(0,0,0,1.0)";
    
        context.stroke();
    
    
context.beginPath();
    
        context.moveTo(278, 631);
    
        context.quadraticCurveTo(348, 642, 365, 590);
    
        context.lineWidth = 3.0;
    
        context.strokeStyle = "rgba(0,0,0,1.0)";
    
        context.stroke();
    
    
//LEFT EYE
context.beginPath();
    
        context.moveTo(228, 222);
    
        context.bezierCurveTo(240, 205, 280, 245, 265, 260);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 2.0;
    
        context.strokeStyle = "white";

        context.stroke();
    
context.beginPath();
    
        context.moveTo(265, 260);
    
        context.bezierCurveTo(253, 270, 220, 235, 228, 222);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 2.0;
    
        context.strokeStyle = "white";
    
        context.stroke();
    

//RIGHT EYE
context.beginPath();
    
        context.moveTo(280, 210);
    
        context.bezierCurveTo(292, 201, 310, 230, 300, 235);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 2.0;
    
        context.strokeStyle = "white";

        context.stroke();
    
context.beginPath();
    
        context.moveTo(300, 235);
    
        context.bezierCurveTo(290, 241, 273, 218, 280, 210);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 2.0;
    
        context.strokeStyle = "white";
    
        context.stroke();
    
    
//RIGHT BUTTON
context.beginPath();
    
        context.moveTo(375, 400);
    
        context.bezierCurveTo(406, 403, 395, 512, 365, 510);
    
        context.fillStyle = "rgba(251,198,51,1.00)";
    
        context.fill();
    
        context.lineWidth = 1.0;
        
        context.strokeStyle = "rgba(0,0,0,1.00)"
    
        context.stroke();
    
context.closePath();
    
context.beginPath();
    
        context.moveTo(365, 510);
    
        context.bezierCurveTo(337, 507, 345, 397, 375, 400);
    
        context.fillStyle = "rgba(251,198,51,1.00)";
    
        context.fill();
    
        context.lineWidth = 1.0;
    
        context.strokeStyle = "rgba(0,0,0,1.00)"
    
        context.stroke();
    
context.closePath();
    
    
//LEFT BUTTON
context.beginPath();
    
        context.moveTo(295, 450);
    
        context.bezierCurveTo(316, 451, 314, 510, 295, 510);
    
        context.fillStyle = "rgba(251,198,51,1.00)";
    
        context.fill();
    
        context.lineWidth = 1.0;
    
        context.stroke();
    
context.beginPath();
        
        context.moveTo(295, 510);
    
        context.bezierCurveTo(280, 510, 274, 453, 295, 450);
    
        context.fillStyle = "rgba(251,198,51,1.00)";
    
        context.fill();
    
        context.lineWidth = 1.0;
    
        context.stroke();
    
    
//LEFT SHOE
context.beginPath();
    
        context.moveTo(190, 580);
    
        context.bezierCurveTo(208, 558, 276, 602, 264, 637);
    
        context.fillStyle = "rgba(251,198,51,1.00)";
    
        context.fill();
    
        context.lineWidth = 1.0;
    
        context.strokeStyle = "rgba(251,198,51,1.00)";
    
        context.stroke();
    
    
context.beginPath();
    
        context.moveTo(264, 637);
    
        context.bezierCurveTo(249, 670, 167, 615, 190, 580);
    
        context.fillStyle = "rgba(251,198,51,1.00)";
    
        context.fill();
    
        context.lineWidth = 1.0;
    
        context.strokeStyle = "rgba(251,198,51,1.00)";
    
        context.stroke();

    
//SQUIGGLE
context.beginPath();
    
        context.moveTo(273, 327);
    
        context.quadraticCurveTo(222, 360, 312, 348);
    
        context.quadraticCurveTo(240, 378, 272, 408);
    
        context.quadraticCurveTo(254, 388, 275, 308);
    
        context.quadraticCurveTo(264, 398, 286, 395);
    
        context.fillStyle = "black";
    
        context.fill();
    
        context.lineWidth = 1.0;
    
        context.strokeStyle = "black";
    
        context.stroke();
    
context.closePath();
    
    
//FACE
context.beginPath();
    
        context.moveTo(213, 274);
    
        context.quadraticCurveTo(190, 171, 257, 205);
    
        context.quadraticCurveTo(261, 167, 298, 193);
    
        context.lineWidth = 3.0;
    
        context.strokeStyle = "white";
    
        context.stroke();
    
context.beginPath();
        
        context.moveTo(189, 295);
    
        context.quadraticCurveTo(181, 265, 213, 274);
    
        context.lineWidth = 3.0;
    
        context.strokeStyle = "white";
    
        context.stroke();
    
    
//TAIL
context.beginPath();
    
        context.moveTo(180, 480);
    
        context.lineTo(192, 520);
    
        context.lineCap = 'round';
    
        context.lineWidth = 6;
    
        context.strokeStyle = "black";
    
        context.stroke();
    
context.beginPath();
    
        context.moveTo(170, 494);
    
        context.lineTo(177, 517);
    
        context.lineCap = 'round';
    
        context.lineWidth = 6;
    
        context.stroke();
    
context.beginPath();
    
        context.moveTo(160, 507);
    
        context.lineTo(163, 516);
    
        context.lineCap = 'round';
    
        context.lineWidth = 6;
    
        context.stroke();
    
context.beginPath();
    
        context.moveTo(151, 515);
    
        context.lineTo(151, 516);
    
        context.lineCap = 'round';
    
        context.lineWidth = 6;
    
        context.stroke();
    
    
//LINES
context.beginPath();
        
        context.moveTo(190, 465);
    
        context.lineTo(40, 457);
    
        context. lineCap = 'round';
    
        context.lineWidth = 3.0;
    
        context.stroke();
    
context.beginPath();
    
        context.moveTo(199, 436);
    
        context.lineTo(61, 373);
    
        context.lineCap = 'round';
    
        context.lineWidth = 3.0;
    
        context.stroke();
    
context.beginPath();
    
        context.moveTo(216, 413);
    
        context.lineTo(116, 304);
    
        context.lineCap = 'round';
    
        context.lineWidth = 3.0;
    
        context.stroke();