Erica Greskoviak's Digital Art: March 2016

ASCII

HTML coding may seem as a very tricky process at first. It took me a couple of class periods to get the hang of using Text Wrangler/HTML. The best thing that I did for this project was take notes for each code and their effects during classes. For example the coding for a circle, quadratic, and bezier curve. I had also taken pictures of professor Corrigan's work on the projector so I could see each step when reverting back to a reference. When making my turtle I started with the shell, and then moved onto the head following with each of the legs. I made each of the legs separately along with the tail. After each shape was created I then decided to fill in with color. I believe it is much easier to see with a line stroke before the whole shape is filled. Lastly I made the eyes and heart on the shell as the finishing shapes that served as detail.

ASCII Coding for Turtle Character

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//background//
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = '#66CCCC';
context.fill();

//head//
context.beginPath();
context.moveTo(425, 220);
context.bezierCurveTo(475, 200, 430, 120, 380, 160);
context.bezierCurveTo(370, 168, 350, 205, 385, 220);
context.closePath();
context.fillStyle = '#669900';
context.fill();

//left eye//
context.beginPath();
context.arc(390, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();

//right eye//
context.beginPath();
context.arc(422, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();

//tail//
context.beginPath();
context.moveTo(385,395);
context.quadraticCurveTo(400, 400, 390, 430);
context.quadraticCurveTo(415, 415, 415, 380);
context.closePath();
context.fillStyle = '#669900';
context.fill();

//legs//
//front left leg//
context.beginPath();
context.moveTo(290, 190);
context.quadraticCurveTo(350, 225, 350, 250);
context.quadraticCurveTo(295, 250, 290, 190);
context.fillStyle = '#669900';
context.fill();

//front right leg//
context.beginPath();
context.moveTo(510, 190);
context.quadraticCurveTo(500, 250, 450, 250);
context.quadraticCurveTo(425, 250, 510, 190);
context.fillStyle = '#669900';
context.fill();

//bottom left leg//
context.beginPath();
context.moveTo(375,350);
context.quadraticCurveTo(380, 400, 330, 415);
context.quadraticCurveTo(380, 300, 375, 390);
context.fillStyle = '#669900';
context.fill();

//bottom right leg//
context.beginPath();
context.moveTo(425,350);
context.quadraticCurveTo(430, 400, 470, 415);
context.quadraticCurveTo(480, 400, 425, 350);
context.fillStyle = '#669900';
context.fill();

//shell//
context.beginPath();
context.moveTo(400, 210);
context.bezierCurveTo(295, 225, 295, 375, 400, 400);
context.bezierCurveTo(505, 375, 505, 225, 400, 210);
context.closePath();
context.fillStyle = '#006600';
context.fill();

//heart//
context.beginPath();
context.moveTo(400, 285);
context.bezierCurveTo(350, 240, 350, 275, 400, 350);
context.bezierCurveTo(475, 250, 425, 250, 400, 285);
context.fillStyle = '#FF99CC';
context.fill();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Erica Greskoviak's Digital Art

Sunday, March 20, 2016

Saturday, March 19, 2016

Tuesday, March 1, 2016