Branding and graphics

,
1

Would something like this be worthwhile polishing?

Any graphviz wizards in the house?

At a minimum, please point out obvious untruths. I’ve still only really studied Neko, and a little bit of Haxe. Most targets untouched, unstudied, clueless really for some of them, like ActionScript. Is SWF only in browsers or more often in players? etc. etc. on the as yet unknowns.

/* Haxe toolchain */
digraph G {
  node      [ shape=box; ]
  edge      [ arrowsize=0.5; ]

  Haxe      [ style=filled; fillcolor="#F89C0E"; ]
  Neko      [ style=filled; fillcolor="#F4511E"; ]
  HashLink  [ style=filled; fillcolor="#00CCFF"; ]
  nekoc     [ label = "nekoc / nekoml"; ]

  { rank=same; ActionScript; Cpp; Cppia; Csharp; ECMAScript;
               HashLink; Java; Lua; Neko; PHP; Python; SWF; }
  { rank=same; Browser; Executable; Interpreter; VM; }

  Haxe -> ActionScript;
  Haxe -> Cpp;
  Haxe -> Cppia;
  Haxe -> Csharp;
  Haxe -> ECMAScript;
  Haxe -> HashLink [ arrowsize=1.0 ];
  Haxe -> Java;
  Haxe -> Lua;
  Haxe -> Neko [ arrowsize=1.0 ];
  Haxe -> PHP;
  Haxe -> Python;
  Haxe -> SWF;


  PHP -> Interpreter;
  ECMAScript -> Interpreter;
  Java -> javac -> VM;
  Neko -> nekoc -> VM;
  ActionScript -> Browser;
  SWF -> Browser;
  Lua -> Interpreter;
  Cpp -> cpp -> Executable;
  Cppia -> Interpreter;
  Csharp -> csc -> VM;
  Python -> Interpreter;
  HashLink -> JIT -> VM;
  HashLink -> cc -> Executable;

  Browser -> Interpreter [ style=dotted; dir="none"; label="ECMAScript"; ]
}

Using graphviz, Dot, pumps out

prompt$ dot haxe-dot.gv -Tpng -o haxe-dot.png

haxe-dot
haxe-dot1460×351 55.4 KB

If this could be useful, more than willing to hand it over, or accept suggestions. Or skulk off into the night, never to mention it again.

Have good

2 Likes
2

Couple tweaks;

/* Haxe toolchain */
digraph G {
  node      [ shape=box; ]
  edge      [ arrowsize=0.5; ]

  Haxe      [ style=filled; fillcolor="#F89C0E"; ]
  Neko      [ style=filled; fillcolor="#F4511E"; ]
  HashLink  [ style=filled; fillcolor="#00CCFF"; ]
  nekoc     [ label = "nekoc / nekoml"; ]
  Interp    [ style=filled; fillcolor="#FAB20B";
              label = "haxe --interp"; fontsize=10; height=0.3; ]

  { rank=same; ActionScript; Cpp; Cppia; Csharp; ECMAScript;
               HashLink; Java; Lua; Neko; PHP; Python; SWF; }
  { rank=same; Browser; Executable; Interpreter; VM; }
  { rank=same; Haxe; Interp; }

  Haxe -> ActionScript;
  Haxe -> Cpp;
  Haxe -> Cppia;
  Haxe -> Csharp;
  Haxe -> ECMAScript;
  Haxe -> HashLink [ arrowsize=1.25 ];
  Haxe -> Java;
  Haxe -> Lua;
  Haxe -> Neko [ arrowsize=1.25 ];
  Haxe -> PHP;
  Haxe -> Python;
  Haxe -> SWF;
  Haxe -> Interp [ arrowsize=1.0 ];

  PHP -> Interpreter;
  ECMAScript -> Interpreter;
  Java -> javac -> VM;
  Neko -> nekoc -> VM;
  ActionScript -> Browser;
  SWF -> Browser;
  Lua -> Interpreter;
  Cpp -> cpp -> Executable;
  Cppia -> Interpreter;
  Csharp -> csc -> VM;
  Python -> Interpreter;
  HashLink -> JIT -> VM;
  HashLink -> cc -> Executable;

  Browser -> Interpreter [ style=dotted; dir="both";
                           label="ECMAScript"; fontsize=10; ]
  VM -> Executable [ style=dotted; label="nekotools boot"; ]
}

