Trippy Underwater Turtle











  Hours: 7

I decided to create an underwater landscape with a few sea creatures and an anchor. I drew my inspiration from my love for the ocean, and my love for the environment.

The "trippy turtle" has a colorful shell and green limbs. He is accompanied by a grey stingray swimming above. The black anchor can be seen in the bottom right. Additionally, a little pink starfish can be seen in the bottom left. The bubbles are to help accent that it is underwater rather than above the sea.

The project took me roughly seven hours to complete, but I enjoyed the struggle of mashing colors and creating different textures.


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//variables
var x1 =0;
var y1 =0;
var x2 =750;
var y2 =500;
var rectx1 = 0;
var recty1 = 0;
var rectwidth1 = 800;
var rectheight1 = 600;
var grd = context.createLinearGradient(rectx1, recty1, rectx1+rectwidth1, recty1+rectheight1);


////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


// rectangle 1
context.beginPath();
context.rect(rectx1,recty1,rectwidth1,rectheight1);
context.lineWidth = 10;
context.strokeStyle = 'rgb(0,0,0)';
// starting gradient color
        grd.addColorStop(0, "rgb(0,200,200)");
        //intermediate color
        grd.addColorStop(0.5, "rgb(0,150,200)");
        // ending color
        grd.addColorStop(1, "rgb(0,10,300)");
context.fillStyle = grd;
context.fill();
context.stroke();

//sand

 var quad = context.createLinearGradient(100,100,400,600);
         
 quad.addColorStop(0, "rgb(255, 245, 204)");

 quad.addColorStop(1, "rgb(255, 230, 179)");

 context.beginPath();
 context.moveTo(0,448);
 context.quadraticCurveTo(15,444,65,445);
 context.quadraticCurveTo(225,469,450,455);
 context.quadraticCurveTo(530,440,800,455);
 context.lineTo(795,795);
 context.lineTo(0,600);
 context.lineTo(0,448);
 context.closePath();
 context.fillStyle = quad;
 context.fill();

//starfish

 var quad = context.createLinearGradient(0,100,240,800);
         
 quad.addColorStop(0, "red");

 quad.addColorStop(1, "pink");

 context.beginPath();
 context.moveTo(133,500);
 context.quadraticCurveTo(130,470,120,500); //top fin
 context.quadraticCurveTo(85,490,115,508); //left fin
 context.quadraticCurveTo(95,535,125,515); //bottom left fin
 context.quadraticCurveTo(145,535,140,510); //bottom right fin
 context.quadraticCurveTo(155,488,135,500); //top right fin
 context.closePath();
 context.fillStyle = quad;
 context.fill();

//head//
context.beginPath();
context.moveTo(425, 220);
context.bezierCurveTo(475, 200, 430, 120, 380, 160);
context.bezierCurveTo(370, 168, 350, 205, 385, 220);
context.closePath();
context.fillStyle = '#669900';
context.fill();

