Final Canvas Project

 






Time Spent: 9 hours  
  Ever since I was a kid my favorite animal has always been a turtle and I am even planning on getting a turtle tattoo one day so I knew that for my project I wanted to do a turtle. I looked up online some more simple drawings of a turtle to be able to find something that had easy shapes but was also going to be a challenge. I knew that to include the bezier curves and the quadratic curves that I was going to use those for the waves as well as the turtle. I also wanted to do something that had something to do with Florida and the beach since I grew up going to the beach and seeing the turtles. I created the sketch by first drawing out the turtle as that was going to be the main thing in my project and then adding things like the sand, waves, palm tree and sun with the sky to give it a full picture effect.
    While creating the code for this project I started out with the sun and the sky as I knew that those things would be the easier things to do, and I wanted to work my way up to the harder parts of the project. Once I got done with the sun and sky and moved onto the waves and the sand I realized that the sun was going to get in the way of the palm tree, so I decided to move that to the other side of the canvas and put the turtle on the right side so that it would be in the sun but under the palm tree. I had the most trouble with the turtle as it was hard to get the curves and the lines to all match up. I ended up using a bezier curve for the shell and then it went into half of the face of the turtle and I used an arc to create the rest of the circle. The palm tree was good in that it helped things flow better in that I didn't have to line up the arc perfectly with the curve. For the toes on the turtle I decided to use circles as they were easier not only to understand what they were by looking at it but also since they were smaller. The majority of the time was taken making the turtle however I am really glad how it turned out. I think one thing that makes my piece successful is that I used a bezier curve for the shell and face and that I was able to make it look like the turtle was swimming on shore to the cover of the palm tree. 

Code: 
///// SKY

context.beginPath();
context.rect(-10,-10,900,130); // x,y,w,h
context.closePath();
context.fillStyle = "blue";
context.fill();
context.strokeStyle = "blue";
context.stroke();
context.closePath();

///// SUN LINES

context.moveTo(640,40); // COORDINATES OF STARTING POINT
context.lineTo(560,5); // COORDS OF ENDING POINT 1
context.lineWidth = 4; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'black'
context.moveTo(620,100); // COORDINATES OF STARTING POINT
context.lineTo(510,100); // COORDS OF ENDING POINT 1
context.lineWidth = 4; // STROKE WIDTH
context.stroke(); // STROKE
context.moveTo(645,150); // COORDINATES OF STARTING POINT
context.lineTo(590,220); // COORDS OF ENDING POINT 1
context.lineWidth = 4; // STROKE WIDTH
context.stroke(); // STROKE
context.moveTo(700,180); // COORDINATES OF STARTING POINT
context.lineTo(705,260); // COORDS OF ENDING POINT 1
context.lineWidth = 4; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(755,170); // COORDINATES OF STARTING POINT
context.lineTo(800,235); // COORDS OF ENDING POINT 1
context.lineWidth = 4; // STROKE WIDTH
context.stroke(); // STROKE





/// GRADIENT CIRCLE / SUN

var centerX = 710;
var centerY = 90;
var radius = 80;

var startX = 710;
var startY = 80;
var startRadius = 125;
var endX = 600;
var endY = 200;
var endRadius = 100;


context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'yellow');
grd.addColorStop(1, 'orange');
context.fillStyle = grd;
context.fill();
context.stroke();
context.strokestyle = 'orange'





//// PALM TREE TRUNK


var x=70;
var y=365;
var width = 40
var height= 170;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'tan';
context.strokeStyle = 'tan';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "tan");
//intermediate color
grd.addColorStop(0.5, "tan");
// ending color
grd.addColorStop(1, "tan");
context.fillStyle = grd;
context.fill();
context.fill();


context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value








////// SAND

var x=-10;
var y=535;
var width = 900
var height= 250;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'tan';
context.strokeStyle = 'tan';
context.fill();


context.stroke();



///// PALM TREE LEAVES

// RIGHT TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(90,360); // point A coordinates
context.lineTo(230, 390); // point B coords
context.lineTo(150,455); // 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 = "green"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "green";
context.fill();


// TRIANGLE 2
context.beginPath(); // begin a shape
context.moveTo(90,360); // point A coordinates
context.lineTo(130, 260); // point B coords
context.lineTo(210,320); // 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 = "green"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "green";
context.fill();



