GithubHelp home page GithubHelp logo

zachberry / vidkid Goto Github PK

View Code? Open in Web Editor NEW
45.0 45.0 2.0 922 KB

A patchable visualization tool inspired by video modular synthesis but built for the web

License: MIT License

JavaScript 92.06% HTML 1.24% CSS 6.70%

vidkid's People

Contributors

zachberry avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vidkid's Issues

Scenes

Want to be able to transition between two or more complete visualizations. Thinking either this could be done in the existing interface with nodes representing scenes (Perhaps these are composite nodes - #10 ) or there could be a different UI geared towards performance, where different scenes could be switched between

Edit mode zoom in/out

Want to be able to zoom in and out of the edit view. The basics of this are in but commented out as it needs more work.

React code refactor

React code is a mix of

  1. Events
  2. Specific props passed to children
  3. Whole classes (docState) passed to children

Fix having to create new elements on each edit

Spoke with someone on the Edge dev team who gave me some options to get around having to create elements with a datestamp, like <n1-12345678>.

  1. There is an unregisterComponent. When editing a node I should be able to unregister, then re-register. For some reason I missed this in the docs when working on this.
  2. The various lifecycle methods (onAttrChanged, onRemove, etc) could call another method. That way I wouldn't need to unregister then re-register, instead the user would be updating a method that the native web component would call. However this would introduce a second function call.

Composite nodes

Would like to create a node which itself is a map of nodes.

Idea would be that you could somehow double click on a node to edit it. A composite node could have an Inner Edge and Outer Edge node defining the inputs and outputs, or a custom UI to somehow indicate these.

Reduce updates on node values to improve Edit Mode performance

Edit mode can reduce to a crawl very quickly and it mostly has to do (I think) with too many react re-renders happening. Perhaps there could be a mode to update input values once a second instead of as soon as they change, reducing the react render party.

Performance mode control bar

Want to be able to have the user cherry-pick different inputs to place a copy of them in a left-hand bar. That bar could show up in performance mode. That way you could create a custom set of values that you care about which would control the scene (and leave out the noise of the node map). That solves a problem the node controls are out of reach once inside performance mode.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.