ianstormtaylor / void Goto Github PK

Not sure exactly how this might work. But it would be awesome if you could define layers that you can then show and hide directly in the UI instead of going in and commenting things. And if we could add in the ability to associate a default stroke/fill with a layer, the you could change that in the UI as well.

Technically you could string this functionality together with your own custom variables, so not sure yet whether there's some emergent properties that make it worth doing.

Didn't really have this working well, so need to re-think. It's useful for situations where you're dealing with printer software or laser cutter software that accepts PDFs but doesn't recognize SVGs.

So that you can have an animated sketch paused, but inch forward a frame at a time.

Potentially even a shift and option+shift variants like in design programs to jump 10 or 60 frames forward as well.

Creating a new sketch using the source provided in the README results in a 500 when Editor attempts to import the sketch:

https://joeysharesthings.com/xm7G7rzQ
https://joeysharesthings.com/TryH7GZD

• https://www.jesirgb.com/blog/gif-encoding
• processing/p5.js#5709

So you can open it again and everything will be where you left it.

There are certain utility functions that everyone reinvents for generative art, like range, subdivide, lerp, unlerp, clamp, etc., etc. which could make a case for adding a context.math helper with some of these. Ideally they should already be in JavaScript natively, but that won't happen soon.

Right now it restarts the sketch, but it should really just toggle the visibility of the DOM element instead. For static sketches it's equivalent, but for animations the current behavior is tedious.

Since the file can either be deleted once the tab is already open, need to fallback and close the tab or show an error?

More complex than a single color, would give you a Figma-like gradient editor as the UI, and an array of stops with position and color properties, like:

[
  { position: 0, color: 'red' },
  { position: 0.5, color: 'blue' },
  { position: 1, color: 'yellow' }
]

Up to the user whether they want to use it for a linear, conical, radial, etc. type of gradient.

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop
• https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
• https://www.figma.com/widget-docs/api/type-GradientPaint

Ideally via just CSS, so there's no re-rendering.

• https://twitter.com/steveruizok/status/1374848122891997184

Right now it gets clipped off…

Which is a button that when clicked invokes a function. Something like:

Void.button('name', () => {
  // do something here…
})

Only useful in animated sketches, since you can react to the button click by for example toggling a variable, like a light/dark color theme for instance.

Not super priority, since for most things you could just use regular clicks on the canvas, or right-clicks for a secondary action, or button presses, etc.

Right now for simplicity it's just a single frame. But the API should be that you return a function that gets called with requestAnimationFrame and then it'll keep going. As well as a context.frame property that you can react to.

Might need to just quickly investigate whether using generators would be a good idea, but I feel like it might be too complex.

So that people can opener via Finder or by dropping a file onto the app's icon.

• https://www.electronjs.org/docs/latest/api/app#event-open-file-macos

If you export an animation it replays the whole thing to export it, so it can take a while, so we need a little indicator showing the frame ticking by so you know how long it will take.

If you define variables inside an object it should group them together inside a dropdown. So you could define a series of show variables like so:

variables: {
  show: {
    grid: false,
    lines: true,
    dots: false,
  }
}

And they'd be collapsed under "Show >" by default and you could expand to see them.

So you can choose a specific aspect ratio without having to define a specific width. For when the sketch is full screen.

So you can flip between things instead of having to open multiple windows.

Right now if you import an local file (instead of a dependency) it doesn't get picked up by the reloading service, so nothing new is built. This is due to esbuild not having bundle: true specified for it's watcher.

For animations. I'll often want to pause at a certain frame, or even just to hit stop to save CPU while going to edit the code for a bit.

It would be nice to be able to open an entire folder (similar to how you would in VSCode) instead of a file, and then see a representation of all the sketches in that folder in a little grid/list you can move between.

Could model it off of Figma's setup with the tabs in the top bar and a "home" tab which shows the directory.

So you can programmatically stop a sketch that is underway.

If we have the gallery view from #5, we can then layer on auto-generation of variants by randomly stepping up/down the default variables which would be really cool as a way to generate new concepts you might not have been aware of

Just detecting whether it's a color and then adding a little swatch next to the value to see the color itself. Potentially also getting smarter with a striped swatch for color palette arrays.

