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

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

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

Gradient Mesh Project

Image
Probably one the hardest projects yet because of the fact I had little to no knowledge of the gradient mesh. I used google more than I had for any other project in this class and even spent 2 days of my spring break to figure out how to do it. Ultimately, while the final product may be rough, I am happy with that I was able to create for my first time using this program and even the format. The hardest part was the hair for sure due to the lack of brushes and the difficultly of going back and forth erasing the outlines then coloring it in. If I had to go back and recreate it, I would attempt to change the shading of the ears and the hair, because the largest flaws can be seen within those two objects. 
Read more