Full Code:
<!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); // x,y,w,h
context.fillStyle = 'black';
context.fill();
context.closePath();
var gradient3 = context.createLinearGradient(0, 0, 800, 600);
gradient3.addColorStop(0, 'white');
gradient3.addColorStop(1, 'rgba(50, 50, 250, 0.5)');
context.fillStyle = gradient3;
context.fillRect(0, 0, 800, 600);
context.closePath();
// egg
context.beginPath();
context.arc(200,400,150,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(10,0,70)';
context.fillStyle = 'rgb(10,0,70)';
context.shadowColor = "rgba(255,255,255,1)";
context.shadowBlur = 20;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.stroke();
context.fill();
/// sperm 1
context.beginPath();
context.moveTo(200,147);
context.bezierCurveTo(150,10,400,10,350,50);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(200,150);
context.quadraticCurveTo(175,175,200,200);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(200,150);
context.quadraticCurveTo(225,175,200,200);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
/// sperm 2
context.beginPath();
context.moveTo(100,47);
context.bezierCurveTo(50,50,50,10,20,20);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(125,75,100,50);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(75,75,100,50);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
//// sperm 3
context.beginPath();
context.moveTo(320,300);
context.quadraticCurveTo(340,275,350,300);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(320,300);
context.quadraticCurveTo(340,325,350,300);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(350,305);
context.bezierCurveTo(400,200,400,450,550,300);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
/// sperm 4
context.beginPath();
context.moveTo(600,200);
context.quadraticCurveTo(570,200,575,225);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(600,200);
context.quadraticCurveTo(610,220,575,225);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(600,203);
context.bezierCurveTo(650,100,700,350,750,200);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
/// sperm 5
context.beginPath();
context.moveTo(650,450);
context.quadraticCurveTo(665,435,685,450);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(650,450);
context.quadraticCurveTo(665,465,685,450);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(650,450);
context.lineTo(575,450);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(575,450);
context.lineTo(575,425);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//// texture
context.beginPath();
context.arc(150,400,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.shadowColor = "rgba(60,0,80,1)";
context.shadowBlur = 20;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(100,450,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(100,450,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
// PURPLE TRIANGLE with transparency
context.beginPath(); // begin a shape
context.moveTo(200,250); // point A coordinates
context.lineTo(340, 450); // point B coords
context.lineTo(60,450); // 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(255,0,0,1)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(89,50,140,1)";
context.fill();
/// title
var text = "The Creation of Life, FMX 210 2019";
context.font = 'bold 12px Helvetica';
context.fillStyle = "rgba(255,255,255,1)"; // change the color here
context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
context.shadowBlur = 12;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillText(text, 500, 550);
/// rgba meaning A pixel with A=1.0 is "solid." A=0.0 is invisible. A=0.5 is translucent
// false is default, true is counterclockwise, doesnt mean much for you
//Heart
//Bezier Curve Variables
var Ax = 200;
var Ay = 350;
var Bx = 200;
var By = 450;
var control1x = 100;
var control1y = 300;
var control2x = 100;
var control2y = 300;
var control3x = 300;
var control3y = 300;
var control4x = 300;
var control4y = 300;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Image for Inspiration: austinfertility.com
Hand Drawn Concept Art:
Project Background:
I am a creative writer and thinker but do not have an innate ability to draw or design. I drew inspiration from my first college degree in biology to find something in nature on a microscopic level. I found the image above and it had nice shapes and colors that could help me begin a Canvas project.
It took me about 10 hours total from drawing to Canvas image. I found HTML5 to be very challenging and not intuitive due to its many idiosyncratic syntax rules that are not easy to learn. Thankfully I was able to cut and paste existing language from class and other sources to help the process. I do have a newly acquired appreciation for web designers and was glad to learn to basics of HTML5 for Canvas to share with my Marketing students.
Concept Statement:
What could be more inspiring than creating art from the actual creation of life? I took the basic image and drew some concept art on graph paper - see above. I created a gradient rectangle with dark purple on the bottom right to symbolize infinity. The gradient gradually lightens to a bright white in the top left corner symbolizing divine light. The circle is the human ovum but is symbolic of everlasting life, as a circle has no beginning or end. I inserted a purple triangle inside the circle to symbolize the trinity, and within the triangle I placed a heart to symbolize Agape love, which is at the core of creation. I created four spermatozoon with one facing the apex of the triangle which approaches creation through faith, and a second approaching the right top of the heart to symbolize human emotional love as a path to spirituality. I created one spermatozoon with an L shaped tale to represent the ambivalence of free will as this shape would make the spermatozoon "swim" in circles, which can symbolize being lost before finding oneself in the divine light.
No comments:
Post a Comment