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

About Me ( Blog 1 )

Image
            My name is Valentina Kunzendorf and I am a current freshmen at the University of Tampa. My family is from Argentina but I was born in Miami, FL. Miami has always been my home and I will always love and appreciate it. all my friends that I have made in Miami have all become very important people in my life. 3 of them which ended up moving to Tampa as well. These 3 friends of mine have been in my life since I was born, therefore having them close is always a nice reminder of home.       I decided to join the class FMX this semester not only because of the great professor reviews, but also because I thought it would be a very good course to learn more about computers as well as how to advertise different companies and just get an overall gist of the course. I do admit to being very lost when it comes to computers and technology, therefore I know this class will be a challeng...
Read more

BW to color

Image
  This project was using the adobe color wheel to transform a black and white image to 6 different color schemes. This was hard when it came to separating the colors evenly and allowing the new image to pop and look fun. My favorite is definitely the first one due to all the colors.
Read more

Self Portrait

Image
  For my self portrait, I used a picture that I took back when I was living in Miami. I really like the picture because it has lots of sun and nature surrounding it. This project took me about four days to complete due to the fact that I incorporated so many shadows and different colors to my hair. Each color is a different layer due to not being able to incorporate several colors in one shape.  My poster says "Do what makes your soul shine". The reason why I chose that quote is because sometimes we forget that we should be focusing on bettering ourselves and making ourselves happy. I really enjoy reading that quote on my day to day life because it motivates me and allows me to enjoy the little things in life. 
Read more