E-Fun (fractal inspired CMS)

[ivan.moony]

E-Fun (fractal inspired CMS)

about e-fun

E-fun is a fractal inspired, parent-child orbiting, zoomable, and minimalistic content management assistant. A content management system (CMS) is a software application that can be used to manage the creation and modification of digital content. Its usual application is building web sites. Composing content in E-fun is consisted of importing graphics from external vector image or bitmap editor, and arranging it within ovals using parent-children structure described in a separate file. Because E-fun treats individual pages as graphics, designers have complete freedom in composing content. Vector graphic pages are suitable for expressing textual content and illustrations, while bitmap pages are suitable for expressing photos.

user experience

As much as E-fun makes the final result attractive and distinctive from mainstream products, on the other side, it offers a slackware flat-file experience for creating sites. That means that besides creating and saving pages in external graphic editing tools, one has to possess a knowledge about editing the main contents JSON file in a text editor, as well as setting up a local web server for testing the site before publishing. Once that site is done, the files of which the site is composed of are ready to be uploaded to a remote server. All this may require some degree of technical knowledge from web authors, but once one gets into the stunt, maintaining web sites with E-fun should be an easy-peasy task.

target audience

E-fun is made as a helper to organize, emphasize, and publish your web pages. E-fun offers a distinctive, progressive, and adventurous way to present your content. E-fun can bring your insights, messages, and ideas to be shared, seen, and accented in original way, but it requires an open mind, a bit of experience, and a courage to stand out. If you find yourself between these lines, be sure to check E-fun out.

https://contrast-zone.github.io/e-fun/





P.S.
The project is currently in free beta cycle, and the final version will be free for all the CodeForum members.

 

[ivan.moony]

Yey, I published the first release version of E-fun today: v0.1-release

As I promised, it is free for download and use for CodeForum members. If you like it, I'd like to hear about it. If you don't like it, I'd also like to hear about it. If you have any questions, I'm here to answer them. I hope I'll start working on the next version soon, so if there's anything you'd like to see in the future versions, I'm listening for suggestions.

Thank you in advance for any comments.

 

[simong1993]

That is amazing lol. I like it although I can see my self getting dizzy

 

[Malcolm]

Very cool! I can see this being used for lots of things! Great work @ivan.moony, may I ask how long it took you?

 

[ivan.moony]

Very cool! I can see this being used for lots of things! Great work @ivan.moony, may I ask how long it took you?

Thank you @simong1993 and @Malcolm.

I got the idea about this some eight years ago, and been implementing it since February, 2018, but I did other stuff too in the same time, so it was a month here, a month there for a few years. At the last, I was actually impressed by the overall Javascript preformance, when I implemented fisheye effect. I thought I would have to reach for webasm or asm.js, but it turned out it's fast enough this way, as a pure javascript.

The hard part was cluing up the formula that arranges and scales ovals. I solved it by binary search, checking if circles intersect on each iteration. When they reach a pixel precision for about a half pixel, I squash the coordinates to form an oval. Then I go to a neighbor oval, repeating the procedure.



Calculating positions and radiuses was a tricky thing. I tried to make it mathematically correct, but when I entered a system of equations to Wolfram Alpha, I got two pages long solutions. I also tried an option of making inner and outer circles concentric, drawing child circles each with the same smaller fit radius, then 3D rotating the whole thing, so the near circles get big, and far ones small. This was also unacceptable, as there was a big focus distorsion of coordinates on very near circles.

I finally settled down with binary search of x, y and r. First I set bounds on minimum and maximum coordinates and radius, then I check if circles intersect, and that is a case when:

• the distance between centers is less than the sum of radiuses - for one circle next to another
• absolute value of radius difference is less than the distance between centers - for one circle inside another

If there is an intersect, I half the position and radius in one direction. If there is no intersect, I half the position and radius in the other direction. After some 16 steps for each circle (I actually measure a pixel precision to stop the binary search), I get coordinates and radius precise enough to draw it without noticing an error in approximation. Surprisingly, this was a very fast method, probably faster than getting initial mathematically correct model because each calculation step is very simple.

Lately, I discovered the real formula for doing this thing - Appolonian gasket, but as everything worked good enough, I didn't want to touch it, so I left the binary search in.