Canvas ( Blog 3 )

     For this project, I decided to code a pig. The reasoning behind it is because of my younger brother loved Peppa pig as a little kid. I also am a very big fan of pigs and think they are so adorable...Therefore I thought that coding a pig would be a perfect idea. I was debating on whether to do an elephant or a pig and was trying to code both, but finally chose to code a pig because of the fact that I was able to play around with it more. I did not think I would ever be capable of coding something, especially something I liked. I believe that with time and focus I could have done lots of other cool things as well. 

    This code took me about 12 hours due to the fact that I had never done coding and was not used to the system. I was having troubles moving the triangles and having them be even due to the fact that there are three different points in which I would have to move. Dreamweaver is definately new to me and it took me a couple days to start getting used to it. By the end of this project I got used to coding and to moving things around, which made the final touches very easy to create. I enjoyed learning about coding and how it works. I am not very big on technology therefore I believe coding an animal was a very big accomplishment for me. 



Picture of final: 




Picture of Inspiration: 



Picture of Sketch: 




Code: 


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

<style type="text/css">



body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: rgba(251,241,175,1.00);

}



body {

background-color: rgba(6,6,6,1.00);

}



#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(255,255,255,1.00); }



</style>



</head>


<body>


<canvas id="myCanvas" width="800" height="600"></canvas>


<script>



var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');


 


 


 


 


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

    

 ////// Background with Quad curve

for (var yay=-1500; yay<canvas.height; yay+=7) {


var startX = 1000;

var startY = yay-2000;

var endX = canvas.width;

var endY = canvas.height;

var cpointX = yay+200;

var cpointY = -yay;

context.beginPath();

context.moveTo(startX, startY);

//context.lineTo(endX, endY);

context.quadraticCurveTo(cpointX, cpointY, endX, endY);

//context.closePath();

context.strokeStyle = "rgba(158,233,186,1.00)"; /// this is stroke color of the repeat

context.fillStyle = "rgba(101,177,239,1.00)"; ///this is background color

context.fill();

context.lineWidth =   3;  /// play with the width to get diferent effects

context.stroke();


}





//// body 

 

  var centerX = 237;

        var centerY = 260;

        var radius = 145;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "rgba(255,169,249,1.00)";

        context.stroke();

context.fillStyle = "rgba(253,177,227,1.00)";

context.fill();

////head

 

  var centerX = 237;

        var centerY = 215;

        var radius = 100;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "hsla(305,81%,77%,1.00)";

        context.stroke();

context.fillStyle = "rgba(246,189,226,1.00)";

context.fill();


////eye left

 

  var centerX = 187;

        var centerY = 190;

        var radius = 27;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 4;

        context.strokeStyle = "black";

        context.stroke();

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

context.fill();

 

  //eyeball left




var centerX = 196;


var centerY = 195;


var radius = 8;




var startX = 300;


var startY = 200;


var startRadius = 10;


var endX = 400;


var endY = 300;


var endRadius = 200;






context.beginPath();


context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);


var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 


grd.addColorStop(0, 'rgba(102,209,215,1.00)');


grd.addColorStop(1, 'rgba(26,30,30,1.00)');


context.fillStyle = grd;


context.fill();


context.stroke();


 

////eye right

 

  var centerX = 287;

        var centerY = 190;

        var radius = 27;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 4;

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

        context.stroke();

context.fillStyle = "rgba(255,249,254,1.00)";

context.fill();

   //eyeball right




var centerX = 298;


var centerY = 195;


var radius = 8;




var startX = 300;


var startY = 200;


var startRadius = 10;


var endX = 400;


var endY = 300;


var endRadius = 200;






context.beginPath();


context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);


var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 


grd.addColorStop(0, 'rgba(0,0,0,1.00)');


grd.addColorStop(1, 'rgba(26,30,30,1.00)');


context.fillStyle = grd;


context.fill();


context.stroke();


 



////nose 1

 

  var centerX = 248;

        var centerY = 230;

        var radius = 11;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 4;

        context.strokeStyle = "black";

        context.stroke();

////nose 2

 

  var centerX = 230;

        var centerY = 230;

        var radius = 11;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 4;

        context.strokeStyle = "black";

        context.stroke();

//// nose cover 1

context.beginPath();

context.rect(235,228,7,9); // x,y,w,h

context.closePath();

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

context.fill();

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

context.stroke();

//// nose cover 2

context.beginPath();

context.rect(235,222,7,9); // x,y,w,h

context.closePath();

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

context.fill();

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

context.stroke();


//nostril 1



var centerX = 230;


var centerY = 230;


var radius = 7;




var startX = 300;


var startY = 200;


var startRadius = 10;


var endX = 400;


var endY = 300;


var endRadius = 200;






context.beginPath();


context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);


var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 


grd.addColorStop(0, 'rgba(0,0,0,1.00)');


grd.addColorStop(1, 'rgba(26,30,30,1.00)');


context.fillStyle = grd;


context.fill();


context.stroke();



 //nostril 2



var centerX = 250;


var centerY = 230;


var radius = 7;




var startX = 300;


var startY = 200;


var startRadius = 10;


var endX = 400;


var endY = 300;


var endRadius = 200;






context.beginPath();


context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);


var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 


grd.addColorStop(0, 'rgba(0,0,0,1.00)');


grd.addColorStop(1, 'rgba(1,1,1,1.00)');


context.fillStyle = grd;


context.fill();


context.stroke();

//besier curve tail


 


// starting point coordinates


var x = 450;


var y = 130;




// control point 1 coordinates ( magnet )


var cpointX1 = canvas.width / 2;


var cpointY1 = canvas.height / 5 + 300;




// control point 2 coordinates ( magnet )


var cpointX2 = canvas.width / 1.0;


var cpointY2 = canvas.height / 4 - 80; 




// ending point coordinates 


var x1 = 380;


var y1 = 300;






context.beginPath();


context.moveTo(x, y);


context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);




context.lineWidth = 5;


context.strokeStyle = "rgba(255,165,250,1.00)";


context.lineCap = 'round' 


context.stroke();




//context.lineCap = Lines can have one of three cap styles: butt, round, or square


// lineCap property must be set before calling stroke()


 

//triangle tail



context.beginPath(); // begin a shape


 


context.moveTo(430,110); // point A coordinates



context.lineTo(470,140); // point B coords



context.lineTo(500,90); // point C coords



context.closePath(); // close the shape



context.lineWidth = 5; // you can use a variable that changes wherever you see a number



context.lineJoin = "round";



context.strokeStyle = "rgba(251,170,220,1.00)"; // Reb Green Blue Alpha



context.stroke();



context.fillStyle = "rgba(239,163,235,1.00)";



context.fill();


/// left leg


var x=186;


var y=400;


var width = 40


var height= 40;




context.beginPath();


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


context.lineWidth = 1;


context.fillStyle = 'rgba(243,175,225,1.00)';


context.fill();


context.stroke(); 


/// right leg


var x=245;


var y=400;


var width = 40


var height= 40;




context.beginPath();


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


context.lineWidth = 1;


context.fillStyle = 'rgba(243,175,225,1.00)';


context.fill();


context.stroke(); 


///  Left ear


// TRIANGLE



context.beginPath(); // begin a shape


 


context.moveTo(170,90); // point A coordinates



context.lineTo(150, 143); // point B coords



context.lineTo(190,120); // point C coords



context.closePath(); // close the shape



context.lineWidth = 1; // you can use a variable that changes wherever you see a number



context.lineJoin = "round";



context.strokeStyle = "rgba(255,0,155,1.00)"; // Reb Green Blue Alpha



context.stroke();



context.fillStyle = "rgba(229,150,237,1.00)";



context.fill();


///  right ear


// TRIANGLE



context.beginPath(); // begin a shape


 


context.moveTo(320,89); // point A coordinates



context.lineTo(336, 150); // point B coords



context.lineTo(300,124); // point C coords



context.closePath(); // close the shape



context.lineWidth = 1; // you can use a variable that changes wherever you see a number



context.lineJoin = "round";



context.strokeStyle = "rgba(255,0,155,1.00)"; // Reb Green Blue Alpha



context.stroke();



context.fillStyle = "rgba(229,150,237,1.00)";



context.fill();




 

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


 


 




// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION

var credits = "valentina, FMX 210, SP, 2022";

context.beginPath();

context.font = 'bold 10px Arial';

context.fillStyle = "rgba(0,0,0,1)";

context.fillText(credits, 20, 550);

context.closePath();


</script>



</body>

</html>


Comments

Post a Comment

Popular posts from this blog

Somewhere

Image
  I decided to photoshop myself in to my favorite TV show. Friends! This show was the first thing that popped into my head when thinking about this project.  I quickly began my search for a good Friend’s snapshot that I could use for this project. Once I had found a picture from the show, I began searching for a picture of myself to then incorpo- rate into the project. I used several different tools in order to cut myself out of one frame and be placed into another.
Read more

Photoshop HW 1

 https://www.youtube.com/watch?v=OnSAnAolpmI This video explains step by step how to get around photoshop. The video begins from scratch therefore it is very easy to follow along and create cool projects.  https://www.youtube.com/watch?v=IyR_uYsRdPs This second video is very long but separates each new lesson. The video does a very good job of explaining how photoshop works and all of the tools that it includes and how they work.  https://www.youtube.com/watch?v=61mkx_OV61s This third video is from more of a vlogger... it is more fun and loose. He shows us how to change images from back and white to color or how to only change certain parts. This video is very useful when the time comes to select certain parts of an image and change certain things in the project. 
Read more

Illustrator

 https://www.youtube.com/watch?v=Ib8UBwu3yGA This video is directed by Dan Scott. He made a video for those who are new to Adobe just like me. he went through how to make jsut about anything. From learning how to cut and push things to creating profressional artwork. He made around 12 videos on different topics such as drawing with shapes and lines, grouping and arranging, how to make patterns, and many more.  https://www.youtube.com/watch?v=AinkCNooh2A This video is a tutorial on how to get started with Adobe illustrator, also for beginners. He taught me how to change sizes in the begining when opening a new document. He mentioned that several people work outside the artboard... He focused on the artboard quite a lot.  https://www.youtube.com/watch?v=zDbk3-Fm0gc This video focused on how to select and deselect certain shapes. He showed me how to chaneg the colors and or how to unlock different options. I learned different shortcuts and how to select individual objects and how to lock
Read more