Sharing my work (G. Analytics Visualization) and some doubts

Kajuna

I've just published this P5js sketch that allows users with Analytics accounts to visualize their data geographically. http://tailorandwayne.com/starry-analytics/ (some example shots at the end of the post)

Still many things to improve. My management of html elements, for example... but also, I've encountered these problems that might either be bugs or my fault (I'm just getting started on P5js):

• When using a function as the callback for a DOM element event,

        var but = createButton(items[i].name,items[i].type+","+items[i].created);
        but.id(items[i].id);
        but.parent(profilesP);
        but.addClass("setupB");
        but.mousePressed(selectProfile);
  

I was expecting to be able to access the element's value using this.value(), but instead I have to dig into the object's properties and find this.elt.value. Is that expected?

• The touches array was always empty, even when using a phone browser and multiple fingers.

• I set the canvas as the background via index-z, then it becomes unclickable. I work my way around that by making all other elements unselectable,

  .unselectable {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  

and especially flagging when the mouse is clicking on a DOM object and then assuming that the rest of clicks and drags within the canvas must be on it. Still, often the mouse interaction is not reliable. Not sure if there's a cleaner way of achieving this.

Here's the code if anyone's interested: https://github.com/JuanIrache/StarryAnalytics

And some shots of my data:

blindfish

Sadly I don't have a GA account so can't test this; but the screenshots look cool!

The code is fairly epic! I'm impressed you managed to get such a large project working with such a flat structure. That often leads to bugs - e.g. with name clashes etc. - and makes it very hard to manage your code.

I would highly recommend you look into modular approaches to coding. The Objects example gives a (slightly misleading) example of a module pattern (note - despite what it says it's NOT a class!).

Such patterns allow you to separate code into chunks of code that serve a clear purpose. So for example you might have a module to manage the user interface, another module for drawing to the canvas, one to manage all the GA stuff etc.

Because modules encapsulate all their variables and functions you don't have to worry about name clashes with variables and functions in another module and it makes your code much easier to reason with. You can also separate modules into their own files which will also make it far easier to work with your code...

If you are creating many objects of the same type the p5 Object example is a very poor one to follow. You really need to learn about JS prototypal inheritance in order to get best performance. It sounds painful; but it's not so bad. I'd highly recommend the You don't know JS books if you want a technical explanation; but it's basically a matter of leaning and following a simple pattern (your 'class' methods are actually attached to the 'class' prototype and not defined inside the class declaration). If you're not too worried about browser support (which actually isn't so bad these days) you might also look at the ES6 class syntax (still not really a class - but as close as you'll get in JS).

I'd also suggest you learn some CSS: it's far easier to style DOM elements with CSS rather than using calls to style()! Instead just add/remove classes on elements you want to style. For example you can use CSS to add/remove DOM elements from the page as and when necessary and probably avoid many of your z-index and mouse handling issues.

Re: your specific questions:

• Having to use this.elt.value is expected see Fields > elt.
• no idea about touch events
• look into state management (and hiding elements with CSS) to determine when DOM elements should be visible/clickable

Kajuna

Thanks a lot for your feedback, blindfish.

I'm used to working with endless code files, but I know it's not the best practice and will try to mitigate it :). Will go through the module patterns docs.

I would have normally used CSS for hiding and styling stuff, but I was following Shiffman's P5js tutorials while coding this, so I mostly used the tools covered there. And I'm not perfectly confortable with CSS, so there's room for improvement there.

Again, thatnks for your thorough reply and the resources you provided to keep learning :).

jeremydouglass

Beautiful work, by the way. You should definitely move this to the Share Your Work forum channel once you've had a chance to work out any p5.js programming questions you have.

Kajuna

Thanks. Sure, I'll do that. I actually intended to, but was expecting a Share your work within the P5js subforum. I assume it's ok to just edit the original post and move it to the right section?

jeremydouglass

Yes, I think you can just move it. I've seen other p5.js pieces in the general Share Your Work - but good point that it could really fit in either place.

GoToLoop

Just repost it as discussion under category "Share Your Work".
For a broader audience, post it at Reddit too: https://www.Reddit.com/r/processing/

Kajuna

@blindfish Thanks again for your insight. It pushed me into studying more JavaScript outside of P5js. I went for the Eloquent Javascript book instead of You Don't Know JS, as I found the first chapters more stimulating.

Aside from many other improvements, I have now divided some of my project's code into module-like structures that I can reuse. It is still pretty messy overall, as it was really tangled initially, but I learnt a lot in the process. :)