Fuzo: time zone converter with p5.js

phoebus

Hi there

Here is a little web-app sort of tool I did to help me with the constant timezone / hours conversion you do on the internet. http://rich.gg/fuzo

I take the opportunity of the forum to share some technical things with you.

First, in P5.js I didn't find the "2D Picking" tool you need to "touch" a object in a 3D scene. (You know, that thing that makes the travel of the perspective in reverse to figure out which 3D object is "under" the cursor that stands on the 2D surface of the screen). So, considering I wanted to move a sphere and some points on that sphere using the mouse, I took it as a fun challenge: Make my interactions on a circle "map" to the objects on sphere. ...people should worship trigonometry

Then came the realization that my initial idea of placing the dots on the countries or cities to have the timezone set would not work on the scale of a sort of widget. I didn't want to make a zoomable globe because 1) I wanted it to be a sort of "object" that fit entirely in its screen and 2) I wanted it to be very light texture wise and 3) Didn't want to have the globe rotate on more than one axis (the proper one) So, I though may be my week of trigonometry had been for nothing and my idea was worthless. But then, I came up with the idea that I could still use my "dots-on-the-sphere-control" thing to set the timezone horizontally while using the vertical movement could be used to set the time. (this question of what sort of interaction I would use for time setting was still in the air at that moment) Of course I realized that it would result in some sort of awkward concept that users would have difficulties understanding. They will try, first thing, to put the dot on the places rather than A) Set the timezone horizontally and B) set the hour But I sort of liked it anyway and it made me think of some tools I like very much and which require a little know-how like some watch complications, a Vernier caliper etc... And I though I could make a very ultra simple sort of that ... and still be the simplest way to sort those timezone conversion thing that I know of

Once I got the tool done, it took me about the same amount of time to "package" it, meaning the DOM / html things, the "share" buttons, the god damned _responsive _ layout etc... to try to make it feel nice

On the topic of improvements, I'm thinking of adding a "now" button to make it show the current hour. Other this is I already implemented a list of the timezone cities windows offers you in its clock app (you can see them by hitting the space-bar ) and I could add a search box with suggest to have those cities show up on the globe... but hey, I can't spend too much time on this

One thing feels a bit frustrating after that : no mobile :( It shows OK on my Android devices but the interaction doesn't work at all and the frame-rate is miserable

On the frustrating topic, it seems the rendering of textures using alpha show some sort of white lining around the textures parts, which looks very bad, when you run Fuzo on a mac using an AMD GPU... if you can confirm...

So here you are you can give it a try and your feedback will be welcome thank you for reading :) rich

jeremydouglass

Really impressive UI elements and overall polish.

Until I read the instructions the vertical placement method wasn't intuitive to me, even with the feedback readouts on the sides -- I first tried to put a dot "on Los Angeles" and another dot "on Sidney" and wasn't sure I understood what was happening.

Perhaps if a time number was on the dot itself -- like the difference-dot -- so you could see it changing as you dragged the dot up-down...? Not really confident of the suggestion, just reflecting on my own initial confusion.

phoebus

wow, thanks ! the suggestion sounds good, really. But also I'm wondering if it is better to add some sort of concentric circles textures on the dots to show that they have to be "touched", or this solution of time on the dots...

The screenshot you took shows the bad alpha texture around the hours (the white lines) Could you confirm you are on a mac with a AMD gpu ?

jeremydouglass

MacBook Pro (13-inch, 2016, Four Thunderbolt 3 Ports) 3.1 GHz Intel Core i5 Intel Iris Graphics 550 1536 MB

phoebus

This is what I see on my screen. No white lines:

Could you try this code on your mac ?

var redHourAlpha = 0;
var alphRedHour = 0;

function setup() {
  createCanvas(800, 600, WEBGL);
}

function draw() {
  background(240);
  alphRedHour = map(mouseY, 0, height, 25, -25);
  ladder();
}

function ladder() {
  //LADDER
  for (var i = -45; i <= 45; i += 3.75) {
    redHourAlpha = i;
    var redHourAlpha2 = map(alphRedHour, -12, 12, -45, 45);
    //
    var ladderAlphaR = sq(abs(redHourAlpha - redHourAlpha2));
    var radiusRladder = 285;
    var redHourXladder = radiusRladder * cos(radians(redHourAlpha));
    var redHourYladder = radiusRladder * -sin(radians(redHourAlpha));
    //
    push();
    rectMode(CORNER, CENTER);
    translate(-redHourXladder+100, redHourYladder, 0);
    fill(128, ladderAlphaR);
    //
    rect(0, 0, 200, 2);

    pop();
  }
}

phoebus

@jeremydouglass still there ?

jeremydouglass

Sure, happy to test.

That is in Chrome Version 59.0.3071.115 (Official Build) (64-bit)

phoebus

oh weird

where do you think this could comme from ? I use Chrome on win7 and I don't have white lines...

thank you for the test btw !!

phoebus

Here about the bug Seems to be a specific Mac + Chrome (or safari) issue Works fine on firefox

https://github.com/processing/p5.js/issues/2105

phoebus

the Processing for Android version of Fuzo is available here https://play.google.com/store/apps/details?id=gg.rich.me.fuzo

give it a try !

jeremydouglass

<:-P