Canvas Final

This specific project is based on Gary the Snail from the show Spongebob Squarepants. I wanted to create something that was somewhat challenging but that I also knew would be in my skill range. Which with code, my skillset is limited. The nostalgia from searching up Gary and other characters from the show was great as it reminded me of simpler times. I think the reason I created this in general was to see if I could make my code depiction even somewhat resemble the animated version. 

My sources and inspiration for the coding process are from the show. I wanted to add in the classic flowers but alas I did not have enough time to mess around with the code, the same goes for the shell decorations too. I am aware that Gary's personality does not shine through in my interpretation, but most adaptations may not fully capture the original feel. This was incredibly hard to code as there were many set backs and errors. I am happy to have been able to get a semi-decent project as the outcome. I think the important part is that I did my best to replicate a well known and loved character. 



Inspiration:





Final Project:




Code:

            Total Time: about 10 hours

 /////background blue gradients/////


var startx = 0;

 var starty = 0;

 var width = 800;

 var height = 600;

 

///rectangle gradeint blues background///

context.beginPath();

context.rect(startx, starty, canvas.width, canvas.height);

  var grd = context.createLinearGradient(0, 600, 800, 0);

  grd.addColorStop(0, 'rgba(72,134,232,1.00)');

  grd. addColorStop(.5, 'rgba(67,156,232,1.00)');

  grd.addColorStop(1, 'rgba(240,250,255,1.00)');

  context.fillStyle = grd;

  context.fill();

 


/////sand background rectangle/////

var grd = context.createLinearGradient(45, 50, 0, 350);

grd.addColorStop(0, "rgba(81,83,62,1.00)");

grd.addColorStop(1, "rgba(249,249,174,1.00)");


context.fillStyle = grd;

context.fillRect(2, 150, 1000, 850);



/////rock/////

var x = -300;

var y = 1000;

var cpointX = canvas.width / 20;

var cpointY = canvas.height / 2 - 300;

var x1 = 350;

var y1 = 900;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 2;

context.fillStyle = 'rgba(109,113,109,1.00)';

context.fill();

context.strokeStyle = "rgba(45,45,47,1.00)";

context.stroke();

 

/////spider thing/////

 

context.beginPath();

context.arc(30, 500, 10, 0 , 2* Math.PI, true);

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

context.fill();

 

////spider legs////


///////seaweed////// far left one

//bezier curve 1

// starting point coordinates

var Ax = 66;

var Ay = 345;

// control point 1 coordinates ( magnet )

var cpointX1 = 75;

var cpointY1 = 700;

// control point 2 coordinates ( magnet )

var cpointX2 = 70;

var cpointY2 = 300; 

// control point 3 coordinates ( magnet )

var cpointX3 = 75;

var cpointY3 = 700; 

// control point 4 coordinates ( magnet )

var cpointX4 = 76;

var cpointY4 = 455; 

// ending point coordinates 

var Bx = 90;

var By = 448;



context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgba(30,167,19,1.00)';

context.fill();

context.closePath();

context.lineWidth = 2;

context.strokeStyle = 'rgba(14,104,29,1.00)';

context.lineCap = 'round' 

context.stroke();


////seaweed 2///// in the middle

//bezier curve 2

// starting point coordinates

var Ax = 100;

var Ay = 350;

// control point 1 coordinates ( magnet )

var cpointX1 = 150;

var cpointY1 = 650;

// control point 2 coordinates ( magnet )

var cpointX2 = 60;

var cpointY2 = 650; 

// control point 3 coordinates ( magnet )

var cpointX3 = 100;

var cpointY3 = 750; 

// control point 4 coordinates ( magnet )

var cpointX4 = 90;

var cpointY4 = 500; 

// ending point coordinates 

var Bx = 150;

var By = 450;



context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgba(30,167,19,1.00)';

context.fill();

context.closePath();

context.lineWidth = 2;

context.strokeStyle = 'rgba(14,104,29,1.00)';

context.lineCap = 'round' 

context.stroke();

///seaweed 3//// far right one


//bezier curve 3

// starting point coordinates

var Ax = 206;

var Ay = 345;

// control point 1 coordinates ( magnet )

var cpointX1 = 75;

var cpointY1 = 700;

// control point 2 coordinates ( magnet )

var cpointX2 = 70;

var cpointY2 = 300; 

// control point 3 coordinates ( magnet )

var cpointX3 = 75;

var cpointY3 = 700; 

// control point 4 coordinates ( magnet )

var cpointX4 = 76;

var cpointY4 = 455; 

// ending point coordinates 

var Bx = 250;

var By = 448;



context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgba(30,167,19,1.00)';

context.fill();

context.closePath();

context.lineWidth = 2;

context.strokeStyle = 'rgba(14,104,29,1.00)';

context.lineCap = 'round' 

context.stroke();


/////garys shell/////


///small circle facing screen its bottom left of shell///


context.beginPath();

context.arc(365, 379, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(255,150,231,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();

///small circle facing screen its bottom of shell to the right///

context.beginPath();

context.arc(440, 379, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(255,150,231,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();

///main shell///

context.beginPath();

context.arc(400, 320, 70, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(255,150,231,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();



/////eye socket things/////


///rectangle eye hold 2///facing the screen its right, 


var x=340;

var y=295;

var width = 15

var height= 100;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 2;

context.fillStyle = 'rgba(133,182,249,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();

///Rectangle eye hold 1///facing the screen its left


var x=300;

var y=295;

var width = 15

var height= 100;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 2;

context.fillStyle = 'rgba(133,182,249,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();


/////both eyes/////

///eyeball 1///

  var centerX = canvas.width / 2.3;

        var centerY = canvas.height / 2.2;

        var radius = 20;

        var startangle = 0;

        var endangle = 3 * Math.PI;


        context.beginPath();

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

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 3;

        context.strokeStyle = "rgba(0,0,0,1.00)";

        context.stroke();

 


///eyeball 2/// facing the screen its to the left

var centerX1 = canvas.width / 2.6;

        var centerY1 = canvas.height / 2.2;

        var radius1 = 20;

        var startangle1 = 0;

        var endangle1 = 2 * Math.PI;


        context.beginPath();

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

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 3;

        context.strokeStyle = "rgba(0,0,0,1.00)";

        context.stroke();

 


 

/////eye iris color/////

///eye iris 1///facing the screen itss to the left

context.beginPath();

context.arc(308, 274, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(150,223,255,1.00)' ;

context.fill();


///eye iris 2///facing the screen its to the right

context.beginPath();

context.arc(348, 274, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(150,223,255,1.00)' ;

context.fill();


/////eye whites/////

///eyewhite 1 right side side///

context.beginPath();

context.arc(348, 274, 5, 0 , 2* Math.PI, true);

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

context.fill();


///eyewhite 2 left side///

context.beginPath();

context.arc(308, 274, 5, 0 , 2* Math.PI, true);

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

context.fill();


/////the body/////


///circle part body 1, far right when facing screen///

context.beginPath();

context.arc(470, 395, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(219,255,236,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();


  ///circle part body 2, next to the farthest right one when facing screen///


context.beginPath();

context.arc(440, 399, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(219,255,236,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();


///circle part body 3, next to the second farthest right one when facing screen///

context.beginPath();

context.arc(410, 402, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(219,255,236,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke()


///circle body part 4, the right of circle 5 and left of circle 3///

context.beginPath();

context.arc(380, 405, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(219,255,236,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke()

///circle body part 5, the right of circle 6///

context.beginPath();

context.arc(340, 405, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(219,255,236,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke()

///circle body part 6, next to circle 7///

context.beginPath();

context.arc(310, 405, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(219,255,236,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke()


///circle part body 7, farthest to the left when facing the screen///

context.beginPath();

context.arc(280, 400, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(219,255,236,1.00)' ;

context.fill();

context.lineWidth = 2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke()

///the rectangle actual body///

var x=280;

var y=380;

var width = 185

var height= 20;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 2;

context.fillStyle = 'rgba(133,182,249,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();







 

Comments

Post a Comment

Popular posts from this blog

Somewhere

Image
Final Image: Original Image: Picture taken to be photoshopped: Estimated time: 4 hours          For this project I chose a scene from the movie Knives Out (2019) as it is an amazing movie that I loved when my family and I went to see it in theaters. This took around four hours to complete as there was plenty of adjusting to do with the hues, saturations, and other mechanisms to try to make it as accurate to the environment in the movie scene. While researching the way the clothes were styled from the movie, I learned that Marta, the main character and the character who was in the scene I photoshopped over, was styled in a more comfortable fashion. Going off of the comfort style, I through on more baggy clothes and posed in as similar a way that I could, before snapping the photo I used for the project. My outfit does not match Martas ensemble as closely as I wanted, but that is because I just didn't have any coats, gloves, scarfs, or grey colored clothes on hand.      As mentioned
Read more

Business cards

Image
  Business card design 1: Business card design 2: Business card design 3:      For this project I used Adobe InDesign and with the program I was able to create three designs for business cards. The instructions for this project said to use a fake number, email, and website so those placeholder names are there instead of real ones. If this were to be used for a legitimate business then a real number, email, and website would of course be used. Since I have now used multiple Adobe programs by this point, it was relatively easy to create the design for these business cards and use all of the tools available.         For the first business card I wanted to go with a simple and almost sleek look. I made the font more basic and only put my logo on the card, no other designs. For the second business card I wanted to add an almost fun design element, so I used the ellipse tool to create the blue circles and then added a gradient. I think that the idea in hindsight was a good one, but it seems
Read more

Autoscopy

Image
  Final Image: Estimated Time: 3.5 hours Original Image Used: Other Images Used For Hands ALL FOLLOWING IMAGES FROM:  Free Stock Photos, Royalty Free Stock Images & Copyright Free Pictures · Pexels Background Image: Images Used to fill "holes": Images Used For "holes":     This project was incredibly difficult to find a topic to go with and be inspired by. I had several ideas in the beginning to go with, but none of them panned out how I wanted them too. This final image was not inspired by anything in particular but it did come from one of my failed autoscopy attempts. I was trying to photoshop one of my eyes onto my hand and make it look like it was coming out of it, and that idea was just not working the way I wanted it to. Then the idea of having a hole in my hand popped into my head and I found a hole design and placed it on my image. Still not satisfied, I got the idea to put in, using the frame tool, some really cool images I found of different designs wh
Read more