231 lines
6.9 KiB
Plaintext
231 lines
6.9 KiB
Plaintext
---
|
||
layout: layouts/base.njk
|
||
title: "Woo-Woo Incense Description Generator"
|
||
structuredData: none
|
||
---
|
||
<div class="container">
|
||
<h1>Woo-Woo Incense Description Generator</h1>
|
||
<p>Ever wonder how people come up with those confusing esoteric descriptions of their incense complete with “medicinal effects?” Want some ideas to spice up your Instagram profile, website, or Etsy listings? Well you’re in luck! Click the button below to generate an incense description so mystical you’ll swear your chakras are aligned! Music by <a href="https://pixabay.com/users/saavane-32312792/">saavane on Pixabay</a>. Woo sound effect by <a href="https://freesound.org/s/30995/">UncleSigmund on freesound</a>. Background effect from <a href="https://codepen.io/tommyho/pen/JjgoZLK">Tommy Ho on Codepen</a>. No <a href="/ai">AI</a> used—I can write slop on my own!</p>
|
||
|
||
<script src="/js/incense-description-generator.js"></script>
|
||
<script>
|
||
const audioOnClick = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
|
||
const bgMusic = new Audio("/audio/new-sun-428916.mp3");
|
||
|
||
window.addEventListener("pointermove", (e) => {
|
||
bgMusic.play();
|
||
});
|
||
|
||
window.addEventListener("touchstart", (e) => {
|
||
bgMusic.play();
|
||
});
|
||
|
||
const generateWoo = (elementId, button) => {
|
||
const element = document.getElementById(elementId);
|
||
const wooButton = document.getElementById(button);
|
||
|
||
audioOnClick.play();
|
||
|
||
element.innerHTML = `
|
||
<div>
|
||
${descriptionConstructor(adjective, noun, bodyPart, verb, preposition, ingredient)}
|
||
</div>
|
||
`;
|
||
wooButton.innerHTML = 'Generate Some More Woo!';
|
||
}
|
||
</script>
|
||
|
||
<button onclick="generateWoo('wooContainer', 'wooButton')" id="wooButton">Generate Some Woo!</button>
|
||
<div class="card" id="wooContainer" style="padding: var(--space-s); margin-top: var(--space-l);">Click the button to generate woo…</div>
|
||
</div>
|
||
|
||
<!-- Background effect from https://codepen.io/tommyho/pen/JjgoZLK -->
|
||
<canvas id="shaderCanvas"></canvas>
|
||
<script src="/js/three.min.js"></script>
|
||
<script>
|
||
let scene, camera, renderer, uniforms, material, mesh;
|
||
|
||
function init() {
|
||
scene = new THREE.Scene();
|
||
camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
|
||
|
||
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('shaderCanvas'), antialias: true });
|
||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
|
||
const vertexShader = `
|
||
varying vec2 vUv;
|
||
void main() {
|
||
vUv = uv;
|
||
gl_Position = vec4(position, 1.0);
|
||
}
|
||
`;
|
||
|
||
const fragmentShader = `
|
||
uniform float time;
|
||
uniform vec2 resolution;
|
||
varying vec2 vUv;
|
||
|
||
#define PI 3.14159265358979323846
|
||
|
||
vec2 rotate(vec2 v, float a) {
|
||
float s = sin(a);
|
||
float c = cos(a);
|
||
mat2 m = mat2(c, -s, s, c);
|
||
return m * v;
|
||
}
|
||
|
||
float random(vec2 st) {
|
||
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
|
||
}
|
||
|
||
float noise(vec2 st) {
|
||
vec2 i = floor(st);
|
||
vec2 f = fract(st);
|
||
|
||
float a = random(i);
|
||
float b = random(i + vec2(1.0, 0.0));
|
||
float c = random(i + vec2(0.0, 1.0));
|
||
float d = random(i + vec2(1.0, 1.0));
|
||
|
||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||
|
||
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
|
||
}
|
||
|
||
float fbm(vec2 st) {
|
||
float value = 0.0;
|
||
float amplitude = 0.5;
|
||
float frequency = 0.0;
|
||
for (int i = 0; i < 6; i++) {
|
||
value += amplitude * noise(st);
|
||
st *= 2.0;
|
||
amplitude *= 0.5;
|
||
}
|
||
return value;
|
||
}
|
||
|
||
vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
|
||
return a + b * cos(6.28318 * (c * t + d));
|
||
}
|
||
|
||
vec3 vibrancePalette(float t) {
|
||
vec3 a = vec3(0.5, 0.5, 0.5);
|
||
vec3 b = vec3(0.5, 0.5, 0.5);
|
||
vec3 c = vec3(1.0, 1.0, 1.0);
|
||
vec3 d = vec3(0.0, 0.33, 0.67);
|
||
return palette(t, a, b, c, d);
|
||
}
|
||
|
||
vec3 warmPalette(float t) {
|
||
vec3 a = vec3(0.5, 0.5, 0.5);
|
||
vec3 b = vec3(0.5, 0.5, 0.5);
|
||
vec3 c = vec3(1.0, 1.0, 1.0);
|
||
vec3 d = vec3(0.0, 0.10, 0.20);
|
||
return palette(t, a, b, c, d);
|
||
}
|
||
|
||
vec3 coolPalette(float t) {
|
||
vec3 a = vec3(0.5, 0.5, 0.5);
|
||
vec3 b = vec3(0.5, 0.5, 0.5);
|
||
vec3 c = vec3(1.0, 1.0, 1.0);
|
||
vec3 d = vec3(0.3, 0.20, 0.20);
|
||
return palette(t, a, b, c, d);
|
||
}
|
||
|
||
vec3 rainbowPalette(float t) {
|
||
vec3 a = vec3(0.5, 0.5, 0.5);
|
||
vec3 b = vec3(0.5, 0.5, 0.5);
|
||
vec3 c = vec3(1.0, 1.0, 1.0);
|
||
vec3 d = vec3(0.0, 0.33, 0.67);
|
||
return palette(t, a, b, c, d);
|
||
}
|
||
|
||
void main() {
|
||
vec2 st = gl_FragCoord.xy / resolution.xy;
|
||
st.x *= resolution.x / resolution.y;
|
||
|
||
vec2 q = vec2(0.);
|
||
q.x = fbm(st + 0.1 * time);
|
||
q.y = fbm(st + vec2(1.0));
|
||
|
||
vec2 r = vec2(0.);
|
||
r.x = fbm(st + 1.0 * q + vec2(1.7, 9.2) + 0.15 * time);
|
||
r.y = fbm(st + 1.0 * q + vec2(8.3, 2.8) + 0.126 * time);
|
||
|
||
float f = fbm(st + r);
|
||
|
||
vec2 p = st * 2.0 - 1.0;
|
||
float a = atan(p.y, p.x);
|
||
float r2 = length(p);
|
||
|
||
vec2 uv = vec2(a / PI, r2);
|
||
uv = rotate(uv, time * 0.1);
|
||
|
||
vec3 color1 = vibrancePalette(f + time * 0.1);
|
||
vec3 color2 = warmPalette(length(q));
|
||
vec3 color3 = coolPalette(length(r.x));
|
||
vec3 color4 = rainbowPalette(f * 2.0 + time * 0.2);
|
||
|
||
vec3 color = mix(color1, color2, 0.5);
|
||
color = mix(color, color3, 0.3);
|
||
color = mix(color, color4, sin(time * 0.1) * 0.5 + 0.5);
|
||
|
||
color += 0.05 * vec3(1.0) * smoothstep(0.1, 0.2, fbm(10.0 * uv + time * 0.5));
|
||
|
||
// Add some extra vibrancy
|
||
color = pow(color, vec3(0.8));
|
||
color *= 1.1;
|
||
|
||
gl_FragColor = vec4(color, 1.0);
|
||
}
|
||
`;
|
||
|
||
uniforms = {
|
||
time: { value: 1.0 },
|
||
resolution: { value: new THREE.Vector2() }
|
||
};
|
||
|
||
material = new THREE.ShaderMaterial({
|
||
uniforms: uniforms,
|
||
vertexShader: vertexShader,
|
||
fragmentShader: fragmentShader
|
||
});
|
||
|
||
mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
|
||
scene.add(mesh);
|
||
|
||
onWindowResize();
|
||
window.addEventListener('resize', onWindowResize, false);
|
||
}
|
||
|
||
function onWindowResize() {
|
||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
uniforms.resolution.value.x = renderer.domElement.width;
|
||
uniforms.resolution.value.y = renderer.domElement.height;
|
||
}
|
||
|
||
function animate(timestamp) {
|
||
requestAnimationFrame(animate);
|
||
uniforms.time.value = timestamp * 0.001;
|
||
renderer.render(scene, camera);
|
||
}
|
||
|
||
init();
|
||
animate(0);
|
||
</script>
|
||
<style>
|
||
body {
|
||
background: none;
|
||
}
|
||
canvas {
|
||
display: block;
|
||
opacity: .35;
|
||
pointer-events: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
</style>
|