Digital Arts Blog: March 2015

I really enjoyed this project and this form of digital arts. I enjoyed working on this project because it was very technical and took time to do all the correct math to get a symmetrical image. I took me a lot of tries to get the shape of the hamsa hand, but I think that it turned out to be a great image for a first time HTML5 worker. After making the shape of the hand, I started working on the evil eye graphic. That too took time to make the smaller dots above the eye. I then decided to add in the word Namaste and a quote that I am in love with. I feel that with more time I could have figured out how to do all the detail in the hamsa hand above, but I tried, and it was very difficult and time consuming. As I continue on with this I will wok on the hand and upload a new graphic to my blog.

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

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

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

var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#FFE4C4');
grd.addColorStop(1, '#CD5C5C');
context.fillStyle = grd;
context.fill();

context.beginPath();
context.moveTo(400, 25);
context.bezierCurveTo(390, 60, 350, 60, 350, 100);
context.bezierCurveTo(310, 75, 275, 100, 275, 300);
context.bezierCurveTo(225, 290, 225, 340, 160, 350);
context.bezierCurveTo(250, 350, 200, 500, 400, 575);
context.bezierCurveTo(600, 550, 550, 350, 640, 350);
context.bezierCurveTo(575, 340, 575, 290, 525, 300);
context.bezierCurveTo(525, 100, 485, 75, 450, 100);
context.bezierCurveTo(450, 60, 410, 60, 400, 25);
context.lineWidth = 5;
context.fillStyle = '#FF99FF' ;
context.fill();
context.strokeStyle = 'black';
context.stroke();

var grd = context.createRadialGradient(238, 50, 100, 238, 150, 300);
grd.addColorStop(.3, '#FF99FF');
grd.addColorStop(.7, '#FF00FF');
grd.addColorStop(1, '#00FA9A');

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

context.beginPath();
context.arc(400, 425, 28, 0, 2 * Math.PI, false);
context.fillStyle = '#33FFFF' ;
context.fill();
context.beginPath();
context.arc(400, 425, 14, 0, 2 * Math.PI, false);
context.fillStyle = 'white' ;
context.fill();
context.beginPath();
context.arc(400, 425, 7, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.moveTo(330, 445);
context.quadraticCurveTo(400, 475, 475, 445);
context.lineWidth = 3;
context.strokeStyle = 'black' ;
context.stroke();
context.beginPath();
context.arc(345, 430, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(350, 414, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(360, 400, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(373, 388, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(387, 381, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(400, 378, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(413, 381, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(427, 388, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(440, 400, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(450, 414, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(455, 430, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();

context.font = '60pt Calibri';
context.fillStyle = 'black';
context.fillText('NAMASTE', 239, 360);

context.font = '20pt Calibri';
context.fillStyle = 'black';
context.fillText('A thousand moments that I had taken for granted---mostly', 90, 600);
context.fillText('because I had assumed that there would be a thousand more.', 90, 620);

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

};

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

Digital Arts Blog

Sunday, March 29, 2015

Magazine Cover

Monday, March 23, 2015

Self Insertion

Wednesday, March 18, 2015

ASCII Artist Statement

ASCII Project

Wednesday, March 4, 2015

HTML stick figure

Blog Archive