What the Loop app made with OF finally online


#1

Hi :slight_smile:

Finally it’s live! —> https://whattheloop.net/
A party app to create fun stop-motion selfies with friends, written with OF 0.10.

In February 2016 I made a first prototype in Processing during a Creative Code Jam and posted this:

This was one month later:

It’s been a veeery long journey, not only learning openFrameworks, but also designing, animating, thinking of how to call it, struggling, creating accounts online, testing, changing directions and much more. I almost quit many times, but in the end my partner and I made it until today :slight_smile:

I don’t know how much interest there will be in such an app, but I can say that it has already paid off in the sense that I learned a lot which enabled me working on five openFrameworks projects during the last two years.

Thank you to @arturo and to every single member helping others in this wonderful forum!

Again, here’s the link: https://whattheloop.net/ It’s an iPad app for now. If there’s demand, making it work on Android and Desktop should be doable. I develop and run it on Linux fine (without the social sharing features).

Questions and feedback are welcome!


#2

Congratulations @hamoid!


#3

Hey @hamoid really nice project. It is great that you made it to the end. I dont have an Ipad to test but it looks really nice and fun to use. The gui looks very nice. What did you use for it?
cheers


#4

Thank you @roymacdonald :slight_smile: I’ll soon write a summary of the last 2 years doing this, the things I tried, mistakes, etc.

The GUI initially was custom code, but I switched early to a slightly customized imGui. I changed part of the ImGui behavior which did not fit our app. In the end, I think writing my own would have produced cleaner code, more flexible, and less “twisting it to do things it was not supposed to do”. There’s only buttons, sliders and non-nested panels anyway. One thing I don’t like about using ImGui in OF is that it uses it’s own vector type, it’s own fonts, own colors. So I end up having two ways to specify the same things, and I don’t like how the code looks like.

For the icons I modified a font in which I replaced all the symbols like &$_{} by the icons I needed.

Recently I did a 6 day project for a large company (an iPad OSC GUI). I didn’t use any GUI framework, just plain PNGs with alpha. It works well and looks great, with shadows, glows, transitions, etc.

For reference, here’s a screenshot of the What the Loop GUI:

Here some galleries showing how ImGui can look like 1 2 3 4 5 6 7 (with enough effort).


#5

Ha, I see. I haven’t really used imgui. I kinda dont like the idea of it being constantly redrawing everything. Not even sure if I am correct. :stuck_out_tongue:
Well for a lot of things just using pngs is the most straight forwards way of doing guis.

cheers!


#6

Pretty much anything you are doing in GPU land is constantly being redrawn!

Hamoid: Congrats on your release! Sent you some imgui-related feedback by twitter PM on using ofVec2 and ofColor directly and merging in fonts. I wonder why you were using ImVec2 etc. at all when you can use ofVec2? Hope it is useful & happy to get more feedback if any!


#7

Sure, but the there’s a lot of stuff in the gui that does not and it is being called constantly in the draw loop. Just a feeling I have, no real evidence in order to claim that it is better or worse than any other method.
Cheers!


#8

Thank you @ocornut! for imgui and your interest in improving it too! :slight_smile:

About ofVec2, I was trying to avoid it, since OF 0.10 switched to using glm and that’s the version I used since the beginning. Also, you can blame my inexperience for most issues I had :slight_smile: This was my first larger project with OF.

Redrawing: I get the impression that with imgui I’m rebuilding the gui on every frame. As @roymacdonald mentions, I call lots of functions to position things, change colors, set spacing, fonts, etc, when actually the dialog is not changing. Wouldn’t it be faster in this case to just have a fbo with the panel rendered, and only re-render the fbo it if something changes in that panel?


#9

As it turns out, we found that ofxImGui supports for both the glm::vec2 and ofVec2 types so they could have been used everywhere instead of ImVEc2.

“Redrawing: I get the impression that with imgui I’m rebuilding the gui on every frame.”

That’s the whole point of the system. It’s enabling this efficient and non-error-prone data and function binding that you don’t get with retained mode UI.

“Wouldn’t it be faster in this case to just have a fbo with the panel rendered, and only re-render the fbo it if something changes in that panel?”

Typical GPU cost are associated to pixels processing much more than vertices processing. GPU-wise you would be reading from large texture A then writing/blending into texture B instead of reading from small font texture (with much higher texture cache efficiently) and writing/blending into texture B. Which ones sounds faster to you? There are several other parameters and no simple yes/no answer, but ultimately you’d also switch to a model where you would have uneven usage spikes instead of even usage. Does that sounds better in a realtime application? Why haven’t you/we considered doing the same sort of caching for a 3D scene? “If the camera didn’t move then why re-rendering?”. Because it’s much more work and you are optimizing for the best case instead of optimizing for the worst case.

Add to that the much bigger new problem you have of cache invalidation. “it if something changes in that panel?” may means running the whole CPU-side UI anyway, and that’s the vast majority of the existing cost.

Going idle (= not refreshing unless there’s inputs) is useful and works for desktop style applications where the UI is prominent and you don’t have 3D stuff rendering, but if you have animated stuff behind I think honestly it is not worth the hassle.

(We can move this topic elsewhere if you are interested in digging further, feeling bad to derail the existing What The Loop topic here!)