p5 app for phone/pad/laptop/desktop clients?

edited July 2016 in p5.js

I are skilled in developing Processing sketches and asp.net web apps. But I am new to both P5 and writing web apps with wildly different screen-sized clients (phones, desktops, etc.). Simple content and layout, but I need to scale the size and do things like add some input buttons for touch devices that are hidden from devices with keyboards and mice.

Any suggestions for starting points greatly appreciated.



  • Answer ✓

    Do you want these buttons to be part of the sketch, meaning on canvas? Then you can conditionally add or remove them based on a width and height.

    If you are about html-buttons, you can use css to show and hide elements. There is a library called modernizr that helps to identify browser's features, including if it is touch-screen.

    Some css frameworks already have classes that allow to show or hide elements on different screen sizes automatically, and these are generally designed to create responsive designes. Bootstrap for example.

  • Answer ✓

    Are you familiar with responsive web design (see also: google devs, smashing magazine etc...).

    If you can stick to adding interface elements like buttons etc. using standard HTML, rather than directly on the canvas, then a responsive approach can be used and will make your life far simpler: e.g. you can show-hide interface elements using CSS media queries.

    The canvas itself can be 'responsive' - i.e. resize to best fit the target device. I'd recommend a separate init function that sets all relevant variables relative to screen size; and that is called in setup and then whenever the screen resizes (e.g. when screen orientation changes). Note that you may also need to reset the position of canvas contents on resize.

    I've been experimenting with this myself recently; though not in p5. It may be a while before I get the time to do so; but at some point I'll try and document the approach I've used ;)

  • Outstanding tips and links, thanks for the launch!

Sign In or Register to comment.