add 002
This commit is contained in:
parent
d0957bf85a
commit
8cbe93d74d
8 changed files with 152 additions and 3 deletions
|
|
@ -9,6 +9,7 @@ https://art.mekanoe.com
|
|||
## Artworks
|
||||
|
||||
- [./001-platform-provenance](https://art.mekanoe.com/001-platform-provenance)
|
||||
- [./002-rainbow-trinity](https://art.mekanoe.com/002-rainbow-trinity)
|
||||
|
||||
## Development
|
||||
|
||||
|
|
@ -18,6 +19,8 @@ https://art.mekanoe.com
|
|||
|
||||
`bun serve` to serve them locally
|
||||
|
||||
`bun dev` if you're developing the templates for auto-generation.
|
||||
|
||||
### Infrastructure
|
||||
|
||||
- The "generator" does
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ https://art.mekanoe.com
|
|||
|
||||
`bun serve` to serve them locally
|
||||
|
||||
`bun dev` if you're developing the templates for auto-generation.
|
||||
|
||||
### Infrastructure
|
||||
|
||||
- The "generator" does
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ for (const htmlFile of allHtmls) {
|
|||
|
||||
const allWorks = globSync("html/*.js")
|
||||
.map((file) => file.replace("html/", "").replace(".js", ""))
|
||||
.filter((work) => work !== "platform");
|
||||
.sort()
|
||||
.reverse();
|
||||
|
||||
console.log({ allWorks });
|
||||
|
||||
|
|
@ -25,13 +26,16 @@ for (const work of allWorks) {
|
|||
|
||||
const index = indexTemplate.replace(
|
||||
"<!--/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);
|
||||
|
||||
const readme = readmeTemplate.replace(
|
||||
"<!--/INSERT/-->",
|
||||
allWorks
|
||||
.reverse()
|
||||
.map((work) => `- [./${work}](https://art.mekanoe.com/${work})`)
|
||||
.join("\n")
|
||||
);
|
||||
|
|
|
|||
31
html/002-rainbow-trinity.html
Normal file
31
html/002-rainbow-trinity.html
Normal 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
74
html/002-rainbow-trinity.js
Normal 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();
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
</header>
|
||||
<section id="works">
|
||||
<ul>
|
||||
<li><a href="/002-rainbow-trinity">./002-rainbow-trinity</a></li>
|
||||
<li><a href="/001-platform-provenance">./001-platform-provenance</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -71,3 +71,37 @@ export class Shader {
|
|||
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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "noeidelon",
|
||||
"type": "module",
|
||||
"main": "./generators/generate.ts",
|
||||
"main": "./generators/generate.js",
|
||||
"scripts": {
|
||||
"build": "bun $BUNFLAGS ./generators/generate.ts",
|
||||
"build:watch": "BUNFLAGS=--watch bun run build",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue