Drawing a Sierpinski Triangle in Client-Side Scripting
The Sierpinski Triangle is a fractal made by recursively subdividing an equilateral triangle into smaller equilateral triangles. Below is an example of how to draw the Sierpinski Triangle using JavaScript for client-side scripting, with a slider to control the recursion depth.
Drawing with Client-Side JavaScript
Code Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sierpinski Triangle</title>
<style>
canvas {
border: 1px solid black;
display: block;
margin: 20px auto;
}
.controls {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class="controls">
<label for="depthSlider">Recursion Depth:</label>
<input type="range" id="depthSlider" min="0" max="10" value="6" oninput="updateDepthLabel()">
<span id="depthValue">6</span>
<button onclick="drawSierpinski()">Draw Triangle</button>
</div>
<canvas id="sierpinskiCanvas" width="800" height="800"></canvas>
<script>
const canvas = document.getElementById("sierpinskiCanvas");
const ctx = canvas.getContext("2d");
function drawTriangle(p1, p2, p3) {
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();
}
function sierpinski(p1, p2, p3, depth) {
if (depth === 0) {
drawTriangle(p1, p2, p3);
} else {
const mid1 = midpoint(p1, p2);
const mid2 = midpoint(p2, p3);
const mid3 = midpoint(p3, p1);
sierpinski(p1, mid1, mid3, depth - 1);
sierpinski(mid1, p2, mid2, depth - 1);
sierpinski(mid3, mid2, p3, depth - 1);
}
}
function midpoint(p1, p2) {
return {
x: (p1.x + p2.x) / 2,
y: (p1.y + p2.y) / 2
};
}
function updateDepthLabel() {
const depth = document.getElementById("depthSlider").value;
document.getElementById("depthValue").innerText = depth;
}
function drawSierpinski() {
const depth = parseInt(document.getElementById("depthSlider").value);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const pointA = { x: canvas.width / 2, y: 20 };
const pointB = { x: 20, y: canvas.height - 20 };
const pointC = { x: canvas.width - 20, y: canvas.height - 20 };
sierpinski(pointA, pointB, pointC, depth);
}
// Initial draw
drawSierpinski();
</script>
</body>
</html>Explanation of the Triangle
The Sierpinski Triangle is a fractal and an attractive fixed set created using the following mathematical concepts:
Equilateral Triangle: The starting shape is a large equilateral triangle.
Midpoints: Each side's midpoint is calculated to form smaller triangles.
Recursive Subdivision: The triangle is divided into three smaller equilateral triangles at each recursive step. The middle triangle is left empty.
Base Case: The recursion stops when a specified depth is reached, and the smallest triangles are drawn.
Why It Works
The process reduces the triangle's area by 75% at each step, yet the fractal retains its overall shape.
The recursive structure demonstrates self-similarity, a hallmark of fractals.
Running the Program
Save the code in an HTML file.
Open the file in a web browser.
Use the slider to adjust the depth value (between 0 and 10) and click "Draw Triangle." The canvas will render the Sierpinski Triangle based on the specified depth.
Experiment with different depths to see how the level of detail changes!
No comments :
Post a Comment