CrispyPin/blug
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

port over the project list from previous site

Browse source
This commit is contained in:
Crispy 2024-07-06 15:32:30 +02:00
parent d99f1c3870
commit 5bee4a16b2
21 changed files with 704 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

78
site/projects/fractals.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>something silly - fractals</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/cretin.png">
</head>
<body>
<main>
<h1 id="fractals">Fractals</h1>
<p>
<code>2021-05-26</code><br>
This page is a collection of fractal renderers I made in JS for a school assignment back in 2020.<br>
This is the <em>only</em> JS on this website.<br>
</p>
<h2 id="tree-fractal">Tree fractal</h2>
<p>
The splitting angle is defined by the mouses x position. The number of iterations is set in the first input field (default is 12). Each branch is slightly smaller than its parent, the factor is the second input field. Click the canvas to pause/resume the image.<br>
<div class="demo-render" id="fractal-tree">
<canvas></canvas>
<div class="controlbar">
<input type="number" min=6 max=15 value=12 onchange="fractalTree.setIter(value)">
<input type="number" min=0.65 max=1 step=0.025 value=0.75 onchange="fractalTree.setMod(value)">
</div>
</div>
</p>
<h2 id="mandelbrot-set">Mandelbrot set</h2>
<p>
<a href="https://en.wikipedia.org/wiki/Mandelbrot_set">Wikipedia page</a><br>
You can click to zoom and set the iteration count in the input field.<br>
<div class="demo-render" id="mandelbrot">
<canvas></canvas>
<div class="controlbar">
<button type="button" onclick="mandelbrot.reset()">Reset</button>
<input type="number" min=1 max=256 value=48 onchange="mandelbrot.setIter(value)">
</div>
</div>
</p>
<h2 id="multibrot-set">Multibrot set</h2>
<p>
<a href="https://en.wikipedia.org/wiki/Multibrot_set">Wikipedia page</a><br>
You can click to zoom and set the iteration count in the input field. The second input controls the exponent.<br>
</p>
<p>
This is quite slow to render.<br>
<div class="demo-render" id="multibrot">
<canvas></canvas>
<div class="controlbar">
<button type="button" onclick="multibrot.reset()">Render</button>
<input type="number" min=1 max=256 value=48 onchange="multibrot.setIter(value)">
<input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)">
</div>
</div>
</p>
<h2 id="interactive-julia-set">Interactive Julia set</h2>
<p>
<a href="https://en.wikipedia.org/wiki/Julia_set">Wikipedia page</a><br>
You can set the iteration count in the input field.<br>
<div class="demo-render" id="julia-set">
<canvas></canvas>
<div class="controlbar">
<button type="button" onclick="juliaSet.reset()">Reset</button>
<input type="number" min=8 max=1000 value=80 step=8 onchange="juliaSet.setIter(value)">
</div>
</div>
</p>
<p>
<script src="/projects/fractals.js"></script>
<link rel="stylesheet" href="/projects/fractal.css">
</main>
</body>
</html>