stitchy/shader-web-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: basic website style

Browse source
This commit is contained in:
stitchy 2024-12-26 04:13:45 +00:00
parent 77c7b9cade
commit 55eaa057ad
Signed by: stitchy
SSH key fingerprint: SHA256:yz2SoxdnY67tfY5Jzb0f2v8f5W3o/IF359kbcquWip8
6 changed files with 63 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bg.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

24
index.html
View file

@ -4,9 +4,31 @@
<meta charset="UTF-8" />
<title>Shaders are Fun</title>
<link rel="icon" href="https://fav.farm/🐴" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<script defer src="main.mjs" type="module"></script>
</head>
<body>
<canvas id="shader"> </canvas>
<main>
<h1 style="margin-bottom: 0px">
<svg viewBox="0 0 1000 40" xmlns="http://www.w3.org/2000/svg">
<text
x="500"
text-anchor="middle"
dominant-baseline="hanging"
fill="#51fefe"
stroke-width="6"
paint-order="stroke"
>
Stitchy's Shaders
</text>
</svg>
</h1>
<div class="render">
<canvas id="shader"> </canvas>
</div>
<div style="padding: 1rem">
<button id="reset_button">Reset</button>
</div>
</main>
</body>
</html>

4
main.mjs
View file

@ -2,8 +2,8 @@ import "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js"
import { initShader } from "./shader.mjs";
import { calcRotationMatrix } from "./algebra.mjs";
const CANVAS_WIDTH = 700;
const CANVAS_HEIGHT = 700;
const CANVAS_WIDTH = 800;
const CANVAS_HEIGHT = 800;
let TIME = 0;
let camera_pos = [0, 0, 0];
let mouse_pos = [0, 0];

2
raymarcher.glsl
View file

@ -20,7 +20,7 @@ const float PI = 3.1415;
//const vec3 camera_pos = vec3(0.);
const vec3 color1 = vec3(0.494, 0.361, 0.678);
const vec3 color2 = vec3(0.827, 0.945, 0.875);
const vec3 color2 = vec3(0.18, 0.945, 0.975);
// Scene Object (sphere)

2
shader.mjs
View file

@ -15,7 +15,7 @@ export async function initShader(c_width, c_height) {
gl.bindVertexArray(vao);
// manipulating bitfield for canvas
gl.clearColor(1, 1, 0, 1);
gl.clearColor(0.18, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Array of verticies for gpu to render

36
style.css Normal file
View file

@ -0,0 +1,36 @@
:root {
--text-color: #a1a;
--bg-color: #51fefe;
}
body {
margin: 0px;
padding: 0px;
background-image: url("./bg.webp");
background-attachment: fixed;
overflow: hidden;
}
main {
color: var(--text-color);
text-align: center;
margin: 1rem;
}
svg {
color: var(--text-color);
stroke: #a1a;
}
.render {
padding: 0px;
margin: 0px;
border: var(--text-color) 4px solid;
display: inline-flex;
}
button {
color: var(--text-color);
background-color: var(--bg-color);
border: 4px var(--text-color) solid;
padding: 0.5rem 2rem;
}