Canvas Experiment



When starting off brainstorming my ideas and thought process for this project, I took a pen to graph paper and sketched an outline of my goal for the outcome of my first piece in the class.  The process of planning out exactly what I wanted to produce in this project gave me the head start that I needed to now conceptualize my design to Adobe Dreamweaver.  As a Junior at the University of Tampa, the workload of my academic career is at an all-time high which can often tend to make students feel overwhelmed or stressed from the amount of commitment that their classes can bring on.  I decided to use this project as a stress releaser and bring the viewer of this piece into a positive mindset by recreating the most family-oriented and cheerful time of every year which is the holiday season.  My personal take on the holiday season always involves snow being on the ground with decorations all around for everyone to enjoy and partake in themselves.  Ever since I can remember, my family has held a tradition of making a snowman together which would always be the specific way that my family would bring in the holiday season and those memories are something that I will hold onto forever.  With my best efforts, I attempted to recreate a snowman full of holiday cheer placed in an open field that not only comes around during the holiday season but who is around permanently bringing happiness to anyone who crosses path with this project.  I used a variety of different shapes to set the stage for this project including triangles, rectangles, and circles to bring together the layout of the character I focused on depicting.  Throughout the process of putting together my project, I decided to use a Bezier and Quadratic curve to design the background I was searching for in order for the character I was creating to be showcased correctly.  Every piece of art has the potential to make an external connection with their audience and I strived my absolute best to design a piece of work that pushes viewers to be enlightened on a pleasant or peaceful level rooting them back to memories that will make them smile. 


My Code:

// ORANGE TRIANGLE

context.beginPath(); // begin a shape

context.moveTo(535,180); // point A coordinates
context.lineTo(570, 190); // point B coords
context.lineTo(535,190); // point C coords
context.closePath(); // close the shape
context.lineWidth = 2
; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "orange"; // Reb Green Blue Alpha
context.stroke();
    
context.fillStyle = "orange"; //
context.fill();

var x=205;
var y=400;
var width = 20
var height= 70;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = "black";
context.strokeStyle = "black";
// add linear gradient
        
        context.fillStyle = "black";
        context.fill();
context.fill();
var x=498;
var y=65;
var width = 70
var height= 70;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,0,0,1)';
context.strokeStyle = 'rgb(0,0,0,1)';
// add linear gradient
        
        context.fillStyle = "rgb(0,0,0,1)";
        context.fill();

 var x=483;
var y=114;
var width = 100
var height= 22;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,0,0,1)';
context.strokeStyle = 'rgb(0,0,0,1)';
// add linear gradient
        
        context.fillStyle = "rgb(0,0,0,1)";
        context.fill();
//Simple lines

context.moveTo(440,250); // COORDINATES OF STARTING POINT
context.lineTo(500,275); // COORDS OF ENDING POINT 1
context.lineWidth = 7; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke(); // STROKE
//Simple lines

context.moveTo(435,270); // COORDINATES OF STARTING POINT
context.lineTo(458,260); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke(); // STROKE
//Simple lines

context.moveTo(625,250); // COORDINATES OF STARTING POINT
context.lineTo(565,275); // COORDS OF ENDING POINT 1
context.lineWidth = 7; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke(); // STROKE
//Simple lines

context.moveTo(625,270); // COORDINATES OF STARTING POINT
context.lineTo(600,260); // COORDS OF ENDING POINT 1
context.lineWidth = 6; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke(); // STROKE
 ////circle

  var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 1.3;
        var radius = 90;
        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();

 ////circle

  var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 2;
        var radius = 70;
        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();

 var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 3.4;
        var radius = 50;
        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();


// GREEN TRIANGLE
context.beginPath(); // begin a shape

context.moveTo(50,200); // point A coordinates
context.lineTo(380, 200); // point B coords
context.lineTo(220,50); // 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 = "rgb(0,153,76)"; // Reb Green Blue Alpha
context.stroke();

context.fillStyle = "rgb(0,153,76)"; // Reb Green Blue Alpha
context.fill(); 

// GREEN TRIANGLE
context.beginPath(); // begin a shape

