Canvas Project

 

    My project was a rendition of Pablo Picasso’s “The Guitarist”.  This canvas project was created using the processing system Dreamweaver. Within Dreamweaver, I used HTML Canvas code in order to make my project. The inspiration photo of the project is at the end of this post. I love the painting, “the Guitarist” and wanted to be able to include it as an inspiration somewhere in my digital media course projects. Instead of completely following Pablo Picasso’s original painting, I went more of the cubism route. Again, my love for Pablo Picasso’s paintings influenced this decision, as well as; I really wanted to be able to play around with the shapes that I learned in class. These shapes included: circles, squares, rectangles, triangles, lines, and curves. I worked on this for a few hours each day and took about a week to finish. Overall, it took about 17 hours to complete.

    Using Dreamweaver was had a learning-curve to it. However, once you start to understand the details and certain patterns, the application became easier to use. I would say manipulating shapes was the hardest thing to learn how to do. Understanding the code was easy, which phrases did what, but moving the numbers around was harder to figure out. What helped me out the most was, physically writing out my code and plotting points on a piece of graphing paper. This process allowed me to understand what numbers I need to manipulate in order to get the shape I wanted. Also, personally it helped a bunch to label the shapes on my sketch in what order I wanted them to appear on the spilt screen; this allowed for me to not have to move chucks of code around to make shapes move forward or back. I really enjoyed this project and I think it taught me how much effort and time goes into digital art. I think being able to do cubism renditions of art with a digital system allows for art to further be stretched into something more.

Inspiration Image: Pablo Picasso's "The Guitarist" 

Sketch Image:

My Code: 

context.beginPath();

context.rect(0, 600, 610, 300);

context.lineWidth = 10;

context.fillStyle = 'rgba(95,71,33,1.00)';

context.fill();

//// first blue rectangle for background 

context.beginPath();

context.rect(0, 500, 610, 100);

context.lineWidth = 10;

context.fillStyle = 'rgba(29,45,84,1.00)';

context.strokeStyle = 'rgba(65,51,18,1.00)';

context.fill();

/// light blue line for background 

context.beginPath();

context.rect(0, 500, 610, 50);

context.lineWidth = 10;

context.fillStyle = 'rgba(129,153,211,1.00)';

context.strokeStyle = 'rgba(65,51,18,1.00)';

context.fill();

/// second dark blue rectangle for background 

context.beginPath();

context.rect(0, 400, 610, 100);

context.lineWidth = 10;

context.fillStyle = 'rgba(13,34,85,1.00)';

context.strokeStyle = 'rgba(65,51,18,1.00)';

context.fill();

/// light blue square at top of background 

context.beginPath();

context.rect(0, 0, 400, 400);

context.lineWidth = 10;

context.fillStyle = 'rgba(152,177,239,1.00)';

context.strokeStyle = 'rgba(65,51,18,1.00)';

context.fill();

////black shadow rectangle for background (top right corner)

context.beginPath();

context.rect(400, 0, 400, 400);

context.lineWidth = 10;

context.fillStyle = 'rgba(41,41,41,0.99)';

context.strokeStyle = 'rgba(65,51,18,1.00)';

context.fill();

 

/// Quad Curve for Background 

// starting point coordinates

var x = 0;

var y = 300;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 50;

var cpointY = canvas.height / 2 - 300;

// ending point coordinates

var x1 = 800;

var y1 = 300;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 2;

context.strokeStyle = "rgba(12,12,37,0.44)";

context.stroke();

 

///Start of code for man 

///shoulder of man 

var centerX1 = 336;

        var centerY1 = 250;

        var radius1 = 50;

        var startangle1 = 0;

        var endangle1 = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);

    

        context.lineWidth = 10;

        context.strokeStyle = "#121524";

context.fillStyle = 'rgba(17,20,34,0.92)';

context.fill();

        context.stroke();

//neck of man 

context.beginPath();

context.moveTo(300,300)

context.lineTo(250,180);

context.lineWidth = 60;

context.strokeStyle = 'rgba(17,20.34,1.00)';

context.stroke();

//// Left arm for man (upper arm)

context.beginPath();

    context.moveTo(250,245)

    context.lineTo(100, 400);

context.lineWidth = 30; // STROKE WIDTH

    context.strokeStyle = 'rgba(104,120,199,1.00)';

context.stroke(); // STROKE

///chest sqaure (square 1)

context.beginPath();

context.rect(210, 230, 180, 300);

context.lineWidth = 10;

context.fillStyle = 'rgba(16,19,31,0.99)';

context.strokeStyle = 'rgba(65,51,18,1.00)';

context.fill();

 

///beard of man (triangle)

