mirror of
https://github.com/CrispyPin/crispypin.cc.git
synced 2024-09-20 06:36:19 +02:00
122 lines
No EOL
3.9 KiB
HTML
122 lines
No EOL
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<include meta.html/>
|
|
<title>Fractals</title>
|
|
<style>
|
|
.demo-render {
|
|
margin: 20px;
|
|
width: -webkit-min-content;
|
|
width: -moz-min-content;
|
|
width: min-content;
|
|
background-color: #000;
|
|
}
|
|
|
|
.controlbar {
|
|
background-color: #181818;
|
|
padding: 2px 5px;
|
|
height: -webkit-max-content;
|
|
height: -moz-max-content;
|
|
height: max-content;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: space-evenly;
|
|
-ms-flex-pack: space-evenly;
|
|
justify-content: space-evenly;
|
|
-ms-flex-line-pack: stretch;
|
|
align-content: stretch;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.controlbar button, .controlbar input {
|
|
padding: 4px 6px;
|
|
height: 25px;
|
|
border: 1px solid #000;
|
|
border: 0;
|
|
cursor: pointer;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
margin: 2px;
|
|
}
|
|
|
|
.controlbar label {
|
|
background-color: #181818;
|
|
color: #fb8;
|
|
margin: 2px;
|
|
font-family: 'Consolas', 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
.clickable, nav li, .controlbar button, .controlbar input {
|
|
border-radius: 2px;
|
|
background-color: #4a4;
|
|
}
|
|
|
|
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover {
|
|
background-color: #4af;
|
|
}
|
|
|
|
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active {
|
|
background-color: #46c;
|
|
}
|
|
|
|
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled {
|
|
background-color: #8b8;
|
|
text-decoration: line-through;
|
|
color: #000;
|
|
cursor: default;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<include header.html/>
|
|
<main>
|
|
<h1>Fractals</h1>
|
|
<p>This page is a collection of fractal renderers I made in JS for a school assignment back in 2020.</p>
|
|
<h2>Fractal tree</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.</p>
|
|
<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>
|
|
<h2>Mandelbrot set</h2>
|
|
<a href="https://en.wikipedia.org/wiki/Mandelbrot_set">Wikipedia page</a>
|
|
<p>You can click to zoom and set the iteration count in the input field.</p>
|
|
<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=1000 value=256 onchange="mandelbrot.setIter(value)">
|
|
</div>
|
|
</div>
|
|
<h2>Multibrot set</h2>
|
|
<a href="https://en.wikipedia.org/wiki/Multibrot_set">Wikipedia page</a>
|
|
<p>You can click to zoom and set the iteration count in the input field. The second input controls the exponent. This is quite slow to render.</p>
|
|
<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=1000 value=256 onchange="multibrot.setIter(value)">
|
|
<input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)">
|
|
</div>
|
|
</div>
|
|
<h2>Julia set</h2>
|
|
<a href="https://en.wikipedia.org/wiki/Julia_set">Wikipedia page</a>
|
|
<p>You can set the iteration count in the input field.</p>
|
|
<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>
|
|
<script src="fractals.js"></script>
|
|
</main>
|
|
<include footer.html/>
|
|
</body>
|
|
</html> |