haxe-dot-2
haxe-dot-21460×351 56.6 KB

3

I like the idea, but it’s tricky to get this accurate.

4

Brian

Swf is vm code like neko/hashlink, it can be run in a flash browser plugin ( on the way to being depreciated ) or zipped up with other assets as a AIR application ( still quite active, a large portion of Iphone applications are based on AIR technology ).

Also you can use a haxe swf within an actionscript project or an actionscript swf within a haxe project there are some complexities like applications domains. HaxeDevelop/FlashDevelop can help with this, but you can setup an AIR project with just a bunch of hxml cmd’s.

Electron ( nodejs ) or Krom can be used to run standalone js.

You can create .mm files, ie Haxe has some support for object-c. hxcpp/Defines.md at master · HaxeFoundation/hxcpp · GitHub

Think that this can get very complex for instance Tamarin ( command line as3 ) can be made to work as a target, or atleast at one stage there was a script for that.

Then python can be compiled to c and lua to jit etc… The lines between exe, vm, browser, interpretor etc… are kind of blurred, perhaps the relevancy is nowdays more speed capability and integration of existing code.

But diagram tool and diagram looks good.

5

Yeah, I wondered about expanding on the last rank. Separate the various VMs, and interpreters. The original plan was to show a one to many to four (one, split into the 4 classes of runtime), but it might need to be one to many to many if the diagram is going to be anywhere close to technically accurate.

Just read a little more about Cppia, those interconnections are not given any justice in the current image.

They take seconds to generate, and the graphviz scripts are pretty short. Might play around with this some more.

But, it’d be easy to waste time on this.

haxe-dot-3
haxe-dot-31428×351 59.6 KB

Thanks for the comments and hints on where this has shortcomings.

Have good

6

This is awesome, Brian!

It may help clarify workings further if you stratified (vertically separated into separate rows) your rows into:

Haxe
|
target languages
|
bytecodes
|
VMs