context.beginPath(); // begin a shape

 

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

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

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

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(61,61,62,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(61,61,62,1.00)";

context.fill();

// head of man 

var centerX2 = 210;

        var centerY2 = 170;

        var radius2 = 55;

        var startangle2 = 0;

        var endangle2 = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX2, centerY2, radius2, startangle2, endangle2, false);

    

        context.lineWidth = 10;

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

context.fillStyle = 'rgba(61,61,62,1.00)';

context.fill();

        context.stroke();

/// right calf rectangle of man 

context.beginPath();

    context.moveTo(150,700)

    context.lineTo(375, 650);

context.lineWidth = 60; // STROKE WIDTH

    context.strokeStyle = 'rgba(25,35,90,1.00)';

context.stroke(); // STROKE

/// right thigh of man rectangle

context.beginPath();

context.rect(320, 500, 75, 150);

context.lineWidth = 10;

context.fillStyle = 'rgba(48,56,94,0.99)';

context.fill();

///Circle for knee of right leg of man 

var centerX = 350;

        var centerY = 650;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 10;

        context.strokeStyle = "#142534";

context.fillstyle = "#142534";

context.fill();

        context.stroke();

// left leg thigh for man 

context.beginPath();

    context.moveTo(250,500)

    context.lineTo(150, 610);

context.lineWidth = 60; // STROKE WIDTH

    context.strokeStyle = 'rgba(25,35,90,1.00)';

context.stroke(); // STROKE

/// left leg calf for man 

context.beginPath();

    context.moveTo(150,575)

    context.lineTo(250, 810);

context.lineWidth = 60; // STROKE WIDTH

    context.strokeStyle = 'rgba(17,22,46,1.00)';

context.stroke(); // STROKE

/// lower left arm for man 

context.beginPath();

    context.moveTo(100,400)

    context.lineTo(300, 410);

context.lineWidth = 20; // STROKE WIDTH

    context.strokeStyle = 'rgba(45,39,89,1.00)';

context.stroke(); // STROKE

///stripe for man's left leg 

context.beginPath();

    context.moveTo(150,575)

    context.lineTo(250, 810);

context.lineWidth = 10; // STROKE WIDTH

    context.strokeStyle = 'rgba(77,82,106,1.00)';

context.stroke(); // STROKE

// nose of man triangle 

context.beginPath(); // begin a shape

 

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

context.lineTo(160, 230); // point B coords

context.lineTo(170,220); // 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.strokeStyle = "rgba(0,4,43,0.97)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(12,12,63,0.50)";

context.fill();

/// eye for man (square) pt 1

context.beginPath();

context.rect(170, 165, 20, 20);

context.lineWidth = 20;

context.fillStyle = 'rgba(158,158,158,0.99)';

context.fill();

// eye for man part 2

context.beginPath();

context.rect(174, 170, 10, 10);

context.lineWidth = 10;

context.fillStyle = 'rgba(28,28,35,0.79)';

context.fill(); 

// mouth for man rectangle 

context.beginPath();

context.rect(180,225, 20, 10);

context.lineWidth = 10;

context.fillStyle = 'rgba(28,28,35,0,1.00)';

context.fill(); 

/// code for guitar - curves are crossing

context.beginPath();

        context.moveTo(200, 500);

        context.bezierCurveTo(300, 800, 400, 50, 450, 300);

context.bezierCurveTo(650, 450, 100, 280, 200, 500);

        context.fillStyle   = 'rgba(5,16,49,1.00)';

        context.fill();

context.closePath();

        // line color

context.lineWidth = 10;

        context.strokeStyle = 'rgba(5,16,49,1.00)';

        context.stroke();

/// guitar opening (circle)

var centerX4 = 270;

        var centerY4 = 450;

        var radius4 = 30;

        var startangle4 = 0;

        var endangle4 = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX4, centerY4, radius4, startangle4, endangle4, false);

    

        context.lineWidth = 10;

        context.strokeStyle = "#797D81";

context.fillstyle = "#8F9498";

context.fill();

        context.stroke();

/// strings for guitar (1)

context.beginPath();

    context.moveTo(235,480)

    context.lineTo(465, 290);

context.lineWidth = 2; // STROKE WIDTH

    context.strokeStyle = 'rgba(77,82,106,1.00)';

context.stroke(); // STROKE

//strings for guitar (2)

context.beginPath();

context.moveTo(225,470);

context.lineTo(455,280);

context.lineWidth = 2;

context.strokeStyle = 'rgab(77.82,106,1.00)';

context.stroke(); 

// strings for guitar (3)

context.beginPath();

context.moveTo(245,490);

context.lineTo(475, 300);

context.lineWidth = 2;

context.strokeStyle = 'rgab(77, 82, 106, 1.00)';

context.stroke();