Visual Music for Mobile Devices

Hello Forum,

I wouldn’t call this project a heroic feat in programming but I am hoping it provides a nice user experience for people waiting at the airport. The project is called [Sky][Muse] and is part of a series of simple programs accessible by mobile inspired by travel themes. This particular one riffs off early motion graphics using the contemporary generative style of p5js programming.

If you had the time, I’d be grateful to know if it loaded on your mobile device? (or if you see any glaring code optimization that would make it load faster). EDITED

I ponied up for a screen shot report of every possible device, $39 - but I had to know! That was a dizzying affair and I am unable to consolidate the info into a clear compatibility statement. I am thinking devices 2015 and higher are mostly safe to play it :slight_smile:

Special thanks to Processing Forum and many others!



On my PC it runs in 2 to 3 seconds nice and smooth.
On my Samsung S4 I get a white screen for 10 to 20 seconds, and sometimes I have to reload the page, before it shows a screen with the loading/begin button. No Idea why.
Is the code visible somewhere?

1 Like

Hi Noel,

Thank you for checking it out! :slight_smile:

Did everything work once you pushed “begin” on your Samsung S4?

Here’s the code link

1 Like

Yes, once on screen everything runs well.

1 Like

Very cool! Soothing, actually. Worked on my Samsung Galaxy J7.

1 Like

Thanks swmarks, “soothing” is the goal! glad it loaded on your phone!


Hey there !

Had a look at your code and overall it okay, shouldn’t be causing to much throttling only thing is that bottom left sphere that seems even taxing to my computer.

But overall it seems okay ! Only thing is you actually constrain the frame-rate of the project within setup() this in turn will cap the frame-rate, in your case it caps it at 10 FPS.

Leaving it at 30 fps or even 60 fps ( default is 60 so if you remove the line sketch will run at 60 ) that should be smooth.

As for optimizations rather than using timer as a variable can just utilize frameCount to do counting for ahead.

Hi InferNova,

Thank you so much for taking a look! I think I got attached to the slowness of 10 FPS on the random() function. Is there another way to slow random() down while preserving a 60 fps?

Also, thanks for the tip on using frameCount directly!!!

Do you mean to many numbers are picked to quickly ?

Well let’s do some simple maths with frameCount and can achieve a random number being picked every 10 frames.

if(frameCount % 10 === 0) {
   // pick your random number in here every 10 frames

Hi InferNova,

i will need to do some finessing to get all the animations right but I am super pleased to have this tip! Thank you :slight_smile:

1 Like

runs smooth on Sony XA2 as well.
Had a short loading time but only 1-2 seconds, so nothing big

1 Like

Great news! Thanks Bobby54!!!

Here’s a new one!!!
(2 minutes )

Open Processing Link


Beautiful. Really compelling work.

…it would be great if it offered displayed a “play again” option after the sound runs out.


Thanks Jeremy! Good call!!!

Here’s another one - time based, motions graphics, typographic, sound design, narrative made on p5js in Open Processing. Little snippets of code from a variety of places sequentially incorporated. I think I went a little over the top on this visual music piece but it was hard to stop and cut things out:


@jeremydouglass still think reset buttons are a good idea - just lagging at implementation. :slight_smile:

Credits to code inspirations and assistance from:
Processing forum
Mikołaj Michalak
Brendan Canavan