Demos

[gedw99]

This is really cool.

Any chance you can publish the demos that are animated gifs ?

[roipeker]

Hi @gedw99.

Sadly, I wasn't organised enough. Some demos, I just threw them away or replaced the code for other demos... I didn't thought back then that I was building GraphX.

The gifs are just a bunch of videos I had all over my Desktop, from posting messages in Discord and Flutter groups.
Everything was made for fun and experimentation.

A few demos are mostly CustomPainter using GraphX for basic functionality like input and the ticker... maybe they can be recreated entirely with GraphX by now.

Also, all samples are quick prototypes made while testing (and adding) capabilities in the framework.

Sorry about that, but i'm hoping we can create even cooler stuffs! I'm glad you like the demos though :)

I'm expecting some feedback from users, at least to check if the community likes the idea, and also trying to find the time to make some introduction videos.

If you have any request for a specific demo, or concept that you wanna see in GraphX, please, let me know and I will do my best to recreate it and post the code.

[idootop]

This package is awesome!
I was amazed by some demos made with GraphX.

I found some source code for the demo you shared on github gist, but the js_utils.dart files is missing, can you share this file?

By the way, I'm also curious how these demos are implemented:

• FishEye particles
• Particles emitter
• 
• 
• 

Thank you very much!

[gedw99]

Hi @gedw99.

Sadly, I wasn't organised enough. Some demos, I just threw them away or replaced the code for other demos... I didn't thought back then that I was building GraphX.

The gifs are just a bunch of videos I had all over my Desktop, from posting messages in Discord and Flutter groups.
Everything was made for fun and experimentation.

A few demos are mostly CustomPainter using GraphX for basic functionality like input and the ticker... maybe they can be recreated entirely with GraphX by now.

Also, all samples are quick prototypes made while testing (and adding) capabilities in the framework.

Sorry about that, but i'm hoping we can create even cooler stuffs! I'm glad you like the demos though :)

I'm expecting some feedback from users, at least to check if the community likes the idea, and also trying to find the time to make some introduction videos.

If you have any request for a specific demo, or concept that you wanna see in GraphX, please, let me know and I will do my best to recreate it and post the code.

You asked about use cases.

I would like to build an svg editor in flutter. Flutter has good support for using svg and svg is very useful because of its vector and so removes a raft is issues. But an editor would be quite cool.
This would involve a CQRS style of architecture with commands resulting in changes to the underlying data model that describes a svg editor and then the svg being constructed on the fly from that denormalisation of the svg data model.

Graphic would be used for the overlay tooling. Like bezieht splines, text editing boxes, color swatches, and a long list of similar things needed to make an editor.

I have built tooling like this before for other graphics systems related to the 2d and 3D Domain for chi and cad and a CQRS pipeline is imho a best practice approach for building a system where you need to build other things ( the actual svg ) in real time in response to changes in the Editor.

Svg primitives like Layers etc etc are modeled in the writable data model and the CQRS pipeline takes events with a payload then then updates a data model that describes a real svg. In the end you get a WYSIWYG Editor.

This is also how real time game systems are built.

Would be cool to know what you think.

[roipeker]

This package is awesome!
I was amazed by some demos made with GraphX.

I found some source code for the demo you shared on github gist, but the js_utils.dart files is missing, can you share this file?

By the way, I'm also curious how these demos are implemented:

• FishEye particles
• Particles emitter
• 
• 
• 

Thank you very much!

Thanks for your kind words @idootop , the js_utils.dart is nothing but a "openUrl" method... i just updated the gists.

Regarding the demos, as i mentioned before... its a mess of experimentation:

I believe those particles demos are being rendered with Canvas.drawImage() directly.

• Fisheye beyond the basic "particles attraction" logic, I read the image bytes, and used the image package to read the non transparent pixels from the image... storing it into a List ... and creating a grid of particles in those "locations" according to some "resolution" (amount of particles to render). That's pretty much it...

• The other particle demo, is a similar concept, but simpler math, just adding random positive velocity to each particle, and following the mouse position to place the emitter.

• The isometric demo, is super basic... i didn't add much there, except some bitmap, and a fake rotation... although. i was really looking forward to make some cool little iso game... but I had a hard time finding the "art" to use.

• The drawing demo is pretty easy as well.... just record each mouse/touch location as you move around the screen (when mouse is pressed) and add all those values into a List of points, and render those "pen commands" on each frame.
  basically.

• the blur text, was a test for the BlurFilter(), and colorization... also pretty simple in concept, although the "tween" for the blur is independent (using something like 0.0.twn.tween( 1.0, onUpdate: updateBlur ) ... Pretty much like the "experiment" from yesterday with animated SVG drawing, here is the gists for that.

Anyway, I am aware that I have to explain lots of things probably... most people don't have a background on drawing things on the screen with a Flash API style.

@gedw99.
I believe it's a great use-case for GraphX ... that's why i tried to replicate the Shape Maker tool (to make bezier curves), I had issues with basic algebra, for the focal zoom on that demo, because I'm a little rusty on some areas, but now I think is pretty easy to accomplish with Matrix transformations, anyway, overall that demo took me around 10hs (4hs lost on the zooming feature) ...
So, transforming objects, dragging around, keyboard access, tweens for micro ui interactions... i believe it can work out pretty well (obviously, maybe some things are missing from graphx, or u might face some performance issues, but i believe most things have a workaround, and might help us to improve the framework as well).

You might wanna use SceneConfig.tools, as it provides keyboard & pointer access, and the auto render/update ticker:

SceneBuilderWidget(
        builder: () => SceneController(
          front: YourScene(),
          config: SceneConfig.tools, // <<< this one
        ),
      ),

Beware that SVG parsing is heavy on the CPU... Skia is awesome for rendering performance, but if you have complex drawings svgs, you might wanna reduce the load on the CPU (and GPU as well), maybe converting the SVG Shape into a Picture or an Image (most performant) ... as rendering cache. Maybe you will be fine.
Every DisplayObject has a createPicture() (sync) and createImage()/createImageTexture() (async). To get a snapshot of that object's... is cool to precompute drawings/compositions and reuse them later.

Thanks for the input guys!

[idootop]

@roipeker ^_^ Thanks for your patience in replying, I'm going to try it.

[IsmailAlamKhan]

@idootop you should close this issue now. Cause this repo has a lot of examples now.

[idootop]

@idootop you should close this issue now. Cause this repo has a lot of examples now.

Thank you for reminding me. But sorry, @gedw99 submitted this issue, so I can't close it.

[roipeker]

Thanks guys, i will close it now.

[gedw99]

@roipeker Its cool :) Really loving this project. Its opening doors for me in terms of what is possible with Flutter.

Sorry i did not reply. Was busy with work stuff.

[gedw99]

@roipeker I brought you 5 coffees mate !!!