# Make Array of Objects Move

**URL:** <https://discourse.processing.org/t/make-array-of-objects-move/40902>\
**Category:** Libraries\
**Created:** [February 11, 2023, 5:50pm UTC](https://discourse.processing.org/t/make-array-of-objects-move/40902 "2023-02-11T17:50:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [February 11, 2023, 5:50pm UTC](https://discourse.processing.org/t/make-array-of-objects-move/40902/1 "2023-02-11T17:50:47Z")

</div>

I am having a very hard time to make these array of objects that was parsed from a midi file to move, please him me out. This is the link to the code. Thanks in advance.

> **[p5.js Web Editor](https://editor.p5js.org/Chigoz/sketches/J1PRnfWm4)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 12, 2023, 12:51am UTC](https://discourse.processing.org/t/make-array-of-objects-move/40902/2 "2023-02-12T00:51:43Z")

</div>

Hello @Chigoz,

_setup()_ runs once.

I saved midi data to an array and then iterated through the arrays over time in _draw()_ to animate them.

```auto
let amidi = [];
let avelocity = [];
let count = 0;

function setup() {
  let c = createCanvas(400, 400);
  c.background(0);

  // simple load from asset file
  let mybytes = loadBytes("index.mid", () => {
  let mymidi = new Midi(mybytes.bytes);
    mymidi.tracks.forEach((track) => {
      track.notes.forEach((note) => {
        // console.log(
        // `Note: ${note.name} ` +
        // `Pitch: ${note.midi} ` +
        // `Velocity: ${note.velocity} ` +
        // `Duration: ${note.duration}`
        // );
        append(amidi, note.midi);
        append(avelocity, note.velocity);
      });
    });
  });
  console.log(amidi.length);
  console.log(avelocity.length);
  // console.log(JSON.stringify(amidi.length));
  // console.log(JSON.stringify(avelocity.length));
}

function draw() {
  background(0);
  if (frameCount == 1) console.log(amidi.length);
  //console.log(count)
  if (count > amidi.length) {
    count = 0;
    background(0);
  }
  stroke(255);
  //ellipse(note.midi*3,note.velocity+50,50);
  ellipse(amidi[count] * 3, avelocity[count] + height/2, 50, 50);
  count++;
}

```

I used this to view the JSON data:  
[http://tonejs.github.io/Midi/](http://tonejs.github.io/Midi/)

References:  
[https://p5js.org/reference/#/p5/setup](https://p5js.org/reference/#/p5/setup)

> **[GitHub - Tonejs/Midi: Convert MIDI into Tone.js-friendly JSON](https://github.com/Tonejs/Midi)**
>
> Convert MIDI into Tone.js-friendly JSON. Contribute to Tonejs/Midi development by creating an account on GitHub.

`:)`

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [February 12, 2023, 7:03am UTC](https://discourse.processing.org/t/make-array-of-objects-move/40902/3 "2023-02-12T07:03:01Z")

</div>

Hi @glv, thank your very much for your help, I appreciate your effort. Please help me make the circles move at a uniform speed from right to left e.g slide in the x direction. Please also help me determine the length of “tracks”,“track” and the length of “notes” in the array. I don’t know how forEach loop really works albeit for a 2D array. Thanks

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 12, 2023, 4:03pm UTC](https://discourse.processing.org/t/make-array-of-objects-move/40902/4 "2023-02-12T16:03:57Z")

</div>

> [@Chigoz](#):
>
> I don’t know how forEach loop really works albeit for a 2D array. Thanks

Consider looping through arrays with simple for() loops.

You have to start somewhere…

Do some research… that is what I did for this topic.

Just enough to get you started for a single track:

```auto
let count = 0;

let mybytes;
let mymidi;

function preload() {
  // simple load from asset file
  mybytes = loadBytes("index.mid", () => {
    mymidi = new Midi(mybytes.bytes);
    mymidi.tracks.forEach((track) => {
      //console.log(`Track: ${track.name} `);
      track.notes.forEach((note) => {
        // console.log(
        // `Note: ${note.name} ` +
        // `Pitch: ${note.midi} ` +
        // `Velocity: ${note.velocity} ` +
        // `Duration: ${note.duration}`
        // );
      });
    });
  });
}

function setup() {
  let c = createCanvas(400, 400);
  c.background(0);

  console.log(mymidi.tracks.length);
  console.log(mymidi.tracks[0]);
  console.log(mymidi.tracks[0].notes.length);
  console.log(mymidi.tracks[0].notes[0]);
  console.log(mymidi.tracks[0].notes[1].midi);
}

function draw() {
  background(0);
  
  let ltim = mymidi.tracks[0].notes[count].time;

  strokeWeight(3)  
  stroke(255);
  line(0, 5 * count, ltim, 5 * count);

  count++;
  if (count >= mymidi.tracks[0].notes.length) {
    count = 0;
    background(0);
  }
}

```

I was able to achieve this expanding on the code above.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/9/49f078b9a0d4b5c29028d8c9a441cbd2fe93aa9e.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [February 12, 2023, 6:42pm UTC](https://discourse.processing.org/t/make-array-of-objects-move/40902/5 "2023-02-12T18:42:22Z")

</div>

@glv : Many thanks my friend, you are a star, I owe you a gold medal. Thank you very much for giving me insight into the structure midi files and how to make them move. Well done, God bless you. 😉 🤗