noe/3d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add 002

Browse source
This commit is contained in:
41666 2023-10-01 17:56:34 -04:00
parent d0957bf85a
commit 8cbe93d74d
8 changed files with 152 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -9,6 +9,7 @@ https://art.mekanoe.com
## Artworks ## Artworks
- [./001-platform-provenance](https://art.mekanoe.com/001-platform-provenance) - [./001-platform-provenance](https://art.mekanoe.com/001-platform-provenance)
- [./002-rainbow-trinity](https://art.mekanoe.com/002-rainbow-trinity)
## Development ## Development
@ -18,6 +19,8 @@ https://art.mekanoe.com
`bun serve` to serve them locally `bun serve` to serve them locally
`bun dev` if you're developing the templates for auto-generation.
### Infrastructure ### Infrastructure
- The "generator" does - The "generator" does

2
generators/README.md.txt
View file

@ -18,6 +18,8 @@ https://art.mekanoe.com
`bun serve` to serve them locally `bun serve` to serve them locally
`bun dev` if you're developing the templates for auto-generation.
### Infrastructure ### Infrastructure
- The "generator" does - The "generator" does

8
generators/generate.ts
View file

@ -13,7 +13,8 @@ for (const htmlFile of allHtmls) {
const allWorks = globSync("html/*.js") const allWorks = globSync("html/*.js")
.map((file) => file.replace("html/", "").replace(".js", "")) .map((file) => file.replace("html/", "").replace(".js", ""))
.filter((work) => work !== "platform"); .sort()
.reverse();
console.log({ allWorks }); console.log({ allWorks });
@ -25,13 +26,16 @@ for (const work of allWorks) {
const index = indexTemplate.replace( const index = indexTemplate.replace(
"<!--/INSERT/-->", "<!--/INSERT/-->",
allWorks.map((work) => `<li><a href="/${work}">./${work}</a></li>`).join("\n") allWorks
.map((work) => `<li><a href="/${work}">./${work}</a></li>`)
.join("\n ")
); );
await Bun.write("html/index.html", index); await Bun.write("html/index.html", index);
const readme = readmeTemplate.replace( const readme = readmeTemplate.replace(
"<!--/INSERT/-->", "<!--/INSERT/-->",
allWorks allWorks
.reverse()
.map((work) => `- [./${work}](https://art.mekanoe.com/${work})`) .map((work) => `- [./${work}](https://art.mekanoe.com/${work})`)
.join("\n") .join("\n")
); );

31
html/002-rainbow-trinity.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>com.mekanoe.art // 002-rainbow-trinity</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
color: white;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<link rel="stylesheet" href="work.css" />
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
</main>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"
integrity="sha512-cR3oS5mKRWD+38vYi1CNJk1DLpi104ovuQBuVv9p7nNxeqzSNiHzlboK2BZQybmpTi1QNnQ5unYajpURcMjeZQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/002-rainbow-trinity.js" type="module"></script>

74
html/002-rainbow-trinity.js Normal file
View file

@ -0,0 +1,74 @@
import { Shader, colorUtils, commonFrag, commonVert } from "./lib/shader.js";
import { BasicPlane } from "./lib/basic-plane.js";
import { App } from "./lib/app.js";
const app = new App({ fov: 20 });
const gl = app.gl;
const shader = new Shader(app)
.attach(
gl.VERTEX_SHADER,
`
${commonVert}
varying highp vec2 vTextureCoord;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
vTextureCoord = aTextureCoord;
}
`
)
.attach(
gl.FRAGMENT_SHADER,
`
${commonFrag}
${colorUtils}
varying highp vec2 vTextureCoord;
vec3 circle(vec2 pos, vec3 color) {
float radius = 0.75;
float dist = length(pos);
float circle = smoothstep(radius + 0.001, radius, dist);
return color * vec3(1.0 - circle);
}
vec3 colorRotator(vec3 color, float phase, vec2 uv) {
color.x += uSinTime * 0.0001 + uv.y;
vec3 hsv = rgb2hsv(color);
hsv.x += uSinTime * 0.001 * uv.y - phase;
hsv.y = 1.0;
hsv.z = 0.5;
vec3 rgb = hsv2rgb(hsv);
return rgb;
}
void main() {
float value = sin(uTime * 0.00025) * 0.5 + 0.5;
vec2 sv = vec2(1.0, 1.0);
vec3 triUpper = hsv2rgb(vec3(value, sv));
vec3 triLeft = hsv2rgb(vec3(value + 0.33, sv));
vec3 triRight = hsv2rgb(vec3(value + 0.66, sv));
vec2 uv = vTextureCoord * 2.0 - 1.0;
vec3 color = vec3(0.0);
// place 3 circles in a triangle
color += circle(vec2(uv.x, uv.y + 0.5), colorRotator(triUpper, 1.0, uv));
color += circle(vec2(uv.x - 0.5, uv.y - 0.33), colorRotator(triLeft, 0.667, uv));
color += circle(vec2(uv.x + 0.5, uv.y - 0.33), colorRotator(triRight, 0.333, uv));
// color = 1.0 - color;
gl_FragColor = vec4(color, 1.0);
gl_FragColor = clamp(gl_FragColor, 0.0, 1.0);
}
`
)
.link();
const plane = new BasicPlane(app);
plane.attachShader(shader);
app.loop();

1
html/index.html
View file

@ -30,6 +30,7 @@
</header> </header>
<section id="works"> <section id="works">
<ul> <ul>
<li><a href="/002-rainbow-trinity">./002-rainbow-trinity</a></li>
<li><a href="/001-platform-provenance">./001-platform-provenance</a></li> <li><a href="/001-platform-provenance">./001-platform-provenance</a></li>
</ul> </ul>
</section> </section>

34
html/lib/shader.js
View file

@ -71,3 +71,37 @@ export class Shader {
this.updateTime(); this.updateTime();
} }
} }
export const colorUtils = `
vec3 rgb2hsv(vec3 c) {
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
`;
export const commonFrag = `
precision highp float;
uniform float uTime;
uniform float uSinTime;
uniform float uCosTime;
`;
export const commonVert = `
attribute vec4 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
`;

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "noeidelon", "name": "noeidelon",
"type": "module", "type": "module",
"main": "./generators/generate.ts", "main": "./generators/generate.js",
"scripts": { "scripts": {
"build": "bun $BUNFLAGS ./generators/generate.ts", "build": "bun $BUNFLAGS ./generators/generate.ts",
"build:watch": "BUNFLAGS=--watch bun run build", "build:watch": "BUNFLAGS=--watch bun run build",