Skip to content

Commit a40d3f9

Browse files
eilseqeilseq
committed
eilseq-fxhash-template
derived from EILSEQ artwork miss-lexotan, hosted on fxhash.
1 parent 49df29c commit a40d3f9

File tree

10 files changed

+1068
-6
lines changed

10 files changed

+1068
-6
lines changed

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
# Shader Park Example Templates 🎉
2+
23
Example templates for [Shader Park](https://shaderpark.netlify.com/) using [shader-park-core](https://github.com/shader-park/shader-park-core).
34

45
<br/>
56

6-
77
## Examples using npm
8+
89
Examples using Shader Park as an npm package are listed as folders in this repo with info in each Readme.
910

1011
[es6-starter-template](es6-starter-template/): Quick start using shader-park-core and parcel
@@ -13,6 +14,8 @@ Examples using Shader Park as an npm package are listed as folders in this repo
1314

1415
[nft-hicetnunc-three-template](nft-hicetnunc-three-template/): Create your own interactive NFT using Shader Park and host it on Hic et Nunc
1516

17+
[eilseq-fxhash-template](eilseq-fxhash-template/): Create FXHash bundle using Shader Park, Three.js and Vite
18+
1619
TODO:
1720

1821
es6-starter-interactive-template
@@ -23,7 +26,6 @@ react-template
2326

2427
react3fiber-template
2528

26-
2729
<br/>
2830

2931
## Quick Start Examples
@@ -37,9 +39,9 @@ Examples are hosted on Glitch to quickly preview and live edit.
3739
[Starter Template With Mouse Interactivity](https://glitch.com/edit/#!/shader-park-interactive)
3840

3941
[Starter Template With Scroll Interactivity](https://glitch.com/edit/#!/shader-park-interactive-scroll)
40-
42+
4143
[Starter Template with GLSL (yes there's a glsl library you can still access instead of javascript)](https://glitch.com/edit/#!/shader-park-template-glsl)
42-
44+
4345
<br/>
4446

4547
[Three.js Starter Template](https://glitch.com/edit/#!/shader-park-three-js)
@@ -49,5 +51,3 @@ Examples are hosted on Glitch to quickly preview and live edit.
4951
[Three.js Text Template](https://glitch.com/edit/#!/shader-park-three-js-text)
5052

5153
[Three.js WebXR Template](https://glitch.com/edit/#!/shader-park-webxr)
52-
53-

‎eilseq-fxhash-template/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# EILSEQ Shader Park Template
2+
3+
Example templates for [Shader Park](https://shaderpark.netlify.com/) using [shader-park-core](https://github.com/shader-park/shader-park-core) and [Vite](https://vitejs.dev) to create [fxhash](https://www.fxhash.xyz) zip-bundle.
4+
5+
<br/>
6+
7+
derived from EILSEQ's artwork [Miss Lexotan](https://www.fxhash.xyz/generative/24475)
8+
9+
## Scripts
10+
11+
1. install dependencies
12+
`yarn` OR `npm i install`
13+
14+
2. to run dev server
15+
`yarn dev` OR `npm run dev`
16+
17+
3. to build for fxhash
18+
`yarn build` OR `npm run build`

‎eilseq-fxhash-template/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>vite+fxhash shader-park template</title>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<script id="fxhash-snippet">
9+
//---- do not edit the following code (you can indent as you wish)
10+
let alphabet = "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"
11+
var fxhash = "oo" + Array(49).fill(0).map(_ => alphabet[(Math.random() * alphabet.length) | 0]).join('')
12+
let b58dec = str => [...str].reduce((p, c) => p * alphabet.length + alphabet.indexOf(c) | 0, 0)
13+
let fxhashTrunc = fxhash.slice(2)
14+
let regex = new RegExp(".{" + ((fxhashTrunc.length / 4) | 0) + "}", 'g')
15+
let hashes = fxhashTrunc.match(regex).map(h => b58dec(h))
16+
let sfc32 = (a, b, c, d) => {
17+
return () => {
18+
a |= 0; b |= 0; c |= 0; d |= 0
19+
var t = (a + b | 0) + d | 0
20+
d = d + 1 | 0
21+
a = b ^ b >>> 9
22+
b = c + (c << 3) | 0
23+
c = c << 21 | c >>> 11
24+
c = c + t | 0
25+
return (t >>> 0) / 4294967296
26+
}
27+
}
28+
var fxrand = sfc32(...hashes)
29+
// true if preview mode active, false otherwise
30+
// you can append preview=1 to the URL to simulate preview active
31+
var isFxpreview = new URLSearchParams(window.location.search).get('preview') === "1"
32+
// call this method to trigger the preview
33+
function fxpreview() {
34+
console.log("fxhash: TRIGGER PREVIEW")
35+
}
36+
//---- /do not edit the following code
37+
</script>
38+
</head>
39+
40+
<body>
41+
<script type="module" src="/main.js"></script>
42+
</body>
43+
44+
</html>

‎eilseq-fxhash-template/main.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { start, resetCamera, setSize, setRatio } from "./src/context"
2+
3+
import "./style.css"
4+
5+
const getVMax = () => {
6+
const { innerWidth: w, innerHeight: h } = window
7+
const isLandscape = w > h
8+
return isLandscape ? w : h
9+
}
10+
setRatio(1)
11+
setSize(getVMax())
12+
13+
window.addEventListener("resize", () => {
14+
setSize(getVMax())
15+
setRatio()
16+
resetCamera()
17+
})
18+
19+
start(25)

0 commit comments

Comments
 (0)