WIP

src/components/App.vue

@@ -38,6 +38,7 @@ const testNumber = ref(Math.PI)
 const testBoolean = ref(false)
 const testAlign = ref<'left' | 'center' | 'right'>('left')
 const colorSpace = ref<'r|g|b' | 'svh' | 'hsv' | 'hvs' | 'hsvr'>('hsv')
+const cubicBezier = ref([0, 0.5, 0.5, 1] as const)
 
 // interface PaperDesc {
 // id?: string
@@ -401,6 +402,7 @@ window.addEventListener('drop', async e => {
  </Tq.Tab>
  </Tq.Tabs>
  </Tq.FloatingPane>
+
  <Tq.FloatingPane
  name="timeline"
  icon="timeline"
@@ -411,7 +413,7 @@ window.addEventListener('drop', async e => {
  <Tq.InputString v-model="testString" />
  </Tq.Parameter>
  <Tq.Parameter label="Grow">
- <Tq.InputNumber v-model="testNumber" :min="0" :max="Math.PI * 2" />
+ <Tq.InputNumber v-model="testNumber" />
  </Tq.Parameter>
  <Tq.Parameter label="Degrees">
  <Tq.InputRotery v-model="testNumber" />
@@ -438,6 +440,9 @@ window.addEventListener('drop', async e => {
  <Tq.Parameter label="Button">
  <Tq.InputButton label="Hey" />
  </Tq.Parameter>
+ <Tq.Parameter label="Button">
+ <Tq.InputColorPicker modelValue="#ff0000" />
+ </Tq.Parameter>
  </Tq.ParameterGrid>
  </Tq.FloatingPane>
  </div>

src/tweeq/FloatingPane/FloatingPane.vue

@@ -305,7 +305,6 @@ onMounted(() => {
  .left
  display none
 
-
 .resize
  position absolute
  hover-transition()
@@ -380,4 +379,3 @@ onMounted(() => {
  height 100%
  hover-transition(opacity)
 </style>
-@/tweaq/useAppStorage

src/tweeq/GlslCanvas.vue

@@ -1,87 +1,82 @@
-<script lang="ts">
-import _ from 'lodash'
-import Regl from 'regl'
+<script lang="ts" setup>
+import Regl, {DrawConfig} from 'regl'
 import REGL from 'regl'
-import {
- computed,
- defineComponent,
- onMounted,
- onUnmounted,
- PropType,
- ref,
- watch,
-} from 'vue'
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
 
-import {REGL_QUAD_DEFAULT} from './util'
+const REGL_QUAD_DEFAULT: DrawConfig = {
+ vert: `
+ precision mediump float;
+ attribute vec2 position;
+ varying vec2 uv;
+ void main() {
+ uv = position / 2.0 + 0.5;
+ gl_Position = vec4(position, 0, 1);
+ }`,
+ attributes: {
+ position: [-1, -1, 1, -1, -1, 1, 1, 1],
+ },
+ depth: {
+ enable: false,
+ },
+ count: 4,
+ primitive: 'triangle strip',
+}
 
-interface UniformsProp {
- [name: string]: number[] | string
+interface Props {
+ fragmentString: string
+ uniforms: Record<string, number | number[] | string>
 }
 
-export default defineComponent({
- name: 'GlslCnavas',
- props: {
- fragmentString: {
- type: String,
- default: `
- precision mediump float;
- varying vec2 uv;
- void main() { gl_FragColor = vec4(uv, 0, 1); }`,
- },
- uniforms: {
- type: Object as PropType<UniformsProp>,
- default: () => ({}),
- },
- },
- setup(props) {
- const canvas = ref<null | HTMLCanvasElement>(null)
+const props = withDefaults(defineProps<Props>(), {
+ fragmentString: `
+ precision mediump float;
+ varying vec2 uv;
+ void main() { gl_FragColor = vec4(uv, 0, 1); }`,
+ uniforms: () => ({}),
+})
 
- const regl = ref<null | REGL.Regl>(null)
+const $canvas = ref<null | HTMLCanvasElement>(null)
 
- onMounted(() => {
- if (!canvas.value) {
- return
- }
+const regl = ref<null | REGL.Regl>(null)
 
- regl.value = Regl({
- attributes: {
- depth: false,
- premultipliedAlpha: false,
- },
- canvas: canvas.value,
- })
- })
+onMounted(() => {
+ if (!$canvas.value) return
 
- onUnmounted(() => regl.value?.destroy())
-
- const uniformKeys = ref(_.keys(props.uniforms))
+ regl.value = Regl({
+ attributes: {
+ depth: false,
+ premultipliedAlpha: false,
+ },
+ canvas: $canvas.value,
+ })
+})
 
- const drawCommand = computed(() => {
- if (!regl.value) return null
+onUnmounted(() => regl.value?.destroy())
 
- const prop = regl.value.prop as any
+const drawCommand = computed(() => {
+ if (!regl.value) return null
 
- const uniforms = _.fromPairs(uniformKeys.value.map(k => [k, prop(k)]))
+ return regl.value({
+ ...REGL_QUAD_DEFAULT,
+ frag: props.fragmentString,
+ })
+})
 
- return regl.value({
- ...REGL_QUAD_DEFAULT,
- frag: props.fragmentString,
- uniforms,
+watch(
+ () => [drawCommand.value, props.uniforms] as const,
+ ([draw, uniforms]) => {
+ console.log(uniforms)
+ draw &&
+ draw({
+ hsv: [0, 1, 1],
+ modeX: 0,
+ modeY: 1,
  })
- })
-
- watch(
- () => [regl.value, drawCommand.value, props.uniforms],
- () => {
- drawCommand.value && drawCommand.value(props.uniforms)
- }
- )
-
- return {canvas}
  },
-})
+ {immediate: true}
+)
 </script>
 
 <template>
- <canvas ref="canvas" />
+ <canvas ref="$canvas" />
 </template>