Visual Music for Mobile Devices

Gallery
1

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!

[compass]

6 Likes
2

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?

2 Likes
3

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

2 Likes
4

Yes, once on screen everything runs well.

1 Like
5

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

1 Like
6

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

7

@mnoble

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.

8

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!!!

9

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
}
3 Likes
10

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:

2 Likes
11

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

1 Like
12

Great news! Thanks Bobby54!!!

13

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

Open Processing Link

3 Likes
14

Beautiful. Really compelling work.

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

2 Likes
15

Thanks Jeremy! Good call!!!

16

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:

link

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

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

4 Likes