The Pedigree of Honey- Canvas Project
"The pedigree of Honey
Does not concern the bee;A clover, any time, to himIs aristocracy."
- Emily Dickinson, The Pedigree of Honey
I have always had a soft spot for bees. They are endlessly fascinating creatures without whom
our world would not survive. Graceful, yet sturdy, and overall quite charming, they are truly the
bee's knees, making them an excellent choice for an artistic subject. In my piece, "The Pedigree of
Honey," (named after the Emily Dickinson poem of the same title) I utilized a variety of shapes
hues to create a peaceful yet fun scene depicting a lone bee against a backdrop of glistening
honeycombs surrounded by flora.
While contemplating my sketch, I knew I wanted to play around with different gradients and utilize them to create engagement in a scene that might otherwise appear bland. This can be seen
clearly in the more dramatic coloring of the honeycombs as well as the slight shading on each of
the flowers. I also felt that in using these gradients and softer colors, I could create contrast
between the background and the focal point of the bee which is in much more solid hues.
In addition, I utilized increased opacity in the lines of the honeycombs to allow for more texture to
shine through, engaging the viewers even further.
This piece comprises both blatantly geometric (the bees and the honeycombs) and organic
(flowers, leaves) shapes to create contrast and complexity. This technique also creates a balance
that allows the work to be comprised of a plethora of different shapes without appearing to
look too busy.
The non-regular hexagons in the back were created by using simple shape code, and the lines in
between were created using basic line code. The flowers, inspired from a 2017 student's blog,
were created with Bezier curves with a gradient fill and a simple circle placed on top for the center.
The leaves were two connected quadratic curves, or 'swooshes.' The bee himself deviated
slightly from the original sketch. In my final project, I used lines to create a simple baseline yellow
shape for the body and then added thick black lines on top for the stripes. The antenna and stinger
are both lines, and the head was made from an oval. The wing shapes are created from overlapping
quadratic curves that I raised the opacity on to get a bug's-wing effect.
While this piece was overall not overly complex to create, the hardest part was making the leaf
forms and ensuring that the space on the canvas was used in the way that I had envisioned.
Overall, "The Pedigree of Honey" took me approximately 11 hours to create. Unfortunately, in
an effort to clean up my computer, my file was permanently deleted. By the time I re-create my
work (no, I'm not crying while typing this out and thinking about having to redo it all, why
would you think that?) I estimate I will have spend about 21 hours on this project, but I will
update the actual numbers once I finish.
In the meantime, enjoy my original sketch as a sneak preview:UPDATE: 9.5 hours of work later, I have redone my project! Here she is, in all her glory, as
well as the code that I created to make it in case anyone wants to copy elements for their own
projects in the future.
The Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </title>
<!-- import external .js scripts here -->
<!-- <script type="text/javascript" src="#" ></script> -->
<!-- modify CSS properties here -->
<style type="text/css">
body,td,th {
font-family: Monaco, "Courier New", "monospace";
font-size: 14px;
color: rgba(255,255,255,1);
}
body {
background-color: rgba(0,0,0,1);
}
#container {
position: relative;
text-align: left;
width: 95%;
height: 800px;
}
#fmxCanvas {
position: relative;
background-color:rgba(255,255,255,1);
border: rgba(255,255,255,1) thin dashed;
cursor: crosshair;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<!-- START HTML CODE HERE -->
<canvas id="fmxCanvas" width="800" height="600"></canvas>
<div id="display"></div>
<!-- FINISH HTML CODE HERE -->
</div>
<script>
///////////////////////////////////////////////////////////////////////
// DECLARE requestAnimFrame
var rAF = window.requestAnimFrame ||
window.mozRequestAnimFrame ||
window.webkitRequestAnimFrame ||
window.msRequestAnimFrame;
var fps = 30;
window.requestAnimFrame = (
function(callback) {
return rAF ||
function(callback) {
window.setTimeout(callback, 1000 / fps);
};
})();
///////////////////////////////////////////////////////////////////////
// DEFINE GLOBAL VARIABLES HERE
var canvas;
var context;
canvas = document.getElementById("fmxCanvas");
context = canvas.getContext("2d");
var canvas1;
var context1;
canvas1 = document.createElement("canvas");
context1 = canvas1.getContext("2d");
canvas1.width = canvas.width;
canvas1.height = canvas.height;
var display;
display = document.getElementById('display');
var counter;
///////////////////////////////////////////////////////////////////////
// DEFINE YOUR GLOBAL VARIABLES HERE
///////////////////////////////////////////////////////////////////////
// CALL THE EVENT LISTENERS
window.addEventListener("load", setup, false);
//////////////////////////////////////////////////////////////////////
// ADD EVENT LISTENERS
canvas.addEventListener("mousemove", mousePos, false);
//////////////////////////////////////////////////////////////////////
// MOUSE COORDINATES
var stage, mouseX, mouseY;
function mousePos(event) {
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
}
/////////////////////////////////////////////////////////////////////
// INITIALIZE THE STARTING FUNCTION
function setup() {
/////////////////////////////////////////////////////////////////////
// DECLARE STARTING VALUES OF GLOBAL VARIABLES
counter = 0;
mouseX = canvas.width/2;
mouseY = canvas.height/2;
/////////////////////////////////////////////////////////////////////
// CALL SUBSEQUENT FUNCTIONS, as many as you need
clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS
draw(); // THIS IS WHERE EVERYTHING HAPPENS
}
////////////////////////////////////////////////////////////////////
// CLEAR THE CANVAS FOR ANIMATION
// USE THIS AREA TO MODIFY BKGD
function clear() {
context.clearRect(0,0,canvas.width, canvas.height);
context1.clearRect(0,0,canvas.width, canvas.height);
// clear additional contexts here if you have more than canvas1
}
////////////////////////////////////////////////////////////////////
// THIS IS WHERE EVERYTHING HAPPENS
function draw() {
counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS
if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER
clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS
////////////////////////////////////////////////////////////////////
// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE
/////////Background
var gradient4 = context.createLinearGradient(0, 0, 800, 600);
gradient4.addColorStop(0, '#FDD605');
gradient4.addColorStop(0.2, 'rgba(251,142,195,0.84)');
gradient4.addColorStop(0.4, 'rgba(239,191,107,0.90)');
gradient4.addColorStop(0.6, 'rgba(249,151,26,0.84)');
gradient4.addColorStop(0.8, 'rgba(239,168,14,0.92)');
gradient4.addColorStop(1, 'rgba(253,123,15,0.93)');
context.fillStyle = gradient4;
context.fillRect(0, 0, 800, 600);
///HC1
context.beginPath();
context.moveTo(0,150);
context.lineTo(75,75);
context.lineTo(150,150);
context.lineTo(150,225);
context.lineTo(75,300);
context.lineTo(0,225);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC2
context.beginPath();
context.moveTo(150,150);
context.lineTo(225,75);
context.lineTo(300,150);
context.lineTo(300,225);
context.lineTo(225,300);
context.lineTo(150,225);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC3
context.beginPath();
context.moveTo(300,150);
context.lineTo(375,75);
context.lineTo(450,150);
context.lineTo(450,225);
context.lineTo(375,300);
context.lineTo(300,225);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC4
context.beginPath();
context.moveTo(450,150);
context.lineTo(525,75);
context.lineTo(600,150);
context.lineTo(600,225);
context.lineTo(525,300);
context.lineTo(450,225);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC5
context.beginPath();
context.moveTo(600,150);
context.lineTo(675,75);
context.lineTo(750,150);
context.lineTo(750,225);
context.lineTo(675,300);
context.lineTo(600,225);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC5.5
context.beginPath();
context.moveTo(750,150);
context.lineTo(825,75);
context.lineTo(900,150);
context.lineTo(900,225);
context.lineTo(825,300);
context.lineTo(750,225);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC6
context.beginPath();
context.moveTo(0,450);
context.lineTo(75,375);
context.lineTo(150,450);
context.lineTo(150,525);
context.lineTo(75,600);
context.lineTo(0,525);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC7
context.beginPath();
context.moveTo(150,450);
context.lineTo(225,375);
context.lineTo(300,450);
context.lineTo(300,525);
context.lineTo(225,600);
context.lineTo(150,525);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC8
context.beginPath();
context.moveTo(300,450);
context.lineTo(375,375);
context.lineTo(450,450);
context.lineTo(450,525);
context.lineTo(375,600);
context.lineTo(300,525);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC9
context.beginPath();
context.moveTo(450,450);
context.lineTo(525,375);
context.lineTo(600,450);
context.lineTo(600,525);
context.lineTo(525,600);
context.lineTo(450,525);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC10
context.beginPath();
context.moveTo(600,450);
context.lineTo(675,375);
context.lineTo(750,450);
context.lineTo(750,525);
context.lineTo(675,600);
context.lineTo(600,525);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HC10.5
context.beginPath();
context.moveTo(750,450);
context.lineTo(825,375);
context.lineTo(900,450);
context.lineTo(900,525);
context.lineTo(825,600);
context.lineTo(750,525);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
context.fillStyle = "rgba(234,201,10,0.64)";
context.fill();
///HCL1
context.beginPath();
context.moveTo(75,0);
context.lineTo(75,75);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL2
context.beginPath();
context.moveTo(225,0);
context.lineTo(225,75);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL3
context.beginPath();
context.moveTo(375,0);
context.lineTo(375,75);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL4
context.beginPath();
context.moveTo(525,0);
context.lineTo(525,75);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL5
context.beginPath();
context.moveTo(675,0);
context.lineTo(675,75);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL6
context.beginPath();
context.moveTo(75,300);
context.lineTo(75,375);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL7
context.beginPath();
context.moveTo(225,300);
context.lineTo(225,375);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL8
context.beginPath();
context.moveTo(375,300);
context.lineTo(375,375);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL9
context.beginPath();
context.moveTo(525,300);
context.lineTo(525,375);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
///HCL10
context.beginPath();
context.moveTo(675,300);
context.lineTo(675,375);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(228,145,8,0.87)";
context.stroke();
// flower 1
var flower = context.createLinearGradient(0,100,200,400);
flower.addColorStop(0,"rgba(231,231,217,1.00)");
flower.addColorStop(.25,"rgba(247,247,247,1)");
flower.addColorStop(1,"rgba(255,255,255,1)");
context.beginPath();
context.moveTo(150,100);
context.bezierCurveTo(-100,-200,-100,100,140,110);
context.bezierCurveTo(-100,70,-50,300,145,115);
context.bezierCurveTo(40,180,80,500,170,115);
context.bezierCurveTo(300,380,330,150,170,100);
context.bezierCurveTo(330,-50,150,-100,150,100);
context.closePath();
context.fillStyle=flower;
context.fill();
context.lineWidth = 5;
context.strokeStyle="rgba(241,239,203,1)";
context.stroke();
///// flower 2
var flower2 = context.createLinearGradient(650,300,700,700);
flower2.addColorStop(0,"rgba(231,231,217,1.00)");
flower2.addColorStop(.25,"rgba(247,247,247,1)");
flower2.addColorStop(1,"rgba(255,255,255,1)");
context.beginPath();
context.moveTo(750,550);
context.bezierCurveTo(500,250,500,550,740,560);
context.bezierCurveTo(500,520,550,750,745,565);
context.bezierCurveTo(640,630,630,950,760,580);
context.bezierCurveTo(840,850,890,600,770,565);
context.bezierCurveTo(1010,625,970,450,765,550);
context.bezierCurveTo(930,400,750,250,750,550);
context.closePath();
context.fillStyle=flower2;
context.fill();
context.lineWidth = 5;
context.strokeStyle="rgba(241,239,203,1)";
context.stroke();
/////FC2
var centerX = canvas.width / 1.05;
var centerY = canvas.height / 1.05;
var radius = 32;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = "#D3C71D";
context.stroke();
context.fillStyle="rgba(225,216,21,1)";
context.fill();
//flower 3
var flower3 = context.createLinearGradient(650,500,400,100);
flower3.addColorStop(0,"rgba(231,231,217,1.00)");
flower3.addColorStop(.25,"rgba(222,216,199,1.00)");
flower3.addColorStop(1,"rgba(255,255,255,1)");
context.beginPath();
context.moveTo(650,100);
context.bezierCurveTo(400,-200,400,100,640,110);
context.bezierCurveTo(400,70,450,300,645,115);
context.bezierCurveTo(540,180,530,500,660,130);
context.bezierCurveTo(740,400,790,150,670,115);
context.bezierCurveTo(910,175,870,0,665,100);
context.bezierCurveTo(830,-150,650,-200,650,100);
context.closePath();
context.fillStyle=flower3;
context.fill();
context.lineWidth = 5;
context.strokeStyle="rgba(241,239,203,1)";
context.stroke();
/////FC3
var centerX = canvas.width / 1.22;
var centerY = canvas.height / 5.3;
var radius = 30;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = "#D3C71D";
context.stroke();
context.fillStyle="rgba(225,216,21,1)";
context.fill();
/////FC1
var centerX = canvas.width / 5.3;
var centerY = canvas.height / 6;
var radius = 30;
var startang = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = "#D3C71D";
context.stroke();
context.fillStyle="rgba(225,216,21,1)";
context.fill();
/////////BEE
////Body
context.beginPath();
context.moveTo(275,350);
context.lineTo(325,410);
context.lineTo(425,410);
context.lineTo(450,350);
context.lineTo(425,290);
context.lineTo(325,290);
context.closePath();
context.lineWidth = 10;
context.lineJoin = "round";
context.strokeStyle = "rgba(6,0,0,0.86)";
context.stroke();
context.fillStyle = "rgba(225,216,21,1)";
context.fill();
///BodyL1
context.beginPath();
context.moveTo(451,350);
context.lineTo(465,350);
context.closePath();
context.lineWidth = 5;
context.lineJoin = "round";
context.strokeStyle = "rgba(6,0,0,0.76)";
context.stroke();
///Antenna
context.beginPath();
context.moveTo(260,330);
context.lineTo(225,310);
context.closePath();
context.lineWidth = 5;
context.lineJoin = "round";
context.strokeStyle = "rgba(6,0,0,0.76)";
context.stroke();
context.beginPath();
context.moveTo(260,370);
context.lineTo(225,390);
context.closePath();
context.lineWidth = 5;
context.lineJoin = "round";
context.strokeStyle = "rgba(6,0,0,0.76)";
context.stroke();
////BodyL1
context.beginPath();
context.moveTo(328,303);
context.lineTo(328,400);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(6,0,0,0.76)";
context.stroke();
////BodyL2
context.beginPath();
context.moveTo(372,301);
context.lineTo(372,401);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(6,0,0,0.76)";
context.stroke();
////BodyL3
context.beginPath();
context.moveTo(418,301);
context.lineTo(418,401);
context.closePath();
context.lineWidth = 30;
context.lineJoin = "round";
context.strokeStyle = "rgba(6,0,0,0.76)";
context.stroke();
///circle I began stretching
context.beginPath();
context.arc(500,230,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.fillStyle = 'rgba(255,70,70,0.01)';
context.fill();
context.strokeStyle="rgba(59,62,69,0.00)";
context.stroke();
// save state
context.save();
// scale context horizontally
context.scale(1, 2);
context.beginPath();
context.arc(275,175,20,0*Math.PI, 2*Math.PI,false);
// apply styling
context.lineWidth=10
context.fillStyle = 'rgba(6,0,0,1.00)';
context.fill();
context.strokeStyle="rgba(59,62,69,0.75)"; /// stroke is on top of fill and distorted because restore is after styling
context.stroke();
// restore to original state applied after styling
context.restore();
////Wings
context.beginPath();
context.moveTo(325, 285);
context.quadraticCurveTo(300, 200, 390, 284);
context.lineWidth = 7;
context.strokeStyle = "rgba(18,138,189,1.00)";
context.stroke();
context.fillStyle = 'rgba(49,147,164,0.72)';
context.fill();
context.beginPath();
context.moveTo(380,285);
context.quadraticCurveTo(430, 240, 425, 285);
context.lineWidth = 7;
context.strokeStyle = "rgba(18,138,189,1.00)";
context.stroke();
context.fillStyle = 'rgba(49,147,164,0.72)';
context.fill();
////Wings
context.beginPath();
context.moveTo(325, 415);
context.quadraticCurveTo(300, 500, 390, 415);
context.lineWidth = 7;
context.strokeStyle = "rgba(18,138,189,1.00)";
context.stroke();
context.fillStyle = 'rgba(49,147,164,0.72)';
context.fill();
context.beginPath();
context.moveTo(380,415);
context.quadraticCurveTo(430, 460, 425, 415);
context.lineWidth = 7;
context.strokeStyle = "rgba(18,138,189,1.00)";
context.stroke();
context.fillStyle = 'rgba(49,147,164,0.72)';
context.fill();
////Vines
//Vine1
context.beginPath();
context.moveTo(0, 510);
context.quadraticCurveTo(160, 590, 150, 480);
context.quadraticCurveTo(160, 610, 0, 530);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
//Vine2
context.beginPath();
context.moveTo(0, 210);
context.quadraticCurveTo(100, 400, 50, 390);
context.quadraticCurveTo(100, 400, 0, 300);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
//Vine3
context.beginPath();
context.moveTo(400, 600);
context.quadraticCurveTo(450, 500, 490, 490);
context.quadraticCurveTo(450, 500, 450, 600);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
//Vine4
context.beginPath();
context.moveTo(800, 360);
context.quadraticCurveTo(700, 435, 680, 340);
context.quadraticCurveTo(700, 425, 800, 335);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
////Vine4
context.beginPath();
context.moveTo(800, 335);
context.quadraticCurveTo(680, 220, 780, 290);
context.quadraticCurveTo(680, 220, 770, 357);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
////Vine5
context.beginPath();
context.moveTo(250, 0);
context.quadraticCurveTo(240, 135, 375, 140);
context.quadraticCurveTo(240, 125, 300, 0);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
////Vine6
context.beginPath();
context.moveTo(375, 0);
context.quadraticCurveTo(440, 135, 390, 140);
context.quadraticCurveTo(440, 125, 425, 0);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
////Vine7
context.beginPath();
context.moveTo(325, 0);
context.quadraticCurveTo(340, 115, 347, 100);
context.quadraticCurveTo(340, 115, 360, 0);
context.fillStyle = 'rgba(64,167,80,1.00)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgba(18,97,15,1.00)";
context.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Emily Huff, The Pedigree of Honey, FMX 210-1, FA 2020";
context.font = 'bold 12px Helvetica';
context.fillStyle = "rgba(0,0,0,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(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
context.restore();
//////////////////////////////////////////////////////////////////
// HTML DISPLAY FIELD FOR TESTING PURPOSES
display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);
/////////////////////////////////////////////////////////////////
// LAST LINE CREATES THE ANIMATION
requestAnimFrame(draw); // CALLS draw() every nth of a second
}
</script>
</body>
</html>
I LOVE this project! The colors look so nice together and I am so impressed with the way you did the hexagons in the background, as well as the flowers along the sides! The bee is super cute too! Overall, this is an amazing project!
ReplyDeleteThis project looks amazing. I love the bees and the honeycomb, it is all super cute. The colors are also very nice and cohesive. Knowing how hard this software was and how hard it was to code, this project is super impressive. This is great work!
ReplyDelete