2021-06-24 23:55:00 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2023-03-21 23:09:50 +01:00
|
|
|
|
2021-06-24 23:55:00 +02:00
|
|
|
<head>
|
2022-01-18 22:17:50 +01:00
|
|
|
<meta charset="UTF-8">
|
2022-01-18 17:57:42 +01:00
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<link rel="stylesheet" href="/style.css">
|
2023-03-21 23:09:50 +01:00
|
|
|
<link rel="icon" type="image/x-icon" href="/icons/cretin.png">
|
2022-01-20 03:31:33 +01:00
|
|
|
<title>Fractals</title>
|
2022-05-07 22:05:22 +02:00
|
|
|
<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;
|
2023-03-21 23:09:50 +01:00
|
|
|
-ms-flex-pack: space-evenly;
|
|
|
|
|
justify-content: space-evenly;
|
2022-05-07 22:05:22 +02:00
|
|
|
-ms-flex-line-pack: stretch;
|
2023-03-21 23:09:50 +01:00
|
|
|
align-content: stretch;
|
2022-05-07 22:05:22 +02:00
|
|
|
-ms-flex-wrap: wrap;
|
2023-03-21 23:09:50 +01:00
|
|
|
flex-wrap: wrap;
|
2022-05-07 22:05:22 +02:00
|
|
|
}
|
|
|
|
|
|
2023-03-21 23:09:50 +01:00
|
|
|
.controlbar button,
|
|
|
|
|
.controlbar input {
|
2022-05-07 22:05:22 +02:00
|
|
|
padding: 4px 6px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
border: 1px solid #000;
|
|
|
|
|
border: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
-webkit-box-flex: 1;
|
2023-03-21 23:09:50 +01:00
|
|
|
-ms-flex-positive: 1;
|
|
|
|
|
flex-grow: 1;
|
2022-05-07 22:05:22 +02:00
|
|
|
margin: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.controlbar label {
|
|
|
|
|
background-color: #181818;
|
|
|
|
|
color: #fb8;
|
|
|
|
|
margin: 2px;
|
|
|
|
|
font-family: 'Consolas', 'Courier New', Courier, monospace;
|
|
|
|
|
}
|
|
|
|
|
|
2023-03-21 23:09:50 +01:00
|
|
|
.clickable,
|
|
|
|
|
nav li,
|
|
|
|
|
.controlbar button,
|
|
|
|
|
.controlbar input {
|
2022-05-07 22:05:22 +02:00
|
|
|
border-radius: 2px;
|
|
|
|
|
background-color: #4a4;
|
|
|
|
|
}
|
|
|
|
|
|
2023-03-21 23:09:50 +01:00
|
|
|
.clickable:hover,
|
|
|
|
|
nav li:hover,
|
|
|
|
|
.controlbar button:hover,
|
|
|
|
|
.controlbar input:hover {
|
2022-05-07 22:05:22 +02:00
|
|
|
background-color: #4af;
|
|
|
|
|
}
|
|
|
|
|
|
2023-03-21 23:09:50 +01:00
|
|
|
.clickable:active,
|
|
|
|
|
nav li:active,
|
|
|
|
|
.controlbar button:active,
|
|
|
|
|
.controlbar input:active {
|
2022-05-07 22:05:22 +02:00
|
|
|
background-color: #46c;
|
|
|
|
|
}
|
|
|
|
|
|
2023-03-21 23:09:50 +01:00
|
|
|
.clickable:disabled,
|
|
|
|
|
nav li:disabled,
|
|
|
|
|
.controlbar button:disabled,
|
|
|
|
|
.controlbar input:disabled {
|
2022-05-07 22:05:22 +02:00
|
|
|
background-color: #8b8;
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
color: #000;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2021-06-24 23:55:00 +02:00
|
|
|
</head>
|
2023-03-21 23:09:50 +01:00
|
|
|
|
2021-06-24 23:55:00 +02:00
|
|
|
<body>
|
2022-01-18 22:17:50 +01:00
|
|
|
<header>
|
2023-03-21 23:09:50 +01:00
|
|
|
<img src="/icons/cretin.png" alt="">
|
2022-05-07 22:05:22 +02:00
|
|
|
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
|
2023-03-21 23:09:50 +01:00
|
|
|
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
|
2022-01-18 18:04:48 +01:00
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
<h1>Fractals</h1>
|
2022-05-07 22:05:22 +02:00
|
|
|
<p>This page is a collection of fractal renderers I made in JS for a school assignment back in 2020.</p>
|
2022-01-18 18:04:48 +01:00
|
|
|
<h2>Fractal tree</h2>
|
2023-03-21 23:09:50 +01:00
|
|
|
<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>
|
2022-01-18 18:04:48 +01:00
|
|
|
<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>
|
2023-03-21 23:09:50 +01:00
|
|
|
<input type="number" min=1 max=256 value=48 onchange="mandelbrot.setIter(value)">
|
2022-01-18 18:04:48 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h2>Multibrot set</h2>
|
|
|
|
|
<a href="https://en.wikipedia.org/wiki/Multibrot_set">Wikipedia page</a>
|
2023-03-21 23:09:50 +01:00
|
|
|
<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>
|
2022-01-18 18:04:48 +01:00
|
|
|
<div class="demo-render" id="multibrot">
|
|
|
|
|
<canvas></canvas>
|
|
|
|
|
<div class="controlbar">
|
|
|
|
|
<button type="button" onclick="multibrot.reset()">Render</button>
|
2023-03-21 23:09:50 +01:00
|
|
|
<input type="number" min=1 max=256 value=48 onchange="multibrot.setIter(value)">
|
2022-01-18 18:04:48 +01:00
|
|
|
<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>
|
2022-01-18 22:17:50 +01:00
|
|
|
<footer>
|
2023-03-21 23:09:50 +01:00
|
|
|
<p>me on other interweb location(s):</p>
|
2022-01-18 18:04:48 +01:00
|
|
|
<div class="links">
|
2022-05-07 22:05:22 +02:00
|
|
|
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px></a>
|
|
|
|
|
<a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
|
|
|
|
|
<a href="https://www.youtube.com/CrispyPin42"><img src="/icons/youtube.png" alt="" width=32px></a>
|
2022-01-18 18:04:48 +01:00
|
|
|
</div>
|
|
|
|
|
</footer>
|
2021-06-24 23:55:00 +02:00
|
|
|
</body>
|
2023-03-21 23:09:50 +01:00
|
|
|
|
2021-06-24 23:55:00 +02:00
|
|
|
</html>
|
