Skip to content

Commit

Permalink
Update index.html with 2 shaders
Browse files Browse the repository at this point in the history
  • Loading branch information
@Goyaqua
Goyaqua authored Sep 21, 2024
1 parent b368923 commit 57b7330
Showing 1 changed file with 70 additions and 180 deletions.
250 changes: 70 additions & 180 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GlslCanvas</title>

<script type="text/javascript" src="dist/GlslCanvas.js"></script>

<style>
body {
background: #101515;
}

#glslCanvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}​

.blank {
}

#credits {
position: absolute;
bottom: 10px;
right: 15px;
text-align: right;
background: rgba(0,0,0,.5);
padding: 12px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0px
}

.label {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
line-height: 0.0;
}

#title {
font-size: 24px;
font-weight: 600;
}

#author {
font-size: 14px;
font-style: italic;
font-weight: 100;
}
</style>

</head>
<body>
<canvas id="glslCanvas" data-fragment='#ifdef GL_ES
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GLSL Shader Gallery</title>
<script type="text/javascript" src="dist/GlslCanvas.js"></script>
<style>
body {
background-color: #101515;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.shader-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
}
.shader-item {
position: relative;
}
canvas {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="shader-grid">
<div class="shader-item">
<canvas id="shader1" data-fragment="#ifdef GL_ES
precision mediump float;
#endif
Expand Down Expand Up @@ -104,135 +84,45 @@
gl_FragColor = vec4(color,1.0);
}
' width="800" height="600" data-textures="data/moon.jpg"></canvas>

<div id="credits">
<p class="label" id="title"></p>
<p class="label" id="author"></p>
}" width="400" height="300"></canvas>
</div>
</body>

<script>
var canvas = document.getElementById("glslCanvas");
var sandbox = new GlslCanvas(canvas);
var texCounter = 0;
var sandbox_content = "";
var sandbox_title = "";
var sandbox_author = "";
var sandbox_thumbnail = "";
canvas.style.width = '100%';
canvas.style.height = '100%';

function parseQuery (qstr) {
var query = {};
var a = qstr.split('&');
for (var i in a) {
var b = a[i].split('=');
query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]);
}
return query;
}

function load(url) {
// Make the request and wait for the reply
fetch(url)
.then(function (response) {
// If we get a positive response...
if (response.status !== 200) {
console.log('Error getting shader. Status code: ' + response.status);
return;
}
// console.log(response);
return response.text();
})
.then(function(content) {
sandbox_content = content;
sandbox.load(content);

var title = addTitle();
var author = addAuthor();
if ( title === "unknown" && author === "unknown") {
document.getElementById("credits").style.visibility = "hidden";
} else {
document.getElementById("credits").style.visibility = "visible";
}

addMeta({
'title' : title + ' by ' + author,
'type' : 'website',
'url': window.location.href,
'image': sandbox_thumbnail
})
})
}

function addTitle() {
var result = sandbox_content.match(/\/\/\s*[T|t]itle\s*:\s*([\w|\s|\@|\(|\)|\-|\_]*)/i);
if (result && !(result[1] === ' ' || result[1] === '')) {
sandbox_title = result[1].replace(/(\r\n|\n|\r)/gm, '');
var title_el = document.getElementById("title").innerHTML = sandbox_title;
return sandbox_title;
}
else {
return "unknown";
}
}

function addAuthor() {
var result = sandbox_content.match(/\/\/\s*[A|a]uthor\s*[\:]?\s*([\w|\s|\@|\(|\)|\-|\_]*)/i);
if (result && !(result[1] === ' ' || result[1] === '')) {
sandbox_author = result[1].replace(/(\r\n|\n|\r)/gm, '');
document.getElementById("author").innerHTML = sandbox_author;
return sandbox_author;
}
else {
return "unknown";
}
}

function addMeta(obj) {
for (var key in obj) {
var meta = document.createElement('meta');
meta.setAttribute('og:'+key, obj[key]);
document.getElementsByTagName('head')[0].appendChild(meta);
}
}
<div class="shader-item">
<canvas id="shader2" data-fragment="#ifdef GL_ES
precision mediump float;
#endif
var query = parseQuery(window.location.search.slice(1));
if (query && query.log) {
sandbox_thumbnail = 'https://thebookofshaders.com/log/' + query.log + '.png';
load('https://thebookofshaders.com/log/' + query.log + '.frag');
}
uniform float u_time;
uniform vec2 u_resolution;
if (window.location.hash !== '') {
var hashes = location.hash.split('&');
for (var i in hashes) {
var ext = hashes[i].substr(hashes[i].lastIndexOf('.') + 1);
var path = hashes[i];
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec3 c;
float l, z = u_time; // Use u_time instead of t
for(int i = 0; i <3 ; i++) {
vec2 uv, p = fragCoord.xy / (u_resolution); // Use u_resolution instead of r
uv = p;
//p -= 0.500;
p *= 5.0;
p.x *= u_resolution.x / u_resolution.y; // Use u_resolution
z += 0.07;
l = length(p);
uv += p / l * (cos(z) + 1.0) * abs(cos(l * 9.0 -z - z));
c[i] = 0.04 / length(mod(uv, 0.0) - 0.5);
}
fragColor = vec4(c / l, u_time); // Use u_time instead of t
}
// Extract hash if is present
if (path.search('#') === 0) {
path = path.substr(1);
}
void main() {
mainImage(gl_FragColor, gl_FragCoord.xy); // Call mainImage from main
}" width="400" height="300"></canvas>
</div>
<!-- Add more shaders as needed -->
</div>

if (ext === 'frag') {
load(path);
}
else if (ext === 'png' || ext === 'jpg' || ext === 'PNG' || ext === 'JPG') {
sandbox.setUniform("u_tex"+texCounter.toString(), path);
texCounter++;
}
}
}
</script>
<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
ga("create", "UA-18824436-2", "auto");
ga("send", "pageview");
document.querySelectorAll('canvas').forEach(function(canvas) {
var sandbox = new GlslCanvas(canvas);
});
</script>
</body>
</html>

0 comments on commit 57b7330

Please sign in to comment.