Canvas Final- Hula Stitch




My final for the canvas project is a beach scene featuring Stitch from 'Lilo and Stitch' hula dancing. The background, cloud, sand, starfish, water, grass skirt, and Stitch were all made with the gradient effect. The cloud is a benzier curve, while everything else are quadratic curves. Stitch's nose, head, and nails and all the sand specks are circles. I learned how to understand the canvas as a coordinate graph, while not being able to see the points I was drawing. Towards the end, I was able to type out codes off the top of my head and the points would be partially accurate to the lines I wanted to make. I also learned how to be patient with what I was doing, and allowed myself to correct and work off my mistakes.

Hours: 12

Code:

//BACKGROUND

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      // create radial gradient

      var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
   
      grd.addColorStop(0, 'rgb(255, 255, 153)');
 grd.addColorStop(.25, 'rgb(255, 255, 128)');
      grd.addColorStop(1, 'rgb(153, 204, 255)');


      context.fillStyle = grd;
      context.fill();


//waves

var quad = context.createLinearGradient(200,500,400,400);

quad.addColorStop(0, "rgb(102, 204, 255)");
quad.addColorStop(1, "rgb(0, 204, 255)");

      context.beginPath();
      context.moveTo(0, 375);
      context.quadraticCurveTo(108, 350, 220, 375);
 context.quadraticCurveTo(280, 400, 400, 375);
 context.quadraticCurveTo(568, 350, 700, 375);
 context.quadraticCurveTo(808, 400, 820, 375);
 context.lineTo(805,480);
 context.lineTo(0,500);
 context.lineTo(0,375);
 context.closePath();
 context.fillStyle = quad;
 context.fill();

//Wave details

context.beginPath();
context.moveTo(10,390);
context.quadraticCurveTo(150,360,230,390);  //left
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();


context.beginPath();
context.moveTo(200,400);
context.quadraticCurveTo(350,450,410,410);  //middle left
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();

context.beginPath();
context.moveTo(700,390);
context.quadraticCurveTo(450,360,390,400);  //middle right
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();

context.beginPath();
context.moveTo(790,430);
context.quadraticCurveTo(650,410,550,420);  //right
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
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(67,420,97,420);
context.quadraticCurveTo(125,380,155,420);
context.quadraticCurveTo(205,425,209,452);
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(135,400);
context.quadraticCurveTo(130,370,120,400); //top fin
context.quadraticCurveTo(85,390,115,408); //left fin
context.quadraticCurveTo(95,435,125,415); //bottom left fin
context.quadraticCurveTo(145,435,140,410); //bottom right fin
context.quadraticCurveTo(155,388,135,400); //top right fin
context.closePath();
context.fillStyle = quad;
context.fill();

