nicwands · nicwands · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021 · Aug 24, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Rumfoords
+# Code Study Boilerplate
 
 **Local Development**
 

diff --git a/app.html b/app.html
@@ -1,10 +1,3 @@
-<!--
-    /* WEBSITE CREDITS */
-
-    Website Design / Development: CTHDRL
-    Contact: build@cthdrl.co
-    Site: https://cthdrl.co
--->
 <!DOCTYPE html>
 <html {{ HTML_ATTRS }}>
     <head {{ HEAD_ATTRS }}>

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -1,5 +1,5 @@
 @import 'vars';
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 html {
     font-size: 16px;
@@ -12,7 +12,7 @@ body {
     --black: #000000;
     --white: #ffffff;
 
-    --font-sans: 'Poppins', sans-serif;
+    --font-sans: 'IBM Plex Sans', sans-serif;
     --font-serif: 'EB Garamond', serif;
 
     @include fontSize(16px);
@@ -107,20 +107,15 @@ a {
     path {
         transition: fill 0.3s;
     }
-
-    @include hover {
-        color: var(--white);
-
-        path {
-            fill: var(--white);
-        }
+    &:hover {
+        text-decoration: underline;
     }
 }
 
 .contained {
     padding-right: var(--margin);
     padding-left: var(--margin);
-    // max-width: 1380px;
+    max-width: 1200px;
     margin-right: auto;
     margin-left: auto;
 }

diff --git a/components/Blotter.vue b/components/Blotter.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="blotter">
+        <h1 ref="blotterText"></h1>
+    </div>
+</template>
+
+<script>
+export default {
+    async mounted() {
+        var text = new Blotter.Text('Hello', {
+            family: 'serif',
+            size: 120,
+            fill: '#171717',
+        })
+
+        var material = new Blotter.ChannelSplitMaterial()
+        // const mainImageSource = `
+        //     void mainImage(out vec4 mainImage, in vec2 fragCoord) {
+        //         vec2 uv = fragCoord.xy / uResolution.xy;
+        //         vec3 color = vec3(0.0, 0.0, 0.0);
+
+        //         // color.r = 1.0
+
+        //         mainImage = vec4(color, textTexture(uv).a);
+        //     }
+        // `
+
+        // var material = new Blotter.ShaderMaterial(mainImageSource, {
+        //     uniforms: {
+        //         uColor: { type: '3f', value: [1.0, 1.0, 0.0] }, // (R, G, B)
+        //     },
+        // })
+
+        var blotter = new Blotter(material, { texts: text })
+
+        var scope = blotter.forText(text)
+
+        scope.appendTo(this.$refs.blotterText)
+    },
+}
+</script>
+
+<style lang="scss">
+.blotter {
+}
+</style>
diff --git a/components/StudyBody.vue b/components/StudyBody.vue
@@ -0,0 +1,32 @@
+<template>
+    <section class="study-body">
+        <client-only>
+            <vhs-image :imageSrc="image" />
+        </client-only>
+    </section>
+</template>
+
+<script>
+const imageUrl = '/images/alpaca.jpg'
+// const imageUrl = '/videos/shovel.mp4'
+// const imageUrl =
+// ;('https://prismic-io.s3.amazonaws.com/cthdrl/cbf0be61-e359-44ea-9c37-3416fbc5d352_WW_REEL_Crop.mp4')
+
+export default {
+    data() {
+        return {
+            image: imageUrl,
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+.study-body {
+    border: 1px solid var(--black);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: relative;
+}
+</style>
diff --git a/components/VhsImage.vue b/components/VhsImage.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="vhs-image">
+        <video :src="imageSrc" ref="videoEl" muted autoplay loop />
+        <canvas ref="canvasEl" id="canvas" width="256" height="128" hidden />
+
+        <shader-doodle shadertoy>
+            <!-- <sd-texture
+                src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/476907/noise1.png"
+                name="noise"
+            ></sd-texture> -->
+            <sd-texture :src="imageSrc" ref="texture" name="media" />
+            <script type="x-shader/x-fragment" v-html="fragmentShader" />
+        </shader-doodle>
+    </div>
+</template>
+
+<script>
+// import fragmentShader from 'raw-loader!glslify-loader!./fragment-shader.fs'
+import fragmentShader from 'raw-loader!glslify-loader!./fragment-shader-2.fs'
+if (!process.server) {
+    require('shader-doodle')
+}
+
+export default {
+    props: {
+        imageSrc: String,
+    },
+    data() {
+        return {
+            fragmentShader,
+            videoReady: false,
+        }
+    },
+    mounted() {
+        if (!process.server) {
+            const videoEl = this.$refs.videoEl
+            const canvas = this.$refs.canvasEl
+            canvas.height = 1024
+            canvas.width = 1024
+            const ctx = canvas.getContext('2d')
+
+            // videoEl.addEventListener('canplaythrough', () => {
+            //     this.videoReady = true
+            //     setInterval(() => {
+            //         this.processFrame(canvas, ctx)
+            //     }, 1000 / 30)
+            // })
+        }
+    },
+    methods: {
+        initText() {
+            const Text = require('gl-text')
+
+            let text1 = new Text(this.$refs.canvas)
+
+            text1.update({
+                position: [0, 0],
+                text: 'ABC',
+                font: '16px Helvetica, sans-serif',
+            })
+            text1.render()
+        },
+        processFrame(canvas, ctx) {
+            const video = this.$refs.videoEl
+            if (ctx.drawImage) {
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.vhs-image {
+    @include fill;
+    width: 100%;
+    height: 100%;
+
+    shader-doodle {
+        width: 100%;
+        height: 100%;
+    }
+
+    video {
+        opacity: 0;
+        position: absolute;
+    }
+}
+</style>
diff --git a/components/VhsText.vue b/components/VhsText.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="vhs-text">
+        <span>
+            <slot />
+
+            <canvas ref="canvas" id="canvas" />
+
+            <shader-doodle shadertoy>
+                <sd-texture :src="$refs.canvas" ref="texture" name="media" />
+                <script type="x-shader/x-fragment" v-html="fragmentShader" />
+            </shader-doodle>
+        </span>
+    </div>
+</template>
+
+<script>
+import fragmentShader from 'raw-loader!glslify-loader!./fragment-shader-2.fs'
+if (!process.server) {
+    require('shader-doodle')
+}
+
+export default {
+    data() {
+        return {
+            fragmentShader,
+        }
+    },
+    mounted() {
+        const canvas = this.$refs.canvas
+        const ctx = canvas.getContext('2d')
+        const text = this.$slots.default[0].text
+        ctx.font = 'Bold ' + canvas.width / 12 + "px 'Helvetica'"
+        ctx.fillText(text, 0, 0)
+    },
+}
+</script>
+
+<style lang="scss">
+.vhs-text {
+    position: relative;
+
+    canvas,
+    shader-doodle {
+        @include fill;
+        height: 100%;
+    }
+}
+</style>
diff --git a/components/fragment-shader-2.fs b/components/fragment-shader-2.fs
@@ -0,0 +1,80 @@
+#define time iTime
+#define resolution ( iResolution.xy )
+#define iChannel0 iChannel0
+
+#define PI 3.14159265
+
+uniform sampler2D media;
+
+vec3 tex2D( sampler2D _tex, vec2 _p ){
+  vec3 col = texture2D( _tex, _p ).xyz;
+  if ( 0.5 < abs( _p.x - 0.5 ) ) {
+    col = vec3( 0.1 );
+  }
+  return col;
+}
+
+float hash( vec2 _v ){
+  return fract( sin( dot( _v, vec2( 89.44, 19.36 ) ) ) * 22189.22 );
+}
+
+float iHash( vec2 _v, vec2 _r ){
+  float h00 = hash( vec2( floor( _v * _r + vec2( 0.0, 0.0 ) ) / _r ) );
+  float h10 = hash( vec2( floor( _v * _r + vec2( 1.0, 0.0 ) ) / _r ) );
+  float h01 = hash( vec2( floor( _v * _r + vec2( 0.0, 1.0 ) ) / _r ) );
+  float h11 = hash( vec2( floor( _v * _r + vec2( 1.0, 1.0 ) ) / _r ) );
+  vec2 ip = vec2( smoothstep( vec2( 0.0, 0.0 ), vec2( 1.0, 1.0 ), mod( _v*_r, 1. ) ) );
+  return ( h00 * ( 1. - ip.x ) + h10 * ip.x ) * ( 1. - ip.y ) + ( h01 * ( 1. - ip.x ) + h11 * ip.x ) * ip.y;
+}
+
+float noise( vec2 _v ){
+  float sum = 0.;
+  for( int i=1; i<9; i++ )
+  {
+    sum += iHash( _v + vec2( i ), vec2( 2. * pow( 2., float( i ) ) ) ) / pow( 2., float( i ) );
+  }
+  return sum;
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / resolution;
+  vec2 uvn = uv;
+  vec3 col = vec3( 0.0 );
+
+  // tape wave
+  uvn.x += ( noise( vec2( uvn.y, time ) ) - 0.5 )* 0.005;
+  uvn.x += ( noise( vec2( uvn.y * 100.0, time * 10.0 ) ) - 0.5 ) * 0.01;
+
+  // tape crease
+  float tcPhase = clamp( ( sin( uvn.y * 8.0 - time * PI * 1.2 ) - 0.92 ) * noise( vec2( time ) ), 0.0, 0.01 ) * 10.0;
+  float tcNoise = max( noise( vec2( uvn.y * 100.0, time * 10.0 ) ) - 0.5, 0.0 );
+  uvn.x = uvn.x - tcNoise * tcPhase;
+
+  // switching noise
+  float snPhase = smoothstep( 0.03, 0.0, uvn.y );
+  uvn.y += snPhase * 0.3;
+  uvn.x += snPhase * ( ( noise( vec2( uv.y * 100.0, time * 10.0 ) ) - 0.5 ) * 0.2 );
+
+  col = tex2D( media, uvn );
+  col *= 1.0 - tcPhase;
+  col = mix(
+    col,
+    col.yzx,
+    snPhase
+  );
+
+  // bloom
+  for( float x = -4.0; x < 2.5; x += 1.0 ){
+    col.xyz += vec3(
+      tex2D( media, uvn + vec2( x - 0.0, 0.0 ) * 7E-3 ).x,
+      tex2D( media, uvn + vec2( x - 2.0, 0.0 ) * 7E-3 ).y,
+      tex2D( media, uvn + vec2( x - 4.0, 0.0 ) * 7E-3 ).z
+    ) * 0.1;
+  }
+  col *= 0.6;
+
+  // ac beat
+  col *= 1.0 + clamp( noise( vec2( 0.0, uv.y + time * 0.2 ) ) * 0.6 - 0.25, 0.0, 0.1 );
+
+  gl_FragColor = vec4( col, 1.0 );
+}