Comments (10)
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.
from graphx.
@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.
from graphx.
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:
Thank you very much!
from graphx.
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:
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!
from graphx.
@roipeker ^_^ Thanks for your patience in replying, I'm going to try it.
from graphx.
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.
from graphx.
@idootop you should close this issue now. Cause this repo has a lot of examples now.
from graphx.
Thanks guys, i will close it now.
from graphx.
@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.
from graphx.
@roipeker I brought you 5 coffees mate !!!
from graphx.
Related Issues (20)
- Thinking of addChildAt HOT 2
- Painting text HOT 6
- no any examples for method `drawPoly`
- How to generate super nova tween using graphx? HOT 1
- MouseCusor for GShape HOT 1
- Support for web? HOT 5
- Ticker for front scene only HOT 7
- Draw poly ignores closePolygon HOT 2
- GDisplayObject.requiresRedraw is a noop HOT 2
- Don't transform to local coordinates when mouse input is already captured HOT 3
- DisplayObject.hitTest could bail out early when localPoint has a negative coordinate HOT 5
- ScenePainter._detectMouseMove() should be optional HOT 12
- [Question] How could I embed the drawing (rasterizing?) into some video stream? HOT 7
- Planned update to v3? HOT 2
- Add support for dashed line HOT 10
- Restore cursor default shape when mouse is leaving the stage HOT 4
- Graphx coordinate system and platforms HOT 3
- MacOS: Facebook Rections > SocketException HOT 1
- Color Palette Error HOT 8
- Dependency incompatibility with flutter_map HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphx.