"Hang Loose" - canvas final

-



Hours: about 21
What I learned: I had a lot of fun creating this canvas. I learned that the little details make all the difference. I am extremely happy with the end result of my project.


//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//BACKGROUND COLOR

var sky = context.createLinearGradient(0,0,0,600);
sky.addColorStop(0,'rgba(235,243,144,0.6)' );
sky.addColorStop(1, "rgba(159,26,8,1)");


context.beginPath();
context.rect(0,0,800,600);
context.closePath();
 
context.fillStyle= sky;
context.fill();


//ISLAND
context.beginPath();
context.moveTo(0,300)
  context.quadraticCurveTo(100,350,300,400);
context.lineTo(0,400);
context.closePath();
context.fillStyle= 'rgba(245,203,111,1)';
context.fill();
context.strokeStyle= "rgba(245,203,111,1)";
context.stroke();

//PALM TREE-right
context.beginPath();
context.moveTo(100,350);
context.quadraticCurveTo(100,300,110,300);
context.lineTo(115,300);
context.quadraticCurveTo(100,305,112,350);
context.closePath();
context.strokeStyle= "rgba(245,203,111,1)";
context.fillStyle= 'rgba(245,203,111,1)';
context.fill();
context.stroke();

//PALM TREE LEAVES-right
context.beginPath();
context.moveTo(112,300);
context.quadraticCurveTo(90,290,80,290);
context.quadraticCurveTo(90,270,112,300);

context.quadraticCurveTo(110,280,95,270);
context.quadraticCurveTo(125,270,112,300);

context.quadraticCurveTo(120,276,140,280);
context.quadraticCurveTo(120,295,112,300);

context.quadraticCurveTo(140,280,150,300);
context.quadraticCurveTo(140,300,112,300);
context.closePath();
context.strokeStyle='rgba(88,191,47,1)';
context.fillStyle ='rgba(88,191,47,1)';
context.fill();
context.stroke();

//BACKGROUND WATER
context.beginPath();
context.moveTo(0,380);
context.quadraticCurveTo(50,410,70,390);
context.quadraticCurveTo(120,410,130,390);
context.quadraticCurveTo(200,410,210,380);
context.quadraticCurveTo(250,400,300,375);
context.quadraticCurveTo(325,390,650,335);
context.quadraticCurveTo(700,350,700,320);
context.quadraticCurveTo(730,348,750,310);
context.quadraticCurveTo(770,345,800,308);
context.lineTo(800,600);
context.lineTo(0,600);
context.closePath();
context.strokeStyle= 'rgba(41,138,203,1)'
context.fillStyle= 'rgba(41,138,203,1)'
context.fill();
context.stroke();

//BLUE PART OF WAVE

var bluewave = context.createRadialGradient(550,300,30,550,300,400);
bluewave.addColorStop(0, "rgba(227,246,246,1)");
bluewave.addColorStop(1, "rgba(91,187,219,1)");

context.beginPath();
context.moveTo(0,420);
context.quadraticCurveTo(50,450,50,420);
context.quadraticCurveTo(100,470,125,420);
context.quadraticCurveTo(175,455,220,420);
context.quadraticCurveTo(400,300,220,170);
context.lineTo(150,100);
context.lineTo(270,90);
context.quadraticCurveTo(600,40,750,600);
context.lineTo(0,600);
context.lineTo(0,420);
context.closePath();

context.strokeStyle= 'rgba(91,187,219,1)';
context.fillStyle= bluewave;
context.fill();
context.stroke();

//WHITE PART OF WAVE
context.beginPath();
context.moveTo(520,560);
context.quadraticCurveTo(700,10,150,100);
context.lineTo(150,130);
context.quadraticCurveTo(600,120,500,550);
context.closePath();
context.fillStyle="rgba(227,246,246,1)"
context.fill();
context.strokeStyle = 'black'
context.lineWidth=2
context.stroke();

//CUSTOM SHAPE
context.beginPath();
context.moveTo(200,100);
context.bezierCurveTo(210,60,170,40,150,70);
context.bezierCurveTo(160,30,100,30,90,60);
context.bezierCurveTo(60,35,40,45,55,85);
context.bezierCurveTo(0,100,0,120,50,140);

context.bezierCurveTo(20,150,20,230,65,170);
context.bezierCurveTo(70,230,100,230,110,175)
context.bezierCurveTo(150,250,170,230,160,170)
context.bezierCurveTo(200,200,240,200,220,130)

context.strokeStyle='black'
context.fillStyle='rgba(227,246,246,1)'
context.fill();
context.stroke();

