# Visual Music for Mobile Devices

**URL:** <https://discourse.processing.org/t/visual-music-for-mobile-devices/23314>\
**Category:** Gallery\
**Created:** [August 17, 2020, 8:51pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314 "2020-08-17T20:51:48Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 17, 2020, 8:51pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/1 "2020-08-17T20:51:48Z")

</div>

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 🙂

Special thanks to Processing Forum and many others!

[[compass]](https://www.openprocessing.org/sketch/946341/embed/?plusEmbedHash=MWI1ZWMyMDZlODRjNGVkY2E0MGMwYzlhMWNmOTIxMzFjNjUwNTgwZWMxZjlhYzJjZGQxYmZlMmNkZDY0ODczZmQ0MzA0Zjc3YjQ3M2IwMDA0NTYxZWU1YmYwM2U2ZjQ1OWQ1MjJmMzY0ZDVhYTRkYWU1MzQ4NTAyNWZiNmQwOTh0VlUwRG9waEJtNVZyQkRQb3NKcURtZmtDRzBmYUcrM2ltcm5heUxmL3BFV0EzSjVPT2VjeHlPUFVlcURtZzlXTlU0THE5MTQwRUt1dmJMcTBBVmRFdz09&plusEmbedFullscreen=true)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [August 17, 2020, 10:53pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/2 "2020-08-17T22:53:13Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 17, 2020, 11:09pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/3 "2020-08-17T23:09:50Z")

</div>

Hi Noel,

Thank you for checking it out! 🙂

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

Here’s the code [link](https://www.openprocessing.org/sketch/946341)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [August 17, 2020, 11:44pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/4 "2020-08-17T23:44:51Z")

</div>

> [@mnoble](#):
>
> Did everything work once you pushed “begin” on your Samsung S4?

Yes, once on screen everything runs well.

---

<div class="post-metadata">

**Author:** ![swmarks](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/swmarks/32/6015_2.png) [@swmarks](https://discourse.processing.org/u/swmarks)\
**Post date:** [August 18, 2020, 4:45pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/5 "2020-08-18T16:45:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 18, 2020, 5:31pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/6 "2020-08-18T17:31:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [August 19, 2020, 1:14pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/7 "2020-08-19T13:14:16Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 20, 2020, 2:34am UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/8 "2020-08-20T02:34:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [August 20, 2020, 10:35am UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/9 "2020-08-20T10:35:45Z")

</div>

> [@mnoble](#):
>
> Is there another way to slow random() down

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.

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

```

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 21, 2020, 3:23am UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/10 "2020-08-21T03:23:44Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Bobby54](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bobby54/32/9302_2.png) [@Bobby54](https://discourse.processing.org/u/Bobby54)\
**Post date:** [August 21, 2020, 3:41pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/11 "2020-08-21T15:41:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 21, 2020, 7:55pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/12 "2020-08-21T19:55:43Z")

</div>

Great news! Thanks Bobby54!!!

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [October 6, 2020, 7:55pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/13 "2020-10-06T19:55:22Z")

</div>

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

[Open Processing Link](https://www.openprocessing.org/sketch/972560/embed/?plusEmbedHash=ZWU4YTVhNTdmMjRlYTk4OTdhMDNhOTE5ZTE4MjJiMjU0NTlhNTI3M2VjMzQ0YzdkZmIyMzEzNmQ4YTQ1MmRkMGY2MGIxNTE3NGJjYzhmMjg5ODZjZTQ5N2M4NzNmZDA5MTc0MmRhMGRjZDQ5YjQ3MDkwZWYxOWYwYzczMDNiYzZsY0h2ZUdqTWVLdFJHTEUrK0puUHFHeC8rT1hJK29TNzRscEhTNEl2UldobHdyYUFxQ0JRT3FzakxucFpmamJXYk8rQ0NlODlEMEpUaFUvcERaRzhYUT09&plusEmbedFullscreen=true)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 6, 2020, 8:37pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/14 "2020-10-06T20:37:37Z")

</div>

Beautiful. Really compelling work.

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

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [October 6, 2020, 10:55pm UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/15 "2020-10-06T22:55:41Z")

</div>

Thanks Jeremy! Good call!!!

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [November 13, 2020, 5:36am UTC](https://discourse.processing.org/t/visual-music-for-mobile-devices/23314/16 "2020-11-13T05:36:37Z")

</div>

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**](https://www.openprocessing.org/sketch/1015820/embed/?plusEmbedHash=OGU0NGY2ZjAwOTlhN2MzMDJkODM2ZDU1NjkyM2Y4YmQ1YWEwN2U3ZGJhM2JkODc1YmJmODhmNzlkZWNiNWMwYjM0ODc2ODhhZjlmMmZhNWIxZGE0MmE0ZjYyYWZmZDgyNjFkOWZmY2MwOWNhYjg0NGUyYmJlNGE4OGZiM2EwOGRGSzFHd1NPd0g1Z3JtRUtpRjZ1M29iODdRTlhQbGs1VjQxTy9WQU5FRTJmUHA0SkUzcCtmL2IzNVNvVXlzK2dxZGhBQkVwWnFJUnA1ZEpaQ0N2NUJMUT09&plusEmbedFullscreen=true)

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

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