context.moveTo(50,300); // point A coordinates
context.lineTo(380, 300); // point B coords
context.lineTo(220,150); // 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 = "rgb(0,153,76)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgb(0,153,76)"; // Reb Green Blue Alpha
context.fill();

// GREEN TRIANGLE
context.beginPath(); // begin a shape

context.moveTo(50,400); // point A coordinates
context.lineTo(380, 400); // point B coords
context.lineTo(220,150); // 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 = "rgb(0,153,76)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgb(0,153,76)"; // Reb Green Blue Alpha
context.fill();
// starting point coordinates
var x = 0;
var y = 500;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 5;
var cpointY1 = canvas.height / 2 + 250;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1;
var cpointY2 = canvas.height / 2 - 100; 

// ending point coordinates 
var x1 = 800;
var y1 = 400;


context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;
context.strokeStyle = "rgb(0,0,50)";
context.lineCap = 'round' 
context.stroke();

////circle

  var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 2.2;
        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();
////circle

  var centerX = canvas.width / 1.45;
        var centerY = canvas.height / 3.5;
        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();
////circle

  var centerX = canvas.width / 1.54;
        var centerY = canvas.height / 3.5;
        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();
////circle

  var centerX = canvas.width / 1.56;
        var centerY = canvas.height / 3;
        var radius = 1;
        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();
////circle

  var centerX = canvas.width / 1.52;
        var centerY = canvas.height / 2.9;
        var radius = 1;
        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();
////circle

  var centerX = canvas.width / 1.48;
        var centerY = canvas.height / 2.9;
        var radius = 1;
        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();
////circle

  var centerX = canvas.width / 1.44;
        var centerY = canvas.height / 3;
        var radius = 1;
        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();
////circle

  var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 1.9;
        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();
////circle

  var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 1.46;
        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();
////circle

  var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 1.35;
        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();
////circle

  var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 1.25;
        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();

Comments

Post a Comment

Popular posts from this blog

Self Portrait Assignment

Image
For my Self Portrait Project, the project was inspired by a picture that you were supposed to take of yourself and transform it into the application Adobe Illustrator.  From the start of the project, I was deciding what angle was the most appropriate to fit the message that I was attempting to convey in this assignment.  I attempted various different angles from crossing my arms, to serious emotion, even attempting to go after a joking emotion with me laughing in the picture.  Through the assignment directions, the class was encouraged to base our project after a propaganda poster and make our own version out of the specific poster that would give off our own spin.  I looked at various propaganda posters that and I decided to go with an Uncle Sam Army recruiting poster.  The Poster was a picture of Uncle Sam pointing at the eye of the viewer with the message, “I want YOU for the U.S. Army.”  I then chose to take a picture of me in a similar position up against a white wall pointi
Read more

Autoscopy

Image
For this project, I included a picture of myself, a picture of a candle burning in the shape of a head, and an image of the solar system. I chose to use hue and saturation, color balance, and black and white transition layers when coloring my piece the way it is. My choice of images was specifically used to create an illusion of myself in outer space. While working on this piece on April 7th, it also happened to be the same day as the "supermoon". Astronomy has always been an interesting subject for me to learn about, so I felt with the supermoon being present, and it also is a big passion of mine, that the background of the solar system fits perfectly for this project. When choosing a second image to overlay, I chose an image of a burning candle. With everything going on right now, the coronavirus is taking over our every day lives. As hard as it is, eventually the light (coronavirus) will burn out and we will return to our normal days. The image of the candle burn
Read more

Somewhere

Image
I chose to insert myself into my favorite photo of the Sopranos cast. When researching for this project, I looked through my favorite movies and TV series and the Sopranos was an easy pick for me. I dressed in similar clothing to what they were wearing in the photo to make it look as realistic as possible. When adding myself to the image, after I masked myself out, and created a few adjustment layers to make my coloring as similar to the original photo as possible. Some adjustments that I made were hue and saturation, channel mixer, and brightness and contrast. I erased some of my clothing to make it look as if I was behind the character next to me, and made the bottom of my photo blurred out into the black that is shown underneath all the characters. I found this project to be both challenging and interesting, but I enjoyed being as creative as I could. Since this photo was taken using a different camera, I changed the coloring of the original image a little to match the pho
Read more