//CUSTOM SHAPE DETAILS
context.beginPath();
context.moveTo(75,110);
context.quadraticCurveTo(100,130,120,110);
context.stroke();


context.beginPath();
context.moveTo(105,145);
context.quadraticCurveTo(125,170,140,150)
context.stroke();

context.beginPath();
context.moveTo(115,115);
context.quadraticCurveTo(145,150,160,115);
context.stroke();

//Wave Shading
context.beginPath();
context.moveTo(400,170);
context.quadraticCurveTo(500,150,500,230);
context.quadraticCurveTo(500,190,400,170);
context.fillStyle='rgba(164,195,208,1)';
context.fill();
context.strokeStyle='rgba(164,195,208,1)';
context.stroke();

context.beginPath();
context.moveTo(556,400);
context.quadraticCurveTo(560,100,300,110);
context.quadraticCurveTo(560,60,556,400);
context.fillStyle='rgba(63,155,191,0.2)'
context.fill();
context.strokeStyle='rgba(63,155,191,0.2)';
context.stroke();

context.beginPath();
context.moveTo(250,110);
context.quadraticCurveTo(300,100,325,110);
context.strokeStyle='black'
context.stroke();

context.beginPath();
context.moveTo(270,117);
context.quadraticCurveTo(335,115,370,120);
context.strokeStyle='black';
context.stroke();


//BLUE WAVE DETAILS
context.beginPath();
context.moveTo(400,250);
context.quadraticCurveTo(470,300,390,400);
context.quadraticCurveTo(420,380,405,420);
context.quadraticCurveTo(425,394,410,440);
context.quadraticCurveTo(500,300,425,220);
context.quadraticCurveTo(430,270,400,250);
context.fillStyle='rgba(148,212,229,0.7)';
context.fill();
context.strokeStyle="rgba(148,212,229,0.7)"
context.stroke();

context.beginPath();
context.moveTo(620,400);
context.quadraticCurveTo(625,470,575,525);
context.strokeStyle= 'rgba(41,138,203,1)'
context.stroke();

context.beginPath();
context.moveTo(610,397);
context.quadraticCurveTo(620,410,605,430);
context.stroke();

context.beginPath();
context.moveTo(580,450);
context.quadraticCurveTo(590,490,557,515);
context.stroke();

context.beginPath();
context.moveTo(630,460);
context.quadraticCurveTo(620,500,610,510);
context.stroke();

context.beginPath();
context.moveTo(330,350);
context.quadraticCurveTo(400,410,270,500);
context.quadraticCurveTo(340,410,330,350);
context.fillStyle='rgba(171,230,241,1)'
context.fill();
context.strokeStyle='rgba(171,230,241,1)'
context.stroke();

//TRIANGLES IN WATER
context.beginPath();
context.moveTo(30,540);
context.quadraticCurveTo(50,510,50,500);
context.quadraticCurveTo(50,510,80,540);
context.strokeStyle= 'rgba(41,138,203,1)'
context.stroke();
context.beginPath();
context.moveTo(50,500);
context.quadraticCurveTo(50,510,25,520);
context.stroke();

context.beginPath();
context.moveTo(160,490);
context.quadraticCurveTo(180,470,180,450);
context.quadraticCurveTo(180,470,200,490);
context.stroke();
context.beginPath();
context.moveTo(180,450);
context.quadraticCurveTo(180,470,205,470);
context.stroke();

//WHITE BEHIND SURFBOARD
context.beginPath();
context.moveTo(490,430);
context.bezierCurveTo(500,400,480,390,475,430);
context.bezierCurveTo(480,390,460,403,460,420);
context.bezierCurveTo(450,400,440,405,440,440);
context.bezierCurveTo(410,400,400,410,405,440);
context.lineTo(500,448);
context.bezierCurveTo(530,380,520,380,490,430);

context.fillStyle='rgba(227,246,246,1)';
context.fill();
context.strokeStyle='black'
context.stroke();

//SURFBOARD
context.beginPath();
context.moveTo(410,435);
context.quadraticCurveTo(460,449,510,445);
context.quadraticCurveTo(150,560,410,435);
context.closePath();
context.fillStyle='rgba(236,234,115,1)';
context.fill();
context.strokeStyle='black'
context.stroke();

//FRONT TRIANGLES
context.beginPath();
context.moveTo(410,560);
context.quadraticCurveTo(450,530,450,510);
context.quadraticCurveTo(450,530,465,555);
context.quadraticCurveTo(490,530,490,520);
context.quadraticCurveTo(490,530,510,555);
context.quadraticCurveTo(520,540,520,530);
context.quadraticCurveTo(520,540,540,560);
context.fillStyle='rgba(148,212,229,1)';
context.fill();
context.strokeStyle= 'rgba(41,138,203,1)'
context.stroke();

context.beginPath();
context.moveTo(540,560);
context.lineTo(410,560);
context.strokeStyle='rgba(148,212,229,1)';
context.stroke();

context.beginPath();
context.moveTo(450,510);
context.quadraticCurveTo(430,530,400,530);
context.strokeStyle= 'rgba(41,138,203,1)'
context.stroke();

context.beginPath();
context.moveTo(225,550);
context.quadraticCurveTo(250,530,250,520);
context.quadraticCurveTo(250,530,270,540);
context.stroke();
context.beginPath();
context.moveTo(250,520);
context.quadraticCurveTo(240,530,205,532);
context.stroke();

//BLUE WAVE SHADING
context.beginPath();
context.moveTo(250,400);
context.quadraticCurveTo(350,320,335,250);
context.quadraticCurveTo(370,320,250,400);
context.fillStyle='rgba(171,230,241,1)'
context.fill();
context.strokeStyle='rgba(171,230,241,1)'
context.stroke();

context.beginPath();
context.moveTo(264,200);
context.quadraticCurveTo(295,210,302,250);
context.quadraticCurveTo(310,210,264,200);
context.fill();
context.stroke();

context.beginPath();
context.moveTo(670,600);
context.quadraticCurveTo(700,400,520,160);
context.quadraticCurveTo(730,380,670,600);
context.fill();
context.stroke();

context.beginPath();
context.moveTo(415,210);
context.quadraticCurveTo(360,150,320,160);
context.quadraticCurveTo(345,150,415,210);
context.fill();
context.stroke();

//SURFER- left leg
context.beginPath();
context.moveTo(350,410);
context.quadraticCurveTo(380,436,350,470);
context.quadraticCurveTo(370,469,374,475);
context.quadraticCurveTo(383,480,390,472);
context.quadraticCurveTo(400,470,398,467);
context.quadraticCurveTo(365,465,375,450);
context.quadraticCurveTo(390,436,355,406);
context.closePath();
context.lineJoin='round'
context.fillStyle='rgba(220,207,161,1)';
context.fill();
context.strokeStyle='black'
context.stroke();

//SURFER-right leg
context.beginPath();
context.moveTo(371,403);
context.quadraticCurveTo(400,426,388,450);
context.quadraticCurveTo(400,446,414,455);
context.quadraticCurveTo(422,463,429,452);
context.quadraticCurveTo(443,445,413,443);
context.quadraticCurveTo(406,443,400,440);
context.quadraticCurveTo(410,426,379,401);
context.closePath();
context.fillStyle='rgba(220,207,161,1)'
context.fill();
context.stroke();

//TORSO
context.beginPath();
context.moveTo(344,382);
context.quadraticCurveTo(345,350,335,330);
context.quadraticCurveTo(300,335,285,320);

context.bezierCurveTo(277,290,305,290,298,309);
context.quadraticCurveTo(310,300,302,320);
context.quadraticCurveTo(345,316,348,319);
context.lineTo(367,319);
context.quadraticCurveTo(393,320,400,300);
context.bezierCurveTo(400,275,413,275,414,293);
context.quadraticCurveTo(428,280,417,302);
context.quadraticCurveTo(395,332,380,330);
context.quadraticCurveTo(390,380,342,402);
context.closePath();
context.fill();
context.lineJoin='round'
context.stroke();
//SHORTS
context.beginPath();
context.moveTo(350,420);
context.quadraticCurveTo(355,416,374,415);
context.quadraticCurveTo(370,400,363,390);
context.quadraticCurveTo(370,405,380,417);
context.quadraticCurveTo(393,408,400,410);
context.quadraticCurveTo(385,386,380,370);
context.quadraticCurveTo(360,380,343,380);
context.quadraticCurveTo(330,397,343,405);
context.closePath();
context.fillStyle='red'
context.fill();
context.stroke();

//HEAD
context.beginPath();
context.moveTo(325,300);
context.quadraticCurveTo(350,333,370,314);
context.bezierCurveTo(395,300,395,280,397,260);
context.lineTo(325,260);
context.quadraticCurveTo(320,290,325,300);
context.fillStyle='rgba(220,207,161,1)'
context.fill();
context.stroke();

//SMILE
context.beginPath();
context.moveTo(370,300);
context.quadraticCurveTo(350,315,340,305);
context.quadraticCurveTo(350,330,370,300);
context.fillStyle='white'
context.fill();
context.stroke();

//LEFT EYE
 context.beginPath();
context.arc(343, 280, 7, 0, 2 * Math.PI, false);
context.fillStyle='white'
context.fill();
context.stroke();

 context.beginPath();
      context.arc(343, 280, 3, 0, 2 * Math.PI, false);
context.fillStyle='blue'
context.fill();
context.stroke();
//RIGHT EYE
context.beginPath();
      context.arc(370, 280, 7, 0, 2 * Math.PI, false);
context.fillStyle='white'
context.fill();
context.stroke();

 context.beginPath();
      context.arc(370, 280, 3, 0, 2 * Math.PI, false);
context.fillStyle='blue'
context.fill();
context.stroke();

//NOSE
context.beginPath();
context.moveTo(360,296);
context.quadraticCurveTo(342,300,353,290);
context.stroke();

//HAIR
context.beginPath();
context.moveTo(320,270);
context.quadraticCurveTo(350,265,358,270);
context.quadraticCurveTo(370,265,400,270);
context.quadraticCurveTo(390,246,400,245);
context.quadraticCurveTo(385,245,385,255);
context.quadraticCurveTo(380,243,390,240);
context.quadraticCurveTo(375,240,365,255);
context.quadraticCurveTo(365,238,373,240);
context.quadraticCurveTo(360,233,351,255);
context.quadraticCurveTo(346,240,354,240);
context.quadraticCurveTo(340,245,340,255);
context.quadraticCurveTo(330,250,340,240);
context.quadraticCurveTo(320,260,320,270);

context.fillStyle='rgba(64,39,22,1)'
context.fill();
context.strokeStyle='rgba(64,39,22,1)'
context.stroke();

//PECKS
context.beginPath();
context.moveTo(347,345);
context.quadraticCurveTo(358,350,358,341);
context.stroke();

context.beginPath();
context.moveTo(365,345);
context.quadraticCurveTo(375,348,374,338);
context.stroke();

//TOES LEFT FOOT
context.beginPath();
context.moveTo(375,472);
context.lineTo(382,476);
context.strokeStyle='black'
context.stroke();

context.beginPath();
context.moveTo(380,470);
context.lineTo(387,475);
context.stroke();

context.beginPath();
context.moveTo(384,469);
context.lineTo(392,472);
context.stroke();

//TOES RIGHT FOOT
context.beginPath();
context.moveTo(424,448);
context.lineTo(432,451);
context.stroke();

context.beginPath();
context.moveTo(420,451);
context.lineTo(429,454);
context.stroke();

context.beginPath();
context.moveTo(417,453);
context.lineTo(426,457);
context.stroke();

//FINGERS LEFT HAND
context.beginPath();
context.moveTo(290,297);
context.lineTo(290,305);
context.stroke();

context.beginPath();
context.moveTo(293,296);
context.lineTo(293,305);
context.stroke();

context.beginPath();
context.moveTo(296,297);
context.lineTo(296,305);
context.stroke();

//FINGERS RIGHT HAND
context.beginPath();
context.moveTo(408,280);
context.lineTo(408,290);
context.stroke();

context.beginPath();
context.moveTo(405,281);
context.lineTo(405,290);
context.stroke();

context.beginPath();
context.moveTo(411,282);
context.lineTo(411,290);
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

Comments

Post a Comment

Popular posts from this blog

Portfo

-
Image
This is my portfolio that I created using InDesign. There are some things that I think worked really well, and other things that I will improve so I can use this portfolio in the future. After making this I really enjoyed seeing all my works together in one place. It's a fun way to see how my work has evolved and improved over the semester.
Read more

Thoughts on The History of Magnetic Recording

-
After reading The History of Magnetic Recording I began to think about modern day technology and how spoiled we are. As a young adult I have grown up with wireless internet, videos and movies at my fingertips anytime I want, music in my hands constantly, and I don't have to wait for any of it. The first sound recorder had a steel wire and now we can record sound, and videos, anywhere at anytime. The progress of technology amazes me. Without the advances of technology I would not be able to express my creativity in the ways that I do in Art 210! This reading was posted in 2004 and in the last section mentions that video cassettes will be with us for awhile. I wonder if this idea was revisited today if the writer would consider the time that we used video cassettes as a long time or if the evolution came faster than expected.
Read more

Animation

-
https://www.youtube.com/watch?v=a_4X6r2pIXo This is a YouTube link to my final animation project. This project used photos and videos of me doing my favorite things in my favorite places. The places in this animation include: Colorado, Vermont, Grand Cayman, and Malaysia. This 45 second animation was created using Photoshop. Each frame was created at 0.01 seconds. It uses many elements that I learned throughout my time in Digital Media class, including Rotoscopy. The audio for this project was created using Garage Band and includes sound effects, looped beats, and the Red Hot Chili Peppers song "Snow".
Read more