CrispyPin/crispypin.cc_old
1
0
Fork 0
mirror of https://github.com/CrispyPin/crispypin.cc.git synced 2024-11-10 04:00:27 +01:00
Code Issues Projects Releases Packages Wiki Activity

suck slightly less

Browse source
This commit is contained in:
Crispy 2022-01-18 17:57:42 +01:00
parent ca4b4afb2f
commit 959b78d7af
13 changed files with 79 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
docs/fractals/fractals.js
View file

@ -1,6 +1,6 @@
'use strict' 'use strict'
// I made this in school and I had to 'use strict'.
const gpu = new GPU(); // I no longer use JS.
class FractalTree { class FractalTree {
constructor(id, iterations, mod) { constructor(id, iterations, mod) {
@ -87,7 +87,6 @@ class Mandelbrot {
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.renderBtn = this.app.getElementsByClassName("controlbar")[0].getElementsByTagName("button")[0]; this.renderBtn = this.app.getElementsByClassName("controlbar")[0].getElementsByTagName("button")[0];
this.renderBtn2 = this.app.getElementsByClassName("controlbar")[0].getElementsByTagName("button")[1];
this.init(minX, minY, maxX, maxY); this.init(minX, minY, maxX, maxY);
this.defaultZoom = [minX, minY, maxX, maxY]; this.defaultZoom = [minX, minY, maxX, maxY];
@ -178,45 +177,6 @@ class Mandelbrot {
this.renderBtn.textContent = `Reset ${new Date() - start}ms`; this.renderBtn.textContent = `Reset ${new Date() - start}ms`;
} }
gpuRender() {
let start = new Date();
let kernel = gpu.createKernel(function(scaleX, scaleY, minX, minY, iter) {
let x0 = this.thread.x * scaleX + minX;
let y0 = this.thread.y * scaleY + minY;
let x = 0, y = 0;
let i = 0;
let x2 = 0, y2 = 0;
while (x2 + y2 < 4 && i < iter) {
y = 2*x*y + y0;
x = x2 - y2 + x0;
x2 = x*x;
y2 = y*y;
i++;
}
if (i != iter) {
this.color(0, i/iter, i/iter, 1);
this.color(0, i/255, i/255, 1);//i is 0?
this.color(this.thread.x/512, this.thread.y/512, i/255);
} else {
this.color(1, 0, 0, 1);
}
//this.color(this.thread.x/512, this.thread.y/512, i/256);
//this.color(x0, y0, 0, 1)
},
{output:[512, 512], graphical:true, loopMaxIterations: this.iter});
kernel(this.scaleX, this.scaleY, this.minX, this.minY, this.iter);
//let kernel = gpu.createKernel(function() {this.color(0, 0, 1);}).setOutput([512, 512]).setGraphical(true);
//kernel();
let result = kernel.getPixels();
this.ctx.putImageData(new ImageData(result, 512, 512), 0, 0);
this.renderBtn.textContent = `Reset ${new Date() - start}ms`;
}
} }
class Multibrot extends Mandelbrot { class Multibrot extends Mandelbrot {

43
docs/fractals/index.html
View file

@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png">
<title>CrispyPin.cc - Fractals</title> <title>CrispyPin.cc - Fractals</title>
</head> </head>
<body> <body>
@ -22,9 +24,9 @@
</nav> </nav>
<main> <main>
<h1>Fractals</h1> <h1>Fractals</h1>
<p>This page is a collection of fractals renderers I made in JS for a school assignment back in 2020. Please note that I don't use JS anymore.</p>
<h2>Fractal tree</h2> <h2>Fractal tree</h2>
<p>This is a fractal tree.</p> <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>
<p>The tree splits into two parts, with an angle defined by the cursor's x positon. The number of iterations is defined by the first input field (which defaults to 12). Each branch is slightly smaller than its parent, as defined by the second input field. Click the canvas to freeze the image at any moment.</p>
<div class="demo-render" id="fractal-tree"> <div class="demo-render" id="fractal-tree">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
@ -32,28 +34,30 @@
<input type="number" min=0.65 max=1 step=0.025 value=0.75 onchange="fractalTree.setMod(value)"> <input type="number" min=0.65 max=1 step=0.025 value=0.75 onchange="fractalTree.setMod(value)">
</div> </div>
</div> </div>
<h2>Mandelbrot</h2> <h2>Mandelbrot set</h2>
<p>The mandelbrot set is defined as the set of complex numbers for which a specific function (<i>F<sub>c</sub>(z) = z<sup>2</sup> + c</i>) stays within distance 2 from the origin when iterated from z=0.</p> <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"> <div class="demo-render" id="mandelbrot">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="mandelbrot.reset()">Reset</button> <button type="button" onclick="mandelbrot.reset()">Reset</button>
<button type="button" onclick="mandelbrot.gpuRender()">GPU</button>
<input type="number" min=1 max=1000 value=256 onchange="mandelbrot.setIter(value)"> <input type="number" min=1 max=1000 value=256 onchange="mandelbrot.setIter(value)">
</div> </div>
</div> </div>
<h2>Multibrot set</h2> <h2>Multibrot set</h2>
<p>A multibrot set is a variant of the mandelbrot set where the functions exponent can be anything. If the exponent (third input field) is 2, you get the regular mandelbrot set.</p> <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"> <div class="demo-render" id="multibrot">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="multibrot.reset()">Reset</button> <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=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)"> <input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)">
</div> </div>
</div> </div>
<h2>Julia set</h2> <h2>Julia set</h2>
<p>The julia set is similar to the mandelbrot set.</p> <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"> <div class="demo-render" id="julia-set">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
@ -61,17 +65,16 @@
<input type="number" min=8 max=1000 value=80 step=8 onchange="juliaSet.setIter(value)"> <input type="number" min=8 max=1000 value=80 step=8 onchange="juliaSet.setIter(value)">
</div> </div>
</div> </div>
<script src="/libraries/gpu-browser.min.js"></script>
<script src="fractals.js"></script> <script src="fractals.js"></script>
</main> </main>
<footer> <footer>
<p>crispypin.cc</p> <p>crispypin.cc</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px> </a> <a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px> </a>
<a href="https://crispypin.itch.io/"><img src="/icons/itchio.svg" alt="" width=32px> </a> <a href="https://crispypin.itch.io/"><img src="/icons/itchio.svg" alt="" width=32px> </a>
<a href="https://twitter.com/CrispyPin42"><img src="/icons/twitter.png" alt="" width=32px> </a> <a href="https://twitter.com/CrispyPin42"><img src="/icons/twitter.png" alt="" width=32px> </a>
</div> <a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/icons/youtube.png" alt="" width=32px> </a>
</div>
</footer> </footer>
<div class="scroll-reset" onclick="window.scrollTo(0,0)"></div>
</body> </body>
</html> </html>

BIN
docs/icons/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
docs/icons/youtube.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

24
docs/index.html
View file

@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png">
<title>CrispyPin.cc</title> <title>CrispyPin.cc</title>
</head> </head>
<body> <body>
@ -25,13 +27,13 @@
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.</p>
</main> </main>
<footer> <footer>
<p>crispypin.cc</p> <p>crispypin.cc</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px> </a> <a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px> </a>
<a href="https://crispypin.itch.io/"><img src="/icons/itchio.svg" alt="" width=32px> </a> <a href="https://crispypin.itch.io/"><img src="/icons/itchio.svg" alt="" width=32px> </a>
<a href="https://twitter.com/CrispyPin42"><img src="/icons/twitter.png" alt="" width=32px> </a> <a href="https://twitter.com/CrispyPin42"><img src="/icons/twitter.png" alt="" width=32px> </a>
</div> <a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/icons/youtube.png" alt="" width=32px> </a>
</div>
</footer> </footer>
<div class="scroll-reset" onclick="window.scrollTo(0,0)"></div>
</body> </body>
</html> </html>

14
docs/libraries/gpu-browser.min.js vendored
View file

File diff suppressed because one or more lines are too long

8
docs/style.css
View file

@ -12,6 +12,10 @@ body {
min-height: 100vh; min-height: 100vh;
} }
a:visited {
color: #b8f;
}
nav { nav {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@ -39,6 +43,10 @@ nav a {
text-align: center; text-align: center;
} }
nav a:visited {
color: #000;
}
header { header {
grid-column: 1 / -1; grid-column: 1 / -1;
background-color: #181818; background-color: #181818;

2
docs/style.css.map
View file

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "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", "mappings": "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",
"sources": [ "sources": [
"style.scss" "style.scss"
], ],

7
docs/style.scss
View file

@ -24,6 +24,10 @@ body {
} }
a:visited {
color: #b8f;
}
nav { nav {
grid-column: 1 / -1; grid-column: 1 / -1;
ul { ul {
@ -44,6 +48,9 @@ nav {
text-decoration: none; text-decoration: none;
display: block; display: block;
text-align: center; text-align: center;
&:visited {
color: #000;
}
} }
} }

24
pages/fractals/index.html
View file

@ -1,19 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <include meta.html/>
<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">
<title>CrispyPin.cc - Fractals</title> <title>CrispyPin.cc - Fractals</title>
</head> </head>
<body> <body>
<include header.html/> <include header.html/>
<main> <main>
<h1>Fractals</h1> <h1>Fractals</h1>
<p>This page is a collection of fractals renderers I made in JS for a school assignment back in 2020. Please note that I don't use JS anymore.</p>
<h2>Fractal tree</h2> <h2>Fractal tree</h2>
<p>This is a fractal tree.</p> <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>
<p>The tree splits into two parts, with an angle defined by the cursor's x positon. The number of iterations is defined by the first input field (which defaults to 12). Each branch is slightly smaller than its parent, as defined by the second input field. Click the canvas to freeze the image at any moment.</p>
<div class="demo-render" id="fractal-tree"> <div class="demo-render" id="fractal-tree">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
@ -21,28 +18,30 @@
<input type="number" min=0.65 max=1 step=0.025 value=0.75 onchange="fractalTree.setMod(value)"> <input type="number" min=0.65 max=1 step=0.025 value=0.75 onchange="fractalTree.setMod(value)">
</div> </div>
</div> </div>
<h2>Mandelbrot</h2> <h2>Mandelbrot set</h2>
<p>The mandelbrot set is defined as the set of complex numbers for which a specific function (<i>F<sub>c</sub>(z) = z<sup>2</sup> + c</i>) stays within distance 2 from the origin when iterated from z=0.</p> <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"> <div class="demo-render" id="mandelbrot">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="mandelbrot.reset()">Reset</button> <button type="button" onclick="mandelbrot.reset()">Reset</button>
<button type="button" onclick="mandelbrot.gpuRender()">GPU</button>
<input type="number" min=1 max=1000 value=256 onchange="mandelbrot.setIter(value)"> <input type="number" min=1 max=1000 value=256 onchange="mandelbrot.setIter(value)">
</div> </div>
</div> </div>
<h2>Multibrot set</h2> <h2>Multibrot set</h2>
<p>A multibrot set is a variant of the mandelbrot set where the functions exponent can be anything. If the exponent (third input field) is 2, you get the regular mandelbrot set.</p> <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"> <div class="demo-render" id="multibrot">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="multibrot.reset()">Reset</button> <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=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)"> <input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)">
</div> </div>
</div> </div>
<h2>Julia set</h2> <h2>Julia set</h2>
<p>The julia set is similar to the mandelbrot set.</p> <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"> <div class="demo-render" id="julia-set">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
@ -50,7 +49,6 @@
<input type="number" min=8 max=1000 value=80 step=8 onchange="juliaSet.setIter(value)"> <input type="number" min=8 max=1000 value=80 step=8 onchange="juliaSet.setIter(value)">
</div> </div>
</div> </div>
<script src="/libraries/gpu-browser.min.js"></script>
<script src="fractals.js"></script> <script src="fractals.js"></script>
</main> </main>
<include footer.html/> <include footer.html/>

5
pages/index.html
View file

@ -1,10 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <include meta.html/>
<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">
<title>CrispyPin.cc</title> <title>CrispyPin.cc</title>
</head> </head>
<body> <body>

14
templates/footer.html
View file

@ -1,9 +1,9 @@
<footer> <footer>
<p>crispypin.cc</p> <p>crispypin.cc</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px> </a> <a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px> </a>
<a href="https://crispypin.itch.io/"><img src="/icons/itchio.svg" alt="" width=32px> </a> <a href="https://crispypin.itch.io/"><img src="/icons/itchio.svg" alt="" width=32px> </a>
<a href="https://twitter.com/CrispyPin42"><img src="/icons/twitter.png" alt="" width=32px> </a> <a href="https://twitter.com/CrispyPin42"><img src="/icons/twitter.png" alt="" width=32px> </a>
</div> <a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/icons/youtube.png" alt="" width=32px> </a>
</div>
</footer> </footer>
<div class="scroll-reset" onclick="window.scrollTo(0,0)"></div>

5
templates/meta.html Normal file
View file

@ -0,0 +1,5 @@
<meta charset="UTF-8">
<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">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png">