//left eye//
context.beginPath();
context.arc(390, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();

context.beginPath();
context.arc(393,172,2,0,2*Math.PI,false);
context.fillStyle= "white";
context.fill();
context.stroke();

//right eye//
context.beginPath();
context.arc(422, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();

context.beginPath();
context.arc(425,172,2,0,2*Math.PI,false);
context.fillStyle= "white";
context.fill();
context.stroke();

//tail//
context.beginPath();
context.moveTo(385,395);
context.quadraticCurveTo(400, 400, 390, 430);
context.quadraticCurveTo(415, 415, 415, 380);
context.closePath();
context.fillStyle = '#669900';
context.fill();

//legs//
//front left leg//
context.beginPath();
context.moveTo(290, 190);
context.quadraticCurveTo(350, 225, 350, 250);
context.quadraticCurveTo(295, 250, 290, 190);
context.fillStyle = '#669900';
context.fill();


//front right leg//
context.beginPath();
context.moveTo(510, 190);
context.quadraticCurveTo(500, 250, 450, 250);
context.quadraticCurveTo(425, 250, 510, 190);
context.fillStyle = '#669900';
context.fill();

//bottom left leg//
context.beginPath();
context.moveTo(375,350);
context.quadraticCurveTo(380, 400, 330, 415);
context.quadraticCurveTo(380, 300, 375, 390);
context.fillStyle = '#669910';
context.fill();

//bottom right leg//
context.beginPath();
context.moveTo(425,350);
context.quadraticCurveTo(430, 400, 470, 415);
context.quadraticCurveTo(480, 400, 425, 350);
context.fillStyle = '#669900';
context.fill();

//shell//
context.beginPath();
context.moveTo(400, 210);
context.bezierCurveTo(295, 225, 295, 375, 400, 400);
context.bezierCurveTo(505, 375, 505, 225, 400, 210);
context.closePath();
context.fillStyle = 'lightpink';
context.fill();

//spots
context.beginPath();
context.arc(400, 305, 75, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(400, 290, 100, 400, 350, 10);
grd.addColorStop(0, 'white');
grd.addColorStop(1, 'purple');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'lightpink';
context.stroke();

context.beginPath();
context.arc(400, 305, 50, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(400, 290, 100, 400, 350, 10);
grd.addColorStop(0, 'white');
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'pink';
context.stroke();

context.beginPath();
context.arc(400, 305, 20, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(400, 290, 100, 400, 350, 10);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'grey');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'lightblue';
context.stroke();


//Stingray

//body
context.beginPath();
context.moveTo(320, 155);
context.quadraticCurveTo(330, 115, 295, 90);
context.quadraticCurveTo(260, 75, 275, 20);
context.quadraticCurveTo(245, 155, 325, 175);
context.closePath();
context.strokeStyle = 'grey';
context.fillStyle = 'grey';
context.fill();
context.lineWidth = 1;
context.stroke();

//stingray eye
context.beginPath();
context.arc(317, 155, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();
context.beginPath();
context.arc(319,155,2,0,2*Math.PI,false);
context.fillStyle= "white";
context.fill();
context.stroke();

//Stingray

//body
context.beginPath();
context.moveTo(320, 155);
context.quadraticCurveTo(330, 115, 295, 90);
context.quadraticCurveTo(260, 75, 275, 20);
context.quadraticCurveTo(245, 155, 325, 175);
context.closePath();
context.strokeStyle = 'grey';
context.fillStyle = 'grey';
context.fill();
context.lineWidth = 1;
context.stroke();

//stingray eye
context.beginPath();
context.arc(317, 155, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();
context.beginPath();
context.arc(319,155,2,0,2*Math.PI,false);
context.fillStyle= "white";
context.fill();
context.stroke();

//Detail Turtle L Eye
context.beginPath();
context.arc(390, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();

context.beginPath();
context.arc(393,172,2,0,2*Math.PI,false);
context.fillStyle= "white";
context.fill();
context.stroke();



//Detail Turtle R Eye
context.beginPath();
context.arc(422, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();

context.beginPath();
context.arc(425,172,2,0,2*Math.PI,false);
context.fillStyle= "white";
context.fill();
context.stroke();

//BUBBLESSSSSSSSSSSSSSSSSSSSS

//BUBBLE ONE
   var centerX = canvas.width / 1.2;
   var centerY = canvas.height / 2.3;
     var radius = 15;

    context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE ONE HIGHLIGHT
   var x = canvas.width / 1.2;
   var y = canvas.height / 2.3;
   var radius = 12;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
 
//BUBBLE TWO
   var centerX = canvas.width / 1.1;
   var centerY = canvas.height / 1.5;
     var radius = 13;

    context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE TWO HIGHLIGHT
   var x = canvas.width / 1.1;
   var y = canvas.height / 1.5;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();

//BUBBLE TWO
   var centerX = canvas.width / 1.5;
   var centerY = canvas.height / 1.9;
     var radius = 13;

    context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE TWO HIGHLIGHT
   var x = canvas.width / 1.5;
   var y = canvas.height / 1.9;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
 
//BUBBLE TWO
   var centerX = canvas.width / 1.1;
   var centerY = canvas.height / 1.5;
     var radius = 13;

    context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE TWO HIGHLIGHT
   var x = canvas.width / 1.1;
   var y = canvas.height / 1.5;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();

//BUBBLE THREE
   var centerX = canvas.width / 25;
   var centerY = canvas.height / 2.2;
     var radius = 18;

    context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE THREE HIGHLIGHT
   var x = canvas.width / 25;
   var y = canvas.height / 2.2;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();

var x = canvas.width / 25;
   var y = canvas.height / 2.2;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();

//BUBBLE THREE
   var centerX = canvas.width / 25;
   var centerY = canvas.height / 1.5;
     var radius = 18;

    context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE THREE HIGHLIGHT
   var x = canvas.width / 25;
   var y = canvas.height / 1.5;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();

//BUBBLE 4
   var centerX = canvas.width / 15;
   var centerY = canvas.height / 1.9;
     var radius = 12;

    context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE 4 HIGHLIGHT
   var x = canvas.width / 15;
   var y = canvas.height / 1.9;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

    context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
//END BUBBLESSSSSSSSSSSSSSS

//ANCHOR

//first curve Right
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(700, 485);
ctx.quadraticCurveTo(720, 600, 745, 552);
context.lineWidth = 35
context.strokeStyle = 'black';
ctx.stroke();

//first curve Left
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(700, 485);
ctx.quadraticCurveTo(700, 600, 665, 550);
context.lineWidth = 35
context.strokeStyle = 'black';
ctx.stroke();

//botttom Arc
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(705, 550, 40, 6.4, 1 * Math.PI);

ctx.stroke();

//Top Rectangle
context.beginPath(); // hey im about to draw something
context.lineWidth = 7; // declare the width in pixels of the line
context.rect(663,484, 77, 10); // top left corner x and y coordinates, width and height
context.fillStyle = '#000000';
context.fill();

//top circle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(701, 473, 12, 0, 2 * Math.PI);
ctx.stroke();






////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>



Comments

Post a Comment

Popular posts from this blog

Business Card

Image
This is my business card I created using InDesign. The logo in the center was created in a project prior to this one. The pen and "314" represent my passion for writing and my hometown of St. Louis, Missouri. The colors on the card are a light blue and grey because it's relatively neutral but still adds a pop. I wanted to create a card that represented what I want to do in the future which is media management and producing. The social media logos on the right side represent the media aspects and the grey side is my contact information.
Read more

Autoscopy Project

Image
This is my as a space deer. There was really no other explanation for me doing this other than I like deer and I wanted to see my face on one. Additionally, the regular color, before the hue, would give most people nightmares due to the disarranged feeling you get when you see my normal face on a deer body. That being said, I made it all blue and orange and I feel that it blended better.
Read more

Poster Project

Image
Nature and the environment are two things that are deeply important to me. I think that most people over think the global warming and climate change debates too much. Broken down, its actually really simple. Nature is beauty, beauty is important, so we should save what's important. Overall, this was actually a relatively hard project for me. I had to decide what picture would flow best with the poster outline and this was the picture I chose. It is me at my family lake house on Six Mile Lake in Ontario, Canada. The lake is pristine and I want it to stay that way so care about the Earth because we only have one.
Read more