# Generate music with image that move with mouse

**URL:** <https://discourse.processing.org/t/generate-music-with-image-that-move-with-mouse/39726>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [November 15, 2022, 11:17am UTC](https://discourse.processing.org/t/generate-music-with-image-that-move-with-mouse/39726 "2022-11-15T11:17:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [November 15, 2022, 11:17am UTC](https://discourse.processing.org/t/generate-music-with-image-that-move-with-mouse/39726/1 "2022-11-15T11:17:48Z")

</div>

Hello.  
I’m starting with processing and I’ve been putting together examples to create my own.  
In this one I would like to add some sound when moving the mouse (and the square drawing).  
How to add a sample or a noise wave, white noise or any sound wile i move the mouse and drawing?  
Tks for help.

here is my code:

/\*\*

- Blur Filter
- 
- Change the default shader to apply a simple, custom blur filter.
- 
- Press the mouse to switch between the custom and default shader.  
_/  
import ddf.minim._; //n

Minim minim; //n  
AudioSample radar;//n  
AudioSample pulse;  
AudioSample hit;  
AudioSample lucid;  
int x = 900; //n  
int y = 700;//n  
int dx = 85; //n  
int dy = 85; //n

PShader blur;  
float r = 0;

void setup() {

background(0);

size(800, 800, P2D);  
stroke(98, 250, 8);  
rectMode(CENTER);  
smooth();  
blur = loadShader(“blur.glsl”);

minim = new Minim(this); //novo  
radar = minim.loadSample(“radar.wav”, 2048); // novo  
pulse = minim.loadSample(“pulse.wav”, 2034);  
hit = minim.loadSample(“hit.wav”, 2035);  
lucid = minim.loadSample(“lucid.wav”, 143);

}

void draw() {

if (mousePressed){

x += dx/2;  
y += dy/2;

//superior esquerdo  
int m = millis();

//stroke(155);  
fill(m % 105);  
rect(50, 50, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 27, 60);

// inferior direito  
int m3 = millis();  
//stroke(155);  
fill(m3 % 105);  
rect(750, 750, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”,728, 760);

//superior direito  
int m4 = millis();  
//stroke(155);  
fill(m4 % 105);  
rect(750, 50, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 727, 60);

```
int m5 = millis();

```

//stroke(155);  
fill(m5 % 105);

rect(50, 750, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 27, 760);

```
int m2 = millis();

```

//stroke(155);  
fill(m2 % 205);

filter(blur);  
translate(mouseX, mouseY);  
rotate(r);  
rect(mouseX/8, mouseY/8, 150, 150);  
ellipse(mouseX/8, mouseY/8, 100, 100);

r = r + 0.05;

textSize(50);  
fill(255);  
text(“VrtX”, 5,35);

textSize(50);  
fill(255);  
text(“ArT”, 10, 75);

}  
}

void stop(){  
radar.close();  
minim.stop();  
super.stop();  
}

// saveFrame(“frame-####.jpg”);

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 15, 2022, 4:52pm UTC](https://discourse.processing.org/t/generate-music-with-image-that-move-with-mouse/39726/2 "2022-11-15T16:52:56Z")

</div>

there is a library for sound

you can play sound files or samples

here is file

see [Reference / Processing.org](https://processing.org/reference/libraries/sound/SoundFile_play_.html)

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [November 15, 2022, 11:43pm UTC](https://discourse.processing.org/t/generate-music-with-image-that-move-with-mouse/39726/4 "2022-11-15T23:43:38Z")

</div>

tks Chrisir…

This is the new code, and it is not running: ☹  
I am having this problem statement

The file “blur.glsl” is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.  
NullPointerException  
NullPointerException

the code:

The file “blur.glsl” is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.  
NullPointerException  
NullPointerException

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [November 15, 2022, 11:48pm UTC](https://discourse.processing.org/t/generate-music-with-image-that-move-with-mouse/39726/5 "2022-11-15T23:48:02Z")

</div>

But Chrisir, i did use what you said, i guess lol… here is the new code…  
I am trying to add more than one noise or add samples por when the “square” hits the end of the page…  
And also save ir with the sound the way it is now…  
Sorry, i am trying to explaing, but my inglesh do not help rsrs

* * *

import processing.sound.\*;

BrownNoise noise;  
/\*\*

- Blur Filter
- 
- Change the default shader to apply a simple, custom blur filter.
- 
- Press the mouse to switch between the custom and default shader.  
\*/

/\*  
import ddf.minim.\*; //n

Minim minim; //n  
AudioSample radar;//n  
AudioSample pulse;  
AudioSample hit;  
AudioSample lucid;  
int x = 900; //n  
int y = 700;//n  
int dx = 85; //n  
int dy = 85; //n  
\*/

PShader blur;  
float r = 0;

void setup() {

background(0);

size(800, 800, P2D);  
stroke(98, 250, 8);  
rectMode(CENTER);  
smooth();  
blur = loadShader(“blur.glsl”);  
/\*  
minim = new Minim(this); //novo  
radar = minim.loadSample(“radar.wav”, 2048); // novo  
pulse = minim.loadSample(“pulse.wav”, 2034);  
hit = minim.loadSample(“hit.wav”, 2035);  
lucid = minim.loadSample(“lucid.wav”, 143);  
\*/  
// Create and start the noise generator

noise = new BrownNoise(this);  
noise.play();  
}

void draw() {

if (mousePressed){  
// Map mouseX from -1.0 to 1.0 for left to right  
noise.pan(map(mouseX, 0, width, -1.0, 1.0));

// Map mouseY from 0.0 to 0.3 for amplitude  
// (the higher the mouse position, the louder the sound)  
noise.amp(map(mouseY, 0, height/2, -0.3, 0.3));  
}

if (mousePressed){

// x += dx/2;  
//y += dy/2;

//superior esquerdo  
int m = millis();

//stroke(155);  
fill(m % 105);  
rect(50, 50, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 27, 60);

// inferior direito  
int m3 = millis();  
//stroke(155);  
fill(m3 % 105);  
rect(750, 750, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”,728, 760);

//superior direito  
int m4 = millis();  
//stroke(155);  
fill(m4 % 105);  
rect(750, 50, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 727, 60);

```
int m5 = millis();

```

//stroke(155);  
fill(m5 % 105);

rect(50, 750, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 27, 760);

```
int m2 = millis();

```

//stroke(155);  
fill(m2 % 205);

filter(blur);  
translate(mouseX, mouseY);  
rotate(r);  
rect(mouseX/8, mouseY/8, 150, 150);  
ellipse(mouseX/8, mouseY/8, 100, 100);

r = r + 0.05;

textSize(50);  
fill(255);  
text(“VrtX”, 5,35);

textSize(50);  
fill(255);  
text(“ArT”, 10, 75);

}  
}

void stop(){  
[//radar.close](https://radar.close)();  
[//minim.stop](https://minim.stop)();  
super.stop();  
}

// saveFrame(“frame-####.jpg”);