Because the entrypoint server is really simple currently, and just serves sketch.js and sketch.js.map, if any of the imported packages in a sketch don't include their sourceContent inline in the sourcemap, they won't be able to be loaded by devtools.

In TypeScript a third-party package can make its source content inlined by setting…

{
    "sourceMap": true,
    "inlineSources": true,
}

…but many won't have done that.

Ideally either the server could serve all files (need to check if this is secure first though). Or the single sourcemap could get all of its source files's content inlined, and its JSON can be updated with the new source content strings before serving.

When an error happens and then you edit and save and live-reload, right now the error popups stays there sometimes, despite the sketch working again.

Should bundle the sketch into a single HTML file that you can just open in the browser.

Some frameworks have a hash associated as the main seed. It could be cool to visualize the hash if the framework used is one of those (like fxhash or art blocks)

Would be cool if you could write use it shaders... although that's a whole different can of worms, since all the helpers utils are useless…

• https://thebookofshaders.com/

For when dealing with small floating point errors. It would "fix" the error if it was within a tiny distance from the equivalent rounded number. So for example:

let x = 0.1 + 0.2
// 0.30000000000000004

Math.nudgeTo(x, 1)
// 0.3

Math.nudgeTo(0.3005, 1)
// 0.3005

Where the epsilon value is the same as the existing Math.TOLERANCE (aka tiny).

Or alternatively try to get fancier with a single argument — https://github.com/TetroGem/fix-floats/blob/main/index.mjs — but I'm unsure if that covers all cases.

Not sure what's going on, but something with the Electron auto-updated isn't configured properly. If you press "Restart" when an update is ready, it won't relaunch and when you manually launch it errors.

Right now when you "heart" a sketch it just saves the random seed. But it should save the variables too, so you can build up custom settings and save the good ones for later.

If you don't supply a step it will print always with 3 decimal places, which is janky for values like 1.5 which get rendered at 1.500. Should get rid of the unnecessary zeroes in those cases.

To get the mouse's x and y coords if its over the canvas. I think just as a single object reference that gets updated so that you can always check mouse.x for the latest values, like:

let mouse = Void.mouse()

Void.draw(() => {
  if (mouse.x == 100) ...
})

When changing traits, orientation, seed, etc. it would be cool if you could cmd+z to undo something you just did.

It would be cool to have a little daily prompt on empty windows (in the blank space when no sketch is active) with an idea for a new sketch, similar to Genuary or Inktober

Since P5.js is so widespread, it would be really cool if we could make it so that any valid P5.js script was also valid. Not exactly sure if it's possible or worth it or what it would entail though.

There are certain things like context.random that are much nicer than what P5.js gives you, so I feel like they should still be exposed even though P5.js gives you a few helpers.

Just an easy way to re-open previous tabs. Probably good to have it in the operating system-native menu first, and maybe in the tabs bar like Figma?

Right now the second argument to trait resolves to a default value, which is always used unless you've generated a random one (and these generated values aren't seed-dependent). But I think it would be better to always be generating a random value tied to the seed.

And you can always use an enum with just one entry to set a constant value when starting out, eg:

let nib = trait('enum', [0.2])

Which you can then expand with more options later.

Whereas now using simple numbers will represent the step argument:

let amount = trait('amount', 0.1) // shorthand for { step: 0.1, min: 0, max: 1 }
let count = trait('count', 2) // shorthand for { step: 2, min: 2, max: 2 * 5 }
let angle = trait('angle', 90) // shorthand for { step: 90, min: 0, max: 360 }

But you could potentially also use the min, max, step longer-hand (although might be too confusing, better as object):

let amount = trait('amount', 0.25, 0.75, 0.05)
let count = trait('count', 3, 7, 1)
let angle = trait('angle', 0, 360, 45)

Right now when creating a boolean trait, either true or false are both treated the same.

But there's a common use case of making a "flag" trait for development that defaults to false but can be toggled on (like "show gridlines"). It could be that using false as the default value will always make the trait locked when first run?

Either that or maybe there's value in a flag helper that never gets exported?

If you have a few different variants (with seed and variables) of a sketch saved it would be nice to be able to show a grid-like gallery view with all of the variants rendered so you can quickly navigate between them.