raphaelameaume / fragment Goto Github PK

View Code? Open in Web Editor NEW

778.0 778.0 18.0 11.92 MB

[alpha] A web development environment for creative coding

Home Page: https://fragment.tools

License: MIT License

CSS 0.55% HTML 0.15% JavaScript 60.41% GLSL 0.15% Svelte 38.74%

creative-coding generative-art javascript web

fragment's People

Contributors

Stargazers

Watchers

Forkers

hirajanwin gangulabs fabienmotte ggallon nieldlr thedigitaloctopus yetanotherfork mpuig romellogoodman bravokiloecho gg-big-org ppalonebot baccapaglierina abibars nstrvs afternoon2 etidou mykongee

fragment's Issues

Fix passing props to sketch lifecycle functions

Access width, height and pixelRatio in prop onChange callback

I notice the GIF encoder is pretty slow and hangs, and also seems to be a two-pass approach. You might like to look into gifenc which should be faster. Just to note, it uses a different quantization algorithm, so it may produce different results.

You can see an example in action below, rendering 150 frames at 1024x768px renders in ~1.5 seconds, compared to your tool which is something like 30+ seconds. 😄

https://looom-tools.netlify.app/ (click the circle/record button)

It requires a little more setup but can give you some additional flexibility in terms of quantization, worker structure, and dithering.

Two example implementations:

looom-tools (uses a worker, some extra features)
- Client: https://github.com/mattdesl/looom-tools/blob/a9f455eeab3e43af6775e903cfafe6e9568dea4d/site/components/record.js#L250
- Worker: https://github.com/mattdesl/looom-tools/blob/a9f455eeab3e43af6775e903cfafe6e9568dea4d/site/components/gifworker.js
artblocks-renderer (simpler but includes dithering option)
- Client: https://github.com/mattdesl/artblocks-renderer/blob/24b3c64fd8472d003d5547723f2ff9f528fc4378/src/recording.js#L140

There is also room for a two-pass approach with gifenc, such as generating a single palette from all frames in the first pass, and in the second pass doing the encoding with that fixed palette. This can produce better consistency across frames but is slower (although, to be honest, probably still faster than your current encoder).

Also pinging @jesi-rgb who is doing similar work with p5js, it would be nice to consolidate some of these ideas around fast GIF encoding for creative coding tools. See here and here.

Is it possible to render SVG?

Change output directory of exports

Is it possible to change the directory where the exports (images, videos, builds) are created?

VectorInput is broken

VectorInput, in addition with not dispatching "change" events for Vec3Input, has a broken behaviour.

Currently, the inference for VectorInput is based on the number of keys when value is an object or length if an array. The advantage of these "light" checks is that Fragment can build a VectorInput by forcing prop type to be a vec3 if you have a color-like kind of object like { r: 0, g: 244, b: 200 }.

Inputs should whenever possible (so not primitives like number or string) modify the source value so changes can be reflected on the object without any addition to the sketch code e.g:

export let props = {
  direction: {
    value: { x: 0, y: 0, z: 0 },
  }
};

export let update = () => {
     console.log(props.direction.x); // should reflect changes from the UI
};

When an input dispatches a change, the value sent by the event should be the same type as the value received, or in case of an object, just send back the reference to the value and not a shallow/deep copy of the object.

This should be valid for vectors as arrays (like [0, 0, 0]), and for upper-level abstractions of vectors broadly used like THREE.Vector3();

This would also be a good time to add support for Vec4 inputs.

Bug with threejs dependencies

Im having issue while trying three template Fragment on windows :

step 1 : try the command fragment ./sketch.js --new --template=three/orthographic

getting error message ( you should install threejs )

step 2 : npm install three

install correctly

step 3 : fragment ./sketch.js

Could not resolve "./E:/github/sketchs/node_modules/three/build/three.module.js"

The error is obviously the ./ at the start of the url.

Provide frameCount as a parameter in update

Usage with lygia

Hello! I'm having using shader functions from lygia... It doesn't seem possible with glsify (as it's currently setup) to load shader parts with the #include method.

This vite GLSL loader looks promising and I tried to swap out your hot-shader-reload.js with the vite plugin, but I got an error when hot-reloading:

node:internal/errors:466
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined
    at utimes (node:fs:2000:10)
    at file:///Users/ben/Documents/personal-repos/fragment/node_modules/vite-plugin-glsl/src/watchShader.js:60:7

So it's clearly not as straightforward as a one-to-one replacement.

Do you think there's a way of getting #include to work in a shader (or any other means of loading in lygia files)?

Expose vite base param to CLI

Fix initial values of playhead and playcount

Fix posix separator issue on Windows

Loading a texture into a fragment shader

When using the rendering = "fragment" option, what's the method for using a texture as a uniform and then rendering it using texture2D?

OrbitControls not working in three.js template

Hey! Thanks for amazing library! Love the API and everything about it.
While creating a three.js demo, i tried to add OrbitControls to move scene around. But didnt quite worked for me =(.
This was my code:

import * as THREE from "three";
_import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";_



let camera,controls;

export let init = ({ scene,renderer, width, height }) => {
    camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
    camera.position.z = 10;
    camera.lookAt(new THREE.Vector3());
    _controls = new OrbitControls(camera, renderer.domElement);_
    scene.add(new THREE.Mesh(
        new THREE.BoxGeometry(1,1,1),new THREE.MeshNormalMaterial()
    ))

};

export let update = ({ renderer, scene, time, deltaTime }) => {
    controls.update()
    renderer.render(scene, camera);
    
};

export let resize = ({ width, height }) => {
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};

export let rendering = "three";

Triggers for Keyboard and MIDI not saving `key` param in local storage

Hi @raphaelameaume! First, congrats on the awesome work done to build this tool! 👏

I've noticed that the triggers for Keyboard and MIDI using the UI are not working.
The key param doesn't seem to be persisted in the local storage as you can see on the screenshot below.

Thanks for your help!

Change canvas orientation

Hey! What a great tool you are making! I wanted to add a PR for supporting landscape/portrait canvas orientation which would be useful for example when exporting a sketch to a SVG, to be then drawn using a pen plotter.

I wonder if it's better to include Landscape/Portrait suffixes to each paper size entry (which would double the number of presets), or maybe to have additional setting that modifies the placement of canvas width and height values for each preset. Wdyt? 🙂

raphaelameaume / fragment Goto Github PK

fragment's People

Contributors

Stargazers

Watchers

Forkers

fragment's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs