update content meta
This commit is contained in:
nicwands
parent
278684be93
commit
2ba24ff7c2
16 changed files with 18 additions and 390 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "endless-journal",
|
||||
"title": "Endless Journal",
|
||||
"date": "2026-07-20",
|
||||
"date": "2025-02-03",
|
||||
"tags": [
|
||||
"Process"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -9,31 +9,29 @@
|
|||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "I used a fluid simulation in webgl to create this flowmap with arrows showing the direction or \"current\" within the flow field."
|
||||
"text": "Using the OGL fluid simulation example as a starting point, this webgl experiment renders a flowmap of arrows that follow the \"current\" of the fluid."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph"
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "The arrows are rendered by creating a buffer geometry with "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "link",
|
||||
"attrs": {
|
||||
"href": "https://github.com/oframe/ogl/blob/master/examples/post-fluid-distortion.html",
|
||||
"target": "_blank",
|
||||
"rel": "noopener noreferrer nofollow",
|
||||
"class": null,
|
||||
"title": null
|
||||
}
|
||||
"type": "code"
|
||||
}
|
||||
],
|
||||
"text": "https://github.com/oframe/ogl/blob/master/examples/post-fluid-distortion.html"
|
||||
"text": "InstancedMesh"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": " to create a grid of arrows that covers the screen. The direction and size of the arrows is then manipulated in the vector shader to follow the velocity at that point in the simulation."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "image-melody",
|
||||
"title": "Image Melody",
|
||||
"date": "2026-07-20",
|
||||
"date": "2026-01-30",
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "My friend Patrick wanted to try generating music from an image. I made this simple experiment which plays notes in a scale based on some of the color values in a pixelated version of the image."
|
||||
"text": "This experiment processes an image and creates a simple melody from the image data. To do this, the image is pixelated to a 5x5 resolution and sampled to determine the order of the notes. The notes for this example are chosen from the C Major pentatonic scale so that they will sound \"musical\" in any order."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "noise-shader",
|
||||
"title": "Noise Shader",
|
||||
"date": "2026-07-20",
|
||||
"date": "2025-05-20",
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "I was messing around with a shader to add noise to a texture, and ended up getting this cool effect when I divided the noise value by the distance to the user's mouse."
|
||||
"text": "This shader uses randomized noise combined with a two bit filter, and a mouse distance multiplier to create this interesting effect that almost feels like a flashlight in the darkness."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,8 +27,6 @@ void main() {
|
|||
float aspectRatio = u_resolution.x / u_resolution.y;
|
||||
vec2 st = vec2(v_uv.x * aspectRatio, v_uv.y);
|
||||
vec2 st_mouse = vec2(u_mouse.x * aspectRatio, u_mouse.y);
|
||||
// vec2 st_mouse = vec2(0.5,0.5);
|
||||
|
||||
|
||||
float distance = max(0.6, distance(st, st_mouse) * 10.);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"name": "testing",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.98.0",
|
||||
"sass-embedded": "^1.98.0",
|
||||
"vue": "^3.5.30",
|
||||
"@fuzzco/font-loader": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"vite": "^8.0.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,56 +0,0 @@
|
|||
{
|
||||
"name": "testing",
|
||||
"title": "Testing",
|
||||
"description": {
|
||||
"type": "doc",
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "This is just a test drop to make sure everything is working correctly."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "heading",
|
||||
"attrs": {
|
||||
"level": 1
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Heading"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "more text."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph"
|
||||
}
|
||||
]
|
||||
},
|
||||
"date": "2026-07-17",
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Source Code",
|
||||
"url": "https://github.com/username/repo"
|
||||
}
|
||||
],
|
||||
"notes": "Any additional notes or thoughts about this drop",
|
||||
"published": false
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<main class="drop theme-light">
|
||||
<Testing />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Testing from './components/Testing.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
main.drop {
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-fg);
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
<template>
|
||||
<component
|
||||
class="btn"
|
||||
:is="tag"
|
||||
>
|
||||
<span v-if="arrow" class="leading-icon">→</span>
|
||||
<span class="text">
|
||||
<span><slot /></span>
|
||||
<span><slot /></span>
|
||||
</span>
|
||||
<span v-if="arrow" class="arrow">→</span>
|
||||
<!-- <span v-if="loading" class="loading">
|
||||
<svg-util-spinner />
|
||||
</span> -->
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
tag: {
|
||||
type: String,
|
||||
default: () => 'button',
|
||||
},
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.btn {
|
||||
--t-duration: 350ms;
|
||||
--t-ease: var(--ease-out-quad);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: rs(6px) rs(16px);
|
||||
background: var(--theme-contrast);
|
||||
color: var(--ivory);
|
||||
border-radius: rs(8px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: color var(--t-duration) var(--t-ease);
|
||||
|
||||
.leading-icon {
|
||||
position: absolute;
|
||||
width: rs(10px);
|
||||
height: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
transition: transform var(--t-duration) var(--t-ease),
|
||||
opacity var(--t-duration) var(--t-ease);
|
||||
}
|
||||
.text {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transition: transform var(--t-duration) var(--t-ease);
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
transition: transform var(--t-duration) var(--t-ease);
|
||||
@include label;
|
||||
}
|
||||
span:first-child {
|
||||
color: var(--ivory);
|
||||
}
|
||||
span:last-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translateY(105%);
|
||||
color: var(--ivory);
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
transition: transform var(--t-duration) var(--t-ease),
|
||||
opacity var(--t-duration) var(--t-ease);
|
||||
|
||||
&:not(:only-child) {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
.loading {
|
||||
width: rs(10px);
|
||||
height: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
background: var(--theme-contrast);
|
||||
clip-path: inset(100% 0 0 0);
|
||||
transition: clip-path var(--t-duration) var(--t-ease);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&.router-link-active {
|
||||
color: var(--ivory);
|
||||
|
||||
&::before {
|
||||
clip-path: inset(0);
|
||||
}
|
||||
.text {
|
||||
span:first-child {
|
||||
transform: translateY(-105%);
|
||||
}
|
||||
span:last-child {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
&.text-icon {
|
||||
.leading-icon {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
.text {
|
||||
transform: translateX(1.5em);
|
||||
}
|
||||
.arrow {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
opacity: 0.16;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<template>
|
||||
<div class="testing">
|
||||
<h1>Header One</h1>
|
||||
<h2>Header Two</h2>
|
||||
<h3>Header Three</h3>
|
||||
<h4>Header Four</h4>
|
||||
|
||||
<p>
|
||||
Integer at ullamcorper libero, et elementum nulla. Donec at leo in
|
||||
lorem vehicula lobortis sit amet vitae urna. Vestibulum risus nibh,
|
||||
vulputate quis velit non, euismod auctor metus. Etiam placerat ut
|
||||
tortor ut feugiat. Sed id mattis velit.Phasellus ullamcorper commodo
|
||||
scelerisque. Curabitur pellentesque turpis sem. Sed fermentum, eros
|
||||
a sagittis sagittis, justo ex fermentum arcu, ac dapibus tellus
|
||||
ipsum nec sem. Donec tincidunt viverra massa, at suscipit arcu
|
||||
blandit interdum. Suspendisse turpis eros, lobortis vel dolor
|
||||
gravida, efficitur elementum urna. Quisque vel justo lacus.
|
||||
</p>
|
||||
|
||||
<btn>Click Here</btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Btn from './Btn.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.testing {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
export function clamp(min, input, max) {
|
||||
return Math.max(min, Math.min(input, max));
|
||||
}
|
||||
|
||||
export function mapRange(in_min, in_max, input, out_min, out_max) {
|
||||
return ((input - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
|
||||
}
|
||||
|
||||
export function lerp(start, end, amt) {
|
||||
return (1 - amt) * start + amt * end;
|
||||
}
|
||||
|
||||
export function truncate(value, decimals) {
|
||||
return parseFloat(value.toFixed(decimals));
|
||||
}
|
||||
|
||||
export function wrapValue(value, lowBound, highBound) {
|
||||
const range = highBound - lowBound;
|
||||
return ((((value - lowBound) % range) + range) % range) + lowBound;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import '@shared/styles/shared.scss'
|
||||
import './styles/main.scss'
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* Drop specific styles */
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import config from '../../shared/config.js'
|
||||
import { toSass } from '../../shared/libs/sass/index.js'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'@shared': fileURLToPath(new URL('../../shared', import.meta.url)),
|
||||
},
|
||||
},
|
||||
base: '/drops/testing/',
|
||||
build: {
|
||||
outDir: '../../app/public/drops/testing',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
api: 'modern-compiler',
|
||||
additionalData:
|
||||
'@use "@shared/styles/_functions.scss" as *; @use "@shared/styles/_font-style.scss" as *;',
|
||||
functions: {
|
||||
'get($keys)': function (keys) {
|
||||
keys = keys.toString().replace(/['"]+/g, '').split('.')
|
||||
|
||||
let result = config
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
result = result[keys[i]]
|
||||
}
|
||||
|
||||
return toSass(result)
|
||||
},
|
||||
'getColors()': function () {
|
||||
return toSass(config.colors)
|
||||
},
|
||||
'getThemes()': function () {
|
||||
return toSass(config.themes)
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in a new issue