each on its own row, and where vertical arrows can cross the language row to sometimes go straight to the bytecode row. I think this would mean you’d have a row under the languages that includes Neko bytecode, SWF, HashLink bytecode. It would definitely make the diagram taller, but I think more informative and clearer as well (you might even have an arrow from Java (target language) to JVM bytecode (in the bytecode layer), even though Haxe isn’t directly generating the bytecode.

Ah, perhaps a Haxe-orange box border for output languages/bytecodes that Haxe can generate directly.

You also might visually distinguish (different colors or shapes) target languages from bytecodes from tools. For example, you have javac (a tool) displayed in the same way as JIT, cc (C language?) and cpp. It would also disambiguate HashLink the target bytecode from HashLink the VM.

Is cc a C compiler, and cpp is a C++ compiler? It might actually look better throughout if the tools were just text across the arrow, and not in any box.

If you made the arrow to haxe --interp longer, it might help the lines underneath it be less scrunched up.

Anyway, great to see this! Excellent to see the different ways you can target each of the bottom-most destinations (VM, Native Executable, Browser, and Interpreter). Very helpful already. Keep going!

7

Well, then, @uvtc, original question is answered, seems like it will be worthwhile polishing.

And all really great suggestions on how to start in on bettering. Thanks.

Adding a row is pretty straight forward, once you know the trick. rank=same in an anonymous subgraph, with nodes for that row listed.

Talking to everyone now:

graphviz dot is a very fluid layout engine, trying for best layout with no crossed lines, etc. One small change can rearrange the entire graph. Once the technical truth can be imaged, then some final tweaking can be done by weighting nodes to jiggle them around a little. So, each work in progress image capture shown here may have completely different looks.

But yeah, I’ll work on it some more; I’m also design retarded, so any final colouring and or “lookey” features, like arrow types and sizes, will probably be left for someone more qualified. I don’t design really, when it comes to diagrams, more like iterations of guessing and accepting sub-optimals. :slight_smile:

I don’t really want to assume any kind of ownership of this picture, I am no where near a point in the Haxe/Neko learning curve (and I’m ignoring HashLink for now) to know if any of the details are true, or a misunderstanding. I was just kicking a ball around, but I’ll try and make it more accurate, technically.

Or … offer still open … if anyone else wants to run with this, just yell, and go to town. *To avoid redundant efforts, perhaps just post the grapviz files and images here, for everyone to oooh aaah over.

Cheers

8 
/* Haxe toolchain */
digraph G {
  node      [ shape=box; style=filled; fillcolor="#E8E8E7"; color=gray; ]
  edge      [ arrowsize=0.5; ]

  Haxe      [ style=filled; fillcolor="#F89C0E"; color="#F89C0E"; ]
  Neko      [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  NekoVM    [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  HashLink  [ style=filled; fillcolor="#00CCFF"; color="#F89C0E"; ]
  "HL/JIT"  [ style=filled; fillcolor="#00CCFF"; color="#F89C0E"; ]
  SWF       [ style=filled; fillcolor="#E00000"; color="#F89C0E"; ]
  Interp    [ style=filled; fillcolor="#FAB20B"; color="#F89C0E";
              label = "haxe --interp"; fontsize=12; height=0.35; ]

  { rank=same; ActionScript; Cpp; Cppia; Csharp; ECMAScript;
               HashLink; Java; Lua; Neko; PHP; Python; SWF; }
  { rank=same; Browser; Executable; Interpreter; VM; }
  { rank=same; Haxe; Interp; }

  Haxe -> ActionScript;
  Haxe -> Cpp;
  Haxe -> Cppia;
  Haxe -> Csharp;
  Haxe -> ECMAScript;
  Haxe -> HashLink [ arrowsize=1.25; color="#F89C0E"; ]
  Haxe -> Java;
  Haxe -> Lua;
  Haxe -> Neko [ arrowsize=1.25; color="#F89C0E"; ]
  Haxe -> PHP;
  Haxe -> Python;
  Haxe -> SWF [ arrowsize=1.25; color="#F89C0E"; ]
  Haxe -> Interp [ arrowsize=1.0; color="#F89C0E"; minlen=8.0; ]

  PHP -> Interpreter;
  ECMAScript -> Interpreter;
  ECMAScript -> Browser;
  Java -> JVM -> VM;
  Neko -> NekoVM -> VM [ arrowsize=1.25; color="#F89C0E"; ]
  ActionScript -> AS3;
  AS3 -> VM;
  AS3 -> Browser;
  SWF -> Flash;
  Flash -> VM;
  Flash -> Browser;

  Lua -> Interpreter;
  Cpp -> cpp -> Executable;
  Cppia -> cpp;
  Cppia -> Interpreter;
  Csharp -> ".NET" -> VM;
  Python -> Interpreter;
  HashLink -> "HL/JIT" -> VM [ arrowsize=1.25; color="#F89C0E"; ]
  HashLink -> cc -> Executable;

  VM -> Executable [ style=dotted; dir="none"; ]
  Browser -> Interpreter [ style=dotted; dir="none"; ]
  Executable -> Browser [ style=dotted; dir="none"; ]
}

haxe-dot-4
haxe-dot-41387×347 64.4 KB

Closer?

9 
/* Haxe toolchain */
digraph G {
  node      [ shape=box; style=filled; fillcolor="#E8E8E7"; color=gray; ]
  edge      [ arrowsize=0.5; ]

  labelloc=b;
  label="Haxe toolchains.  https://haxe.org";

  Haxe      [ style=filled; fillcolor="#F89C0E"; color="#F89C0E"; ]
  Neko      [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  nekoc      [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  NekoVM    [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  HashLink  [ style=filled; fillcolor="#00CCFF"; color="#F89C0E"; ]
  "HL/JIT"  [ style=filled; fillcolor="#00CCFF"; color="#F89C0E"; ]
  SWF       [ style=filled; fillcolor="#E00000"; color="#F89C0E"; ]
  Interp    [ style=filled; fillcolor="#FAB20B"; color="#F89C0E";
              label = "haxe --interp"; fontsize=12; height=0.35; ]

  { rank=same; ActionScript; Cpp; Cppia; Csharp; ECMAScript;
               HashLink; Java; Lua; Neko; PHP; Python; SWF; }
  { rank=same; javac; nekoc; csc; cc; cpp; "HL/JIT"; }
  { rank=same; NekoVM; JVM; ".NET"; Flash; AS3; }
  { rank=same; Browser; Executable; Interpreter; VM; }
  { rank=same; Haxe; Interp; }

  Haxe -> ActionScript;
  Haxe -> Cpp;
  Haxe -> Cppia;
  Haxe -> Csharp;
  Haxe -> ECMAScript;
  Haxe -> HashLink [ arrowsize=1.25; color="#F89C0E"; ]
  Haxe -> Java;
  Haxe -> Lua;
  Haxe -> Neko [ arrowsize=1.25; color="#F89C0E"; ]
  Haxe -> PHP;
  Haxe -> Python;
  Haxe -> SWF [ arrowsize=1.25; color="#F89C0E"; ]
  Haxe -> Interp [ arrowsize=1.0; color="#F89C0E"; minlen=18.0; ]

  PHP -> Interpreter;
  ECMAScript -> Interpreter;
  ECMAScript -> Browser;
  Java -> javac -> JVM -> VM;
  Neko -> nekoc [ arrowsize=1.25; color="#F89C0E"; ]
  nekoc -> NekoVM [ arrowsize=1.25; color="#F89C0E"; ]
  NekoVM -> VM [ arrowsize=1.25; color="#F89C0E"; ]
  ActionScript -> AS3;
  AS3 -> VM;
  AS3 -> Browser;
  SWF -> Flash;
  Flash -> VM;
  Flash -> Browser;

  Lua -> Interpreter;
  Cpp -> cpp -> Executable;
  Cppia -> cpp;
  Cppia -> Interpreter;
  Csharp -> csc -> ".NET" -> VM;
  Python -> Interpreter;
  HashLink -> "HL/JIT" -> VM [ arrowsize=1.25; color="#F89C0E"; ]
  HashLink -> cc -> Executable;

  VM -> Executable [ style=dotted; dir="none"; ]
  Browser -> Interpreter [ style=dotted; dir="none"; ]
  Executable -> Browser [ style=dotted; dir="none"; ]
}

haxe-dot-5
haxe-dot-51373×473 82 KB

Last one, I think. Could use an artist’s touch.

Edit: Last last one

/* Haxe toolchain */
digraph G {
  node      [ shape=box; style=filled; fillcolor="#E8E8E7"; color=gray; ]
  edge      [ arrowsize=0.5; ]

  labelloc=b;
  label="Haxe toolchains (October 2018).  https://haxe.org";

  Haxe      [ style=filled; fillcolor="#F89C0E"; color="#F89C0E"; ]
  Haxelib   [ style=filled; fillcolor="#F89C0E"; color="#F89C0E"; ]
  Neko      [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  nekoc     [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  NekoVM    [ style=filled; fillcolor="#F4511E"; color="#F89C0E"; ]
  HashLink  [ style=filled; fillcolor="#00CCFF"; color="#F89C0E"; ]
  "HL/JIT"  [ style=filled; fillcolor="#00CCFF"; ]
  SWF       [ style=filled; fillcolor="#E00000"; color="#F89C0E"; ]
  Interp    [ style=filled; fillcolor="#FAB20B"; color="#F89C0E";
              label = "haxe --interp"; fontsize=12; height=0.35; ]

  { rank=same; ActionScript; Cpp; Cppia; Csharp; ECMAScript;
               HashLink; Java; Lua; Neko; PHP; Python; SWF; }
  { rank=same; javac; nekoc; csc; cc; cpp; "HL/JIT"; }
  { rank=same; NekoVM; JVM; ".NET"; Flash; AS3; }
  { rank=same; Browser; Executable; Interpreter; VM; }
  { rank=same; Haxelib; Haxe; Interp; }

  Haxelib -> Haxe [ arrowsize=1.1; dir="both"; color="#F89C0E"; minlen=20.0; ]
  Haxe -> ActionScript;
  Haxe -> Cpp;
  Haxe -> Cppia;
  Haxe -> Csharp;
  Haxe -> ECMAScript;
  Haxe -> HashLink [ arrowsize=1.1; color="#F89C0E"; ]
  Haxe -> Java;
  Haxe -> Lua;
  Haxe -> Neko [ arrowsize=1.1; color="#F89C0E"; ]
  Haxe -> PHP;
  Haxe -> Python;
  Haxe -> SWF [ arrowsize=1.1; color="#F89C0E"; ]
  Haxe -> Interp [ arrowsize=1.0; color="#F89C0E"; minlen=18.0; ]

  PHP -> Interpreter;
  ECMAScript -> Interpreter;
  ECMAScript -> Browser;
  Java -> javac -> JVM -> VM;
  Neko -> nekoc [ arrowsize=1.1; color="#F89C0E"; ]
  nekoc -> NekoVM [ arrowsize=1.1; color="#F89C0E"; ]
  NekoVM -> VM [ arrowsize=1.1; color="#F89C0E"; ]
  ActionScript -> AS3;
  AS3 -> VM;
  AS3 -> Browser;
  SWF -> Flash;
  Flash -> VM;
  Flash -> Browser;

  Lua -> Interpreter;
  Cpp -> cpp -> Executable;
  Cppia -> cpp;
  Cppia -> Interpreter;
  Csharp -> csc -> ".NET" -> VM;
  Python -> Interpreter;
  HashLink -> "HL/JIT" -> VM [ arrowsize=1.1; color="#00CCFF"; ]
  HashLink -> cc [ arrowsize=1.1; color="#00CCFF"; ]
  cc -> Executable;

  VM -> Executable [ style=dotted; dir="none"; ]
  Browser -> Interpreter [ style=dotted; dir="none"; ]
  Executable -> Browser [ style=dotted; dir="none"; ]
  VM -> Interpreter [ style=dotted; dir="none"; ]
}

haxe-dot-6
haxe-dot-61373×473 82.7 KB

Have good, make well

1 Like
10

Thanks, Brian!

I downloaded graphviz and am able to reproduce what you have. Yay! First time I’ve tried Graphviz, and it’s great. I’ll have to learn more about it when I can make more time. Glad you introduced me to it!

I’m unfamiliar with Flash/AS3/swf. It appears to me that AS3 (ActionScript 3) is the language, Flash is the environment/player/vm + framework, and swf is the compiled/bytecode which the Flash player plays/runs. If that’s the case, I see that you can target the browser by building a swf file and requiring that the user have a flash plug-in installed, but how do you target the browser if you’re generating AS3?

How would you use AS3 if not targeting Flash?

11

Here’s what I’m thinking:

haxe-targets
haxe-targets1398×321 57.4 KB

Mainly showing what Haxe can compile to — tools don’t need their own boxes. Bytecode targets in green. Execution environments in red.

/* Haxe toolchain */
digraph G {
    node      [ shape=box; style=filled; fillcolor="#E8E8E7"; color=gray; ]
    edge      [ arrowsize=0.5; ]

    graph [fontname = "clearsans"];
    node  [fontname = "clearsans"];
    edge  [fontname = "clearsans"];

    labelloc=b;
    label="Haxe toolchains (October 2018).  https://haxe.org";

    Neko     [ style=filled; fillcolor="#B5E1AC"; ]
    HashLink [ style=filled; fillcolor="#B5E1AC"; ]
    SWF      [ style=filled; fillcolor="#B5E1AC"; ]

    Interp   [ style=filled; fillcolor="#E1ACAE";
                label = "haxe --interp"; ]

    VM          [style=filled; fillcolor="#E1ACAE"];
    Executable  [style=filled; fillcolor="#E1ACAE"];
    Browser     [style=filled; fillcolor="#E1ACAE"];
    Interpreter [style=filled; fillcolor="#E1ACAE"];

    { rank=same; Haxe; Interp; }
    { rank=same; ActionScript; C; "C++"; Cppia; Csharp; ECMAScript;
                 Java; Lua; PHP; Python; }
    { rank=same; Neko; HashLink; SWF; }
    { rank=same; Browser; Executable; Interpreter; VM; }

    Haxe -> ActionScript;
    Haxe -> C [label="HL/C"];
    Haxe -> "C++";
    Haxe -> Cppia;
    Haxe -> Csharp;
    Haxe -> ECMAScript;
    Haxe -> HashLink;
    Haxe -> Java;
    Haxe -> Lua;
    Haxe -> Neko;
    Haxe -> PHP;
    Haxe -> Python;
    Haxe -> SWF;
    Haxe -> Interp [ minlen=10.0; ]

    C -> Executable [label="cc";]
    PHP -> Interpreter;
    ECMAScript -> Interpreter;
    ECMAScript -> Browser;
    Java -> VM [label="javac";]
    Neko -> VM;
    ActionScript -> VM;
    ActionScript -> Browser;
    SWF -> VM [label="Flash"];
    SWF -> Browser [label="Flash"];

    Lua -> Interpreter;
    "C++" -> Executable [label="cpp"];
    Cppia -> Executable [label="cpp"];
    Cppia -> Interpreter;
    Csharp -> VM [label="csc"];
    Python -> Interpreter;
    HashLink -> VM [ label="HL/JIT" ];
}
2 Likes
12

Nice @uvtc, really nice.

Add Haxelib to the top row, in and out to Haxe (which needs a colour) in an orange (flush left if possible), and that’ll be a nicely concise image, uvtc.

I snagged the Haxe color RGB from some random page (and it’s a gradient, not sure what the Haxe Foundation uses for the branding colour, or if the entire range counts as close enough.

Do people mind ECMAScript, or is it just js or Javascript?

Is there a channel where we can submit fan art to the foundation, utvc?

As stated in the ramblings, I’d prefer to have no ownership privileges or responsibilities regarding technical correctness. Too new to the tool interactions. Not sure how you feel about rights, John, but as far as I’m concerned the originals are public domain, to be improved. And you did. :slight_smile:

Nice work.

Have good, make well.

13

Sorry, someone else will have to speak up about the truth behind Actionscript and Haxe. Zero experience. But in your next image, John, I think you have it bang on.

Cheers

14

That looks really good!

I wouldn’t add haxelib. That doesn’t make any sense to me in this context.

15

In the same way as the other compiled source code target (c++, hlc, java, c#), it generates source code with then has to be compiled, except there is no automatic compilation with the native compiler for as3.

Though I’m not sure there are many compiler for as3, there was mtasc for as2 not sure if as3 has an equivalent.

16

I’d like to see this diagram on the Haxe List of Supported Platforms page.

Does the haxe.org github repo exclusively use the “staging” branch? Is that where I should direct my PR to?

17

Yes please send the PR against staging.

18

Great. Here we are:

1 Like
19

Although it doesn’t seem like the orange is needed in the files submitted; found the info.

Didn’t actually have to look too far. Main menu here, Haxe Foundation → Branding

Branding - Haxe - The Cross-platform Toolkit Everything you ever wanted to know about Haxe colours. Well, everything you wanted to know about Haxe orange, and more.

And repeating; nicely done on the graph, John. But if we get votes, I’d vote for your original top down versus the dir=LR. Only an opinion. Your first cut has a very appealing grok at a glance vibe.

Have good, make well

20

Well, there’s mxmlc. But I can’t think of a reason to use it as a compiler of as3 from haxe, unless the as3 is generated to be combined with an already existing ActionScript files