Skip to content

Instantly share code, notes, and snippets.

@katrinafyi
Created March 18, 2019 13:22
Show Gist options
  • Save katrinafyi/621dc8023296aae0bbf0d134bc6631e2 to your computer and use it in GitHub Desktop.
Save katrinafyi/621dc8023296aae0bbf0d134bc6631e2 to your computer and use it in GitHub Desktop.
Draws a geometric shape using HTML canvas and JS.
// import 'math.min.js';
const pi = Math.PI;
function rotation(angle) {
return [
[Math.cos(angle), -Math.sin(angle)],
[Math.sin(angle), Math.cos(angle)]
];
}
function round(array) {
const arr = [];
for (const x of array) {
arr.push(Math.round(x));
}
return arr;
}
const pink = '#f50093';
const purple = '#a34487';
const blue = '#2c3397';
const red = '#e61a1d';
const yellow = '#ffc808';
const orange = '#f0852d';
const green = '#01a952';
/**
* Draws a shape looking something like
* -------
* / \
* / \
* in that rotation. Positive angles rotate clockwise.
* @param {CanvasRenderingContext2D} context
* @param {Array} origin
* @param {number} angle
*/
function pathHexPart(context, origin, angle, skipLast) {
const baseLength = hexPartLength;
const baseVector = [baseLength, 0];
// context.strokeStyle = 'black';
for (let i = 0; i < 4; i++) {
if (skipLast && i === 3) continue;
subAngle = i*pi/3;
const shift = math.multiply(rotation(angle+subAngle), baseVector);
context.moveTo(...round(origin));
context.lineTo(...round(math.add(origin, shift)));
}
context.stroke();
}
const hexagonColourArray = [orange, green, purple, pink, red, yellow, blue];
/**
*
* @param {CanvasRenderingContext2D} context
* @param {*} origin
* @param {*} spacing
*/
function drawHexagon(context, origin, spacing, colourArray) {
const globalRotation = pi/6;
const g = globalRotation;
const baseVector = [spacing, 0];
for (let i = 0; i < 6; i++) {
const angle = i * pi/3 + g;
const shift = math.multiply(rotation(angle), baseVector);
context.beginPath();
context.strokeStyle = colourArray[i];
pathHexPart(context, round(math.add(origin, shift)), pi/2+angle);
context.closePath();
}
context.beginPath();
context.strokeStyle = hexagonColourArray[hexagonColourArray.length-1];
pathHexPart(context, origin, pi/2 + g, true);
pathHexPart(context, origin, -pi/2 + g, true);
context.closePath();
}
const lineWidth = 16;
const circleWidth = 6;
const hexPartLength = 165;
const spacing = 330;
const circleRadius = 495;
(function() {
const canvas = document.getElementsByTagName('canvas')[0];
const context = canvas.getContext('2d');
context.lineWidth = lineWidth;
context.lineCap = 'round';
// drawHexPart(context, [500, 500], pi/10);
const greyArray = Array(6).fill('#eeeeee');
// drawOuterParts(context, [502, 501], 310, greyArray);
drawHexagon(context, [500, 500], spacing, hexagonColourArray);
context.beginPath();
context.strokeStyle = 'black';
context.lineWidth = circleWidth;
// context.moveTo(500, 500);
context.arc(500, 500, circleRadius, 0, 2*pi);
context.stroke();
context.closePath();
const button = document.getElementById('download');
const link = document.getElementById('download-link');
button.addEventListener('click', () => {
console.log("Rendering.");
canvas.toBlob(blob => {
console.log("Finished.");
saveAs(blob, 'canvas.png');
}, 'image/png')
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment