chart = {
const canvasWidth = 700;
const canvasHeight = 700;
const width = 800;
const height = 800; // plot height
const branchWidth = 2; // line thickness
const sectionLength = 20; // Length of each section
const sepalLength = 50; // Length of each sepal
const sepalAngle = 0.8; // Sepal angle
const branchCount = 3; // Main branch offshoots
const mainBranchCount = 20;
return generateSnowflake(width, height, mainBranchCount, branchCount, branchWidth, sepalLength, sepalAngle)
}
/**
* Generates a snowflake with dynamic branches.
*
* @param {number} width - Canvas width.
* @param {number} height - Canvas height.
* @param {number} mainBranchCount - Number of main branches of the snowflake.
* @param {number} initialBranchCount - Number of branches for each main branch.
* @param {number} branchWidth - Width of the branches.
* @param {number} sepalLength - Length of the snowflake arms.
* @param {number} initialSepalAngle - Initial angle of the branches.
* @returns {HTMLCanvasElement} - The canvas element containing the snowflake.
*/
function generateSnowflake(width, height, mainBranchCount, initialBranchCount, branchWidth, sepalLength, initialSepalAngle) {
const context = DOM.context2d(width, height);
context.fillStyle = "#162D50";
context.fillRect(0, 0, width, height);
context.lineCap = 'round';
context.strokeStyle = "#FFFFFF";
context.lineWidth = branchWidth;
context.save();
drawCircle(context, width, height, 20)
context.restore();
context.translate(width / 2, height / 2);
for (let i = 0; i < mainBranchCount; i++) {
context.save();
for (let j = 1; j <= initialBranchCount; j++) {
drawSegment(context, sepalLength, initialSepalAngle);
}
drawSegment(context, 0);
context.restore();
context.rotate((2 * Math.PI) / mainBranchCount);
}
return context.canvas;
}
/**
* Draws a segment of the snowflake arm.
*
* @param {CanvasRenderingContext2D} context - The 2D rendering context.
* @param {number} branchLength - Length of the segment.
* @param {number} sepalAngle - Angle of the branches.
*/
function drawSegment(context, branchLength, sepalAngle) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(branchLength, 0);
context.stroke();
context.translate(branchLength, 0);
if (branchLength > 0) {
drawBranch(context, branchLength, sepalAngle);
drawBranch(context, branchLength, -sepalAngle);
}
}
/**
* Draws a branch of the snowflake arm.
*
* @param {CanvasRenderingContext2D} context - The 2D rendering context.
* @param {number} branchLength - Length of the branch.
* @param {number} direction - Direction of the branch.
*/
function drawBranch(context, branchLength, direction) {
context.save();
context.rotate(direction * Math.PI/3);
context.moveTo(0,0);
context.lineTo(branchLength, 0);
context.stroke();
context.restore();
}
drawCircle = (ctx, canvasWidth, canvasHeight, circleRadius) => {
// Set the fill style for the circle
ctx.fillStyle = 'red';
// Set the line width
ctx.lineWidth = 2;
// Draw a circle in the middle
const centerX = canvasWidth / 2;
const centerY = canvasHeight / 2;
ctx.beginPath();
ctx.arc(centerX, centerY, circleRadius, 0, 2 * Math.PI);
// Fill the circle
ctx.fill();
// Move to the starting point of the line
ctx.moveTo(50, canvasHeight / 2);
// Stroke the circle
ctx.stroke();
};
import {} from "@anaclarapaniago/snowflake"
import {toRadians} from "@grantcuster/generative-snowflake-card-explorations"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