//sand specks

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 2;

      context.beginPath(); //1st speck, upper right side
      context.arc(700, 500, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //2nd speck, upper left side
      context.arc(215, 500, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //3rd speck, middle left side
      context.arc(95, 532, 1.5, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //4th speck,on sand castle
      context.arc(112, 450, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //5th speck, upper left side
      context.arc(38, 480, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //6th speck, middle
      context.arc(438, 580, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //7th speck, bottom right side
      context.arc(640, 559, 1.5, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 //Stitch's left leg

var quad = context.createLinearGradient(200,200,400,600);

quad.addColorStop(0, "rgb(77, 136, 255)");

quad.addColorStop(1, "rgb(26, 102, 255)");

  context.beginPath();
context.moveTo(415,475);
context.quadraticCurveTo(410,490,415,508); //left line of leg
context.quadraticCurveTo(400,510,412,516); //left toe
context.quadraticCurveTo(410,520,420,520); //2nd toe
context.quadraticCurveTo(422,525,430,520); //3rd toe
context.quadraticCurveTo(444,522,434,508); //right toe
context.quadraticCurveTo(437,490,430,475); //right line of leg
context.lineTo(414,475);
context.closePath();
context.fillStyle = quad;
context.fill();

//Stitch left leg toenails

      context.beginPath(); // left toenail
      context.arc(410, 514, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = "rgb(0, 51, 153)";
      context.fill();

context.beginPath(); //2nd toenail
      context.arc(417, 520, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd toenail
      context.arc(425, 521, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //4th toenail
      context.arc(435, 519, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();


//Stitch's right leg

var quad = context.createLinearGradient(100,100,400,600);

quad.addColorStop(0, "rgb(77, 136, 255)");

quad.addColorStop(1, "rgb(26, 102, 255)");

context.beginPath();
context.moveTo(449,477);
context.quadraticCurveTo(450,493,456,509); //left line of leg
context.quadraticCurveTo(440,513,453,518); //left toe
context.quadraticCurveTo(450,523,461,522); //2nd toe
context.quadraticCurveTo(462,528,471,522); //3rd toe
context.quadraticCurveTo(484,525,472,510); //right toe
context.quadraticCurveTo(477,500,460,470); //right line of leg
context.lineTo(449,478);
context.closePath();
context.fillStyle = quad;
context.fill();


//Stitch right leg toenails

      context.beginPath(); // left toenail
      context.arc(450, 516, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = "rgb(0, 51, 153)";
      context.fill();

context.beginPath(); //2nd toenail
      context.arc(456, 522, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd toenail
      context.arc(465, 524, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //4th toenail
      context.arc(476, 521, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();


//Stitch's body + right arm

var quad = context.createLinearGradient(100,100,400,600);

quad.addColorStop(0, "rgb(77, 136, 255)");

quad.addColorStop(1, "rgb(26, 102, 255)");

context.beginPath();
context.moveTo(414,459);
context.quadraticCurveTo(400,465,460,460); //bottom torso
context.quadraticCurveTo(473,440,468,437); //right side of body line
context.quadraticCurveTo(480,445,495,440); //bottom line of right arm
context.quadraticCurveTo(503,455,505,442); //left finger
context.quadraticCurveTo(517,442,506,434); //2nd finger
context.quadraticCurveTo(510,423,496,431); //top finger
context.quadraticCurveTo(470,425,467,430); //top line of arm
context.quadraticCurveTo(457,418,419,428); //top line of body
context.quadraticCurveTo(410,438,415,445); //upper left part of body
context.closePath();

context.fillStyle = quad;
context.fill();

//Hand details

context.beginPath();
      context.arc(500, 437.5, 5, 1, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

//Hula grass skirt

var quad = context.createLinearGradient(100,100,400,600);

quad.addColorStop(0, "rgb(45, 134, 45)");

quad.addColorStop(1, "rgb(32, 96, 32)");

context.beginPath();
context.moveTo(413,460);
context.quadraticCurveTo(430,460,460,460); //top line
context.quadraticCurveTo(460,450,470,497); //right line
context.quadraticCurveTo(470,500,458,490); //right triangle
context.quadraticCurveTo(465,522,444,492); //2nd to the left
context.quadraticCurveTo(443,525,435,494); //middle
context.quadraticCurveTo(423,525,423,496); //2nd to the right
context.quadraticCurveTo(409,510,413,498); //left triangle
context.closePath();
context.fillStyle = quad;
context.fill();

//ear behind head

context.beginPath();
context.moveTo(425,400);
context.quadraticCurveTo(390,325,435,380);
context.closePath();
context.fillStyle = "rgb(26, 102, 255)";
context.fill();


//head
var quad = context.createLinearGradient(200,200,400,500);
quad.addColorStop(0, "rgb(77, 136, 255)");
quad.addColorStop(1, "rgb(26, 102, 255)");
context.beginPath();
context.arc(0, 0, 36.5, 0, 6.283185307179586, false);
context.closePath();
context.restore();
context.fillStyle = quad;
context.fill();

//left ear

context.beginPath();
context.moveTo(402,399);
context.quadraticCurveTo(350,335,415,386);
context.closePath();
context.fillStyle = "rgb(255, 153, 153)";
context.fill();
context.lineWidth = "2.2";
context.strokeStyle = "rgb(26, 102, 255)";
context.stroke();

//left arm + fingers

context.beginPath();
context.moveTo(416,431);
context.quadraticCurveTo(435,428,450,432); //top line of arm
context.quadraticCurveTo(463,421,457,435); //top finger
context.quadraticCurveTo(478,437,458,442); //middle finger
context.quadraticCurveTo(470,453,450,444); //bottom finger
context.quadraticCurveTo(445,449,414,443); //bottom line
context.closePath();
context.fillStyle = "rgb(26, 83, 255)";
context.fill();

//fingernails left hand

 context.beginPath(); //1st fingernail
      context.arc(457, 428, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //2nd fingernail
      context.arc(465, 438, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd fingernail
      context.arc(459, 446, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

 //fingernails right hand

context.beginPath(); //1st fingernail
      context.arc(506, 428, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //2nd fingernail
      context.arc(510, 439, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd fingernail
      context.arc(503, 448, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

//Nose

context.beginPath();
      context.arc(470, 404, 6, 1, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

//outer eye

context.beginPath();
context.moveTo(420,400);
context.quadraticCurveTo(420,420,458,409);
context.quadraticCurveTo(450,375,420,400);
context.closePath();
context.fillStyle = "rgb(179, 217, 255)";
context.fill();

//eye

context.beginPath();
context.moveTo(435,400);
context.quadraticCurveTo(435,412,450,407);
context.quadraticCurveTo(445,388,435,400);
context.fillStyle = "black";
context.fill();

//eye detail

context.beginPath();
      context.arc(441, 400, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'white';
      context.fill();


//cloud

var quad = context.createLinearGradient(100,400,400,900);

quad.addColorStop(0, "white");

quad.addColorStop(1, "gray");

context.beginPath();
      context.moveTo(590, 170);
      context.bezierCurveTo(610, 120, 630, 100, 650, 170);
      context.bezierCurveTo(650, 150, 670, 130, 680, 170);
      context.bezierCurveTo(740, 190, 700, 210, 690, 220);
      context.bezierCurveTo(820, 230, 610, 320, 550, 250);
      context.bezierCurveTo(500, 220, 475, 100, 590, 180);
      context.closePath();
      context.fillStyle = quad;
      context.fill();
   

Comments

Post a Comment

Popular posts from this blog

Black and White To Color Project

Image
In Adobe Ilustrator, I chose a picture from my high school graduation and made it black and white. Then, I used the paint tool and started to color on myself. I zoomed in a lot to make sure I could color in the details in order for it to look realistic. I darkened my cap and robe to keep a color theme going, and added black lipstick with black ‘paint’. I then added a nose piercing and eyebrow piercing to top off the punk look. I made the background purple because I, again, wanted to maintain a color theme. I had a lot of fun with this project.  
Read more

Business Card Final

Image
Here are my *updated* and completed 5 business cards depicting: -Animal Lover -Compassionate -Curious -Creative -Adventurous I enjoyed created all of these but probably like animal lover best because it was fun to create the dog and cat. I t took me a while to finalize what I wanted to choose for my final logos. I played with them a lot, and decided I wanted them to be coherent with each other through their design and style. I really loved how they came out, simple but matching. I was able to use faces and eyes mutiple times which was nice. Making them colorful and pretty also took a long time but it was work it. I used Adobe Illustartor for this project.
Read more

Day 1 of Digital Media

8/29/17 ART 201: Digital Media Day 1 Today was the first day of class and it was very exciting to start knowing I'll be learning new and useful skills and tools. I enjoyed being able to see Professor Echeverry's work, and I found it fascinating that art can be made with an Xbox Kinect camera, it's just something I never could imagine even possible. I'm excited to be exposed to possibilities like the Kinect camera, and how things can be made into art, and the technological science behind it. My  name is Alicia Afonso and I am a freshman at The University of Tampa. I am an Advertising and Public Relations major, but I do have an interest in possibly getting involved with film, maybe as a minor. I love watching movies and TV shows, painting, singing, and playing the guitar. I also love animals, my summer job was working at a dog day care and boarding facility where I got to care for dogs all day long. I grew up in Connecticut with my mom, but spent part of my time wi...
Read more