Skip to content

Commit df2b2f8

Browse files
danielfvmdanielfvm
committed
Renamed to shadify
1 parent 601ca5c commit df2b2f8

File tree

11 files changed

+126
-57
lines changed

11 files changed

+126
-57
lines changed

‎README.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Shadify
2-
A library for adding a shader wallpaper to the background of your website.
3-
You can find a live example [here](https://danielfvm.github.io/Shadify/example/) and you can find the code at `example/`
2+
A library for adding a shader wallpaper to the background of your website or any of your divs.
3+
You can find a live example [here](https://danielfvm.github.io/Shadify/example/) and you can find the code in the `example/` folder.
44

55
![untitled](https://github.com/danielfvm/Shadify/assets/23420640/bee4a957-7d08-4db6-849c-7e7ff3bdd1d8)
66

@@ -31,6 +31,16 @@ but at twice the speed and a quarter the quality.
3131
* Support for setting shader quality and speed
3232
* Supports mouse input
3333
* Attributes can be changed using JavaScript at runtime
34+
* Access the shader uniforms using `myDiv.shadify.getUniform(name)`
3435

3536
## Planned
36-
* Add support for custom uniform values that can be passed to the shaders
37+
* Support links from `shadertoy.com`
38+
39+
## Build library
40+
Run following commands to build this library yourself. You will find the output at `dist/`.
41+
```bash
42+
git clone https://github.com/danielfvm/Shadify.git
43+
cd Shadify
44+
npm install
45+
npm run build
46+
```

‎example/index.html‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>Example Shader Wallpaper</title>
7-
<script type="text/javascript" src="../lib/WebShaderWallpaper.js"></script>
6+
<title>Shadify</title>
7+
<script type="text/javascript" src="../lib/Shadify.js"></script>
88
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.18"></script>
99
</head>
1010

11-
<body data-shader="https://glslsandbox.com/e#106580.0" data-shader-quality="2" data-shader-speed="0.1">
12-
<h1>Example Shader Wallpaper</h1>
13-
<div class="test" data-shader="https://glslsandbox.com/e#106606.0" data-shader-quality="8">
11+
<body data-shader="https://glslsandbox.com/e#106580.0" id="test">
12+
<h1>Welcome to Shadify!</h1>
13+
<div class="test" data-shader="https://glslsandbox.com/e#106606.0" data-shader-quality="8" data-shader-speed="2">
1414
<h1>Hello World!</h1>
1515
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
1616
</div>
@@ -23,7 +23,6 @@ <h1>Hello World!</h1>
2323
}
2424

2525
.test {
26-
background: transparent;
2726
color: white;
2827
width: 1000px;
2928
height: 800px;
@@ -32,6 +31,20 @@ <h1>Hello World!</h1>
3231
padding-left: 0px;
3332
font-size: 40px;
3433
padding: 50px;
34+
transition: background 0.1s;
3535
}
3636
</style>
37+
38+
<script>
39+
const gui = new lil.GUI();
40+
const background = document.querySelector('#test');
41+
42+
const options = {
43+
quality: 2.0,
44+
speed: 1.0,
45+
};
46+
47+
gui.add(options, 'quality').onFinishChange(() => background.shadify.quality = options.quality);
48+
gui.add(options, 'speed').onFinishChange(() => background.shadify.speed = options.speed);
49+
</script>
3750
</html>

‎lib/Shadify.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/Shadify.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/WebShaderWallpaper.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎lib/WebShaderWallpaper.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
{
2-
"name": "webshaderwallpaper",
3-
"version": "1.0.0",
4-
"description": "A library for adding a shader wallpaper to the background of your website. ",
5-
"main": "lib/WebShaderWallpaper.js",
2+
"name": "shadify",
3+
"version": "1.0.1",
4+
"description": "A library for adding shaders to the background of your website.",
5+
"main": "lib/shadify.js",
66
"scripts": {
77
"build": "NODE_ENV=production node_modules/.bin/webpack --config webpack.config.js --progress"
88
},
99
"repository": {
1010
"type": "git",
11-
"url": "git+https://github.com/danielfvm/WebShaderWallpaper.git"
11+
"url": "git+https://github.com/danielfvm/Shadify.git"
1212
},
1313
"keywords": [
1414
"shader",
15-
"wallpaper"
15+
"wallpaper",
16+
"animations"
1617
],
1718
"author": "DeanCode",
1819
"license": "MIT",
1920
"bugs": {
20-
"url": "https://github.com/danielfvm/WebShaderWallpaper/issues"
21+
"url": "https://github.com/danielfvm/Shadify/issues"
2122
},
22-
"homepage": "https://github.com/danielfvm/WebShaderWallpaper#readme",
23+
"homepage": "https://github.com/danielfvm/Shadify#readme",
2324
"devDependencies": {
2425
"ts-jest": "^29.1.1",
2526
"typescript": "^5.2.2",

0 commit comments

Comments
 (0)