// TRIANGLE 3
context.beginPath(); // begin a shape
context.moveTo(90,360); // point A coordinates
context.lineTo(10, 250); // point B coords
context.lineTo(60,230); // 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 = "green"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "green";
context.fill();



// TRIANGLE 4
context.beginPath(); // begin a shape
context.moveTo(90,360); // point A coordinates
context.lineTo(10, 330); // point B coords
context.lineTo(10,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.strokeStyle = "green"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "green";
context.fill();






////// PALM TREE COCONUT

context.beginPath();
context.arc(90,360,20,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="white";
context.stroke();
context.fillStyle = 'white'
context.fill()




/////// WAVES
//Bottom Waves Variables
var x = -10;
var y = 600;
var x1 = 100;
var y1 = 575;
var x2 = 200;
var x3 = 300;
var x4 = 400;
var x5 = 500;
var x6 = 600;
var x7 = 700;
var x8 = 800;
var x9 = 900;

var controlX1 = 40;
var controlX2 = 150;
var controlX3 = 250;
var controlX4 = 350;
var controlX5 = 450;
var controlX6 = 550;
var controlX7 = 650;
var controlX8 = 750;
var controlX9 = 850;

var controlY1 = 650;
var controlY2 = 500;

//Bottom Waves Shape
context.beginPath();
context.moveTo(x, y);
context.lineTo(0,550);
context.quadraticCurveTo(controlX1, controlY1, x1, y1);
context.quadraticCurveTo(controlX2, controlY2, x2, y1);
context.quadraticCurveTo(controlX3, controlY1, x3, y1);
context.quadraticCurveTo(controlX4, controlY2, x4, y1);
context.quadraticCurveTo(controlX5, controlY1, x5, y1);
context.quadraticCurveTo(controlX6, controlY2, x6, y1);
context.quadraticCurveTo(controlX7, controlY1, x7, y1);
context.quadraticCurveTo(controlX8, controlY2, x8, y1);
context.lineTo(850, 605);
context.lineTo(-10,605);
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();






///// TURTLE TIME

//// TURTLE SHELL

context.beginPath();
context.arc(600,242,115,0.2857142857*Math.PI, 0.5714285714*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();
context.beginPath();
context.arc(600,242,115,0.5714285714*Math.PI, 0.8571428571*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();

context.moveTo(397,375); // COORDINATES OF STARTING POINT
context.lineTo(480,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(600,470); // COORDINATES OF STARTING POINT
context.lineTo(720,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(600,470); // COORDINATES OF STARTING POINT
context.lineTo(480,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(500,305); // COORDINATES OF STARTING POINT
context.lineTo(430,405); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(525,330); // COORDINATES OF STARTING POINT
context.lineTo(480,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(560,349); // COORDINATES OF STARTING POINT
context.lineTo(545,460); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(600,355); // COORDINATES OF STARTING POINT
context.lineTo(600,467); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(640,350); // COORDINATES OF STARTING POINT
context.lineTo(670,460); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(365,400); // COORDINATES OF STARTING POINT
context.lineTo(470,480); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(470,480); // COORDINATES OF STARTING POINT
context.lineTo(600,500); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(730,479); // COORDINATES OF STARTING POINT
context.lineTo(600,500); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(730,479); // COORDINATES OF STARTING POINT
context.lineTo(720,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'


//// TURTLE HEAD / BODY

context.moveTo(430,450); // COORDINATES OF STARTING POINT
context.lineTo(360,485); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(470,480); // COORDINATES OF STARTING POINT
context.lineTo(430,515); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(365,400); // COORDINATES OF STARTING POINT
context.lineTo(265,360); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.moveTo(600,500); // COORDINATES OF STARTING POINT
context.lineTo(600,550); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.beginPath();
context.arc(530,465,110,0.2857142857*Math.PI, 0.5714285714*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();
context.beginPath();
context.arc(530,465,110,0.5714285714*Math.PI, 0.8571428571*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();


context.moveTo(600,550); // COORDINATES OF STARTING POINT
context.lineTo(685,557); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.beginPath();
context.arc(620,480,100,0*Math.PI, 0.2857142857*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();

context.beginPath();
context.arc(430,450,80,0.5714285714*Math.PI, 0.8571428571*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();

context.moveTo(430,515); // COORDINATES OF STARTING POINT
context.lineTo(411,530); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.beginPath();
context.arc(340,465,60,0.2857142857*Math.PI, 0.5714285714*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();
context.beginPath();
context.arc(340,465,60,0.5714285714*Math.PI, 0.8571428571*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();

context.moveTo(290,457); // COORDINATES OF STARTING POINT
context.lineTo(285,492); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'
context.beginPath();
context.arc(275,423,65,1.142857143*Math.PI, 1.428571428*Math.PI,false);
context.lineWidth=5
context.strokeStyle="green"
context.stroke();

context.moveTo(290,457); // COORDINATES OF STARTING POINT
context.lineTo(360,485); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'green'

context.beginPath();
context.arc(245,395,10,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="black";
context.stroke();
context.fillStyle = 'black'
context.fill()

context.beginPath();
context.arc(295,505,6,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="black";
context.stroke();
context.fillStyle = 'black'
context.fill()

context.beginPath();
context.arc(320,520,6,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="black";
context.stroke();
context.fillStyle = 'black'
context.fill()

context.beginPath();
context.arc(387,517,6,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="black";
context.stroke();
context.fillStyle = 'black'
context.fill()

context.beginPath();
context.arc(405,525,6,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="black";
context.stroke();
context.fillStyle = 'black'
context.fill()

context.beginPath();
context.arc(705,535,6,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="black";
context.stroke();
context.fillStyle = 'black'
context.fill()

context.beginPath();
context.arc(690,550,6,0*Math.PI, 2*Math.PI,false);
context.lineWidth=4
context.strokeStyle="black";
context.stroke();
context.fillStyle = 'black'
context.fill()

context.moveTo(570,570); // COORDINATES OF STARTING POINT
context.lineTo(570,593); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'black'

context.moveTo(530,575); // COORDINATES OF STARTING POINT
context.lineTo(530,593); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'black'

context.moveTo(530,590); // COORDINATES OF STARTING POINT
context.lineTo(570,590); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.strokeStyle = 'black'

context.beginPath();
context.arc(233,390,50,0.2857142857*Math.PI, 0.5714285714*Math.PI,false);
context.lineWidth=5
context.strokeStyle="black"
context.stroke();




/// Bezier curve


// starting point coordinates
var x = 207;
var y = 385;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3.3;
var cpointY1 = canvas.height / 3.4 + 540;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.4;
var cpointY2 = canvas.height / 1.5 - 465;

// ending point coordinates
var x1 = 720;
var y1 = 450;


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

context.lineWidth = 6;
context.strokeStyle = "green";
context.lineCap = 'round'
context.stroke();

//context.lineCap = Lines can have one of three cap styles: butt, round, or square
// lineCap property must be set before calling stroke()

//context.lineCap = Lines can have one of three cap styles: butt, round, or square
// lineCap property must be set before calling stroke()

Comments

Post a Comment

Popular posts from this blog

Autoscopy

Image
  Recently I have been watching all of the marvel movies so I decided that it was going to be a fun idea to try and combine the world that I have now and something that isn't real. I chose a different sky and color scheme to make the alien world pop out a bit. I added a horse running because as a kid I always loved riding horses. I then added the UFO, birds and the avengers quinjet to make it something that isn't possible. Bringing the 2 worlds together in different colors almost making it look like it wasn't taken on earth but somewhere else. The images below are all of the original images that went into this final product. 
Read more

Business Cards

Image
These 3 business cards are a representation of myself and the designs that I previously made in Illustrator. I touched on the meaning of the logo in that post, but to recap the logo is about my journey from my small town in the mountains to the sandy beaches of Florida. I chose a more simple design for my business cards in that I want to go back to the simple life myself, and really be able to enjoy everything that comes my way. I loved how the fonts were fun yet professional enough to make it seem like I was in business, but did know how to have a good time. I also didn't want to have too much information on there as I didn't think that would make a good first impression if I were to give someone these business cards. Overall I went for the simple yet effective look and feel.
Read more

Somewhere

Image
  I chose to use a photo of myself on a beach because I have always liked the beach and I found that there are a lot of different pictures and options for photoshopping myself into another beach photo. Somewhere I have always wanted to go since I was a kid was Australia so I thought that would be a good place to put myself. I thought that it would add something else to the photo and I found while searching for photos options that would include a kangaroo in the picture as well. I have also always wanted to see a real kangaroo in person so I thought that this was a fitting addition to the photo.
Read more