Ideas

As we have been indicating throughout this book, JavaScript has become more and more powerful. Also p5.js has a few interesting capabilities worth while exploring. In this final section we want to explore a couple of those, such as

playing videos,
accessing the webcam,
accessing the microphone,
accessing sensors,
web workers,
web sockets, and
3D drawing.

Interestingly, some work very nicely, others barely at all. In addition, access an online database like Back4App might open up a whole new set of applications. And finally, peer-to-peer would be a cool feature.

Try it

Drawing

This is a simple drawing application. Its main point is to work on both desktop and mobile devices. The problem lies in the fact that desktop browsers fire the 'mouse' events, whereas the mobile browsers fire the 'touch' events. The following function solves this problem:

function addMouseOrTouchEvents() {
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if (isMobile) {
        window.addEventListener('touchstart', handleStart);
        window.addEventListener('touchmove', handleMove);
        window.addEventListener('touchend', handleEnd);
    } else {
        window.addEventListener('mousedown', handleStart);
        window.addEventListener('mousemove', handleMove);
        window.addEventListener('mouseup', handleEnd);
    }
}

function handleStart(evt) {
    ...
}

function handleMove(evt) {
    ...
}

function handleEnd(evt) {
    ...
}

Try it

HtmlEditor

This is an example of a simple HTML editor. It basically uses a div-tag for rendering together with the document.execCommand(), which actually is deprecated and should not be used anymore, but still works on all browsers I tested. It is a UI program, and we use the JSHtmlTextArea widget:

function setup() {
    createGUI(300, 300);
    frameRate(5);
    setLayout('border');

    display = new JSHtmlTextArea("Enter text here...", 10, 20);
    display.addStyle('width: 99%');
    display.addStyle('height: 98%');
    display.setHtml('hi <b>there</b>, how are <span style="color:red">you</span>?');
    addWidget(display, 'CENTER');

    ...
}

The trick is to mark the div-tag with the attribute contentEditable as true.

Try it

UrlReaderTester

This example uses and XMLHttpRequest object to issue an HTTP GET request. It could also be used for POST, PUT or DELETE requests. However, this example does not work on many mobile browsers.

Try it

Microphone

A simple GraphicsProgram that accesses the microphone. You need to grant the browser permission to access the microphone. An interesting application might be to do Fourier transformation, etc. However, I did not get this example to work on mobile browsers.

Try it

Video

A simple demonstration on how to play and modify video files. Especially the modifying part has really surprised me: one, that it is relatively easy to do, and two, that the framerate is still decent. And three, this example works on all browsers I tested, even the mobile ones.

Try it

WebCam

A simple demonstration on how to access a webcam, and how to modify the pixels. You need to grant the browser permission to access the webcam, and as expected, it I did not get it to run on any of the mobile browsers.

Try it

Sensors

Now this was a big disappointment: I really was hoping that this would work at least on some mobile devices. I only got it to work on Firefox for Android. It is a simple GraphicsProgram that accesses the sensors. You need to grant the browser permission to access the sensors.

Try it

WebWorker

JavaScript is inherently single threaded. Web workers is a way around this. Surprisingly enough, this worked on all browsers I tested, also the mobile ones.

[1] https://medium.com/techtrument/multithreading-javascript-46156179cf9a
[2] http://blog.namangoel.com/replacing-eval-with-a-web-worker

ToDo

There are a few more interesting projects to explore.

- 3D stuff
- database via Back4App or similar
- websockets
- p2p
https://github.com/vanevery/p5LiveMedia
https://peerjs.com/
https://blog.bitsrc.io/simplified-peer-to-peer-communication-with-peerjs-e37244267723
https://medium.com/geekculture/multiplayer-interaction-with-p5js-f04909e13b87
https://github.com/vanevery/p5LiveMedia