Make Array of Objects Move

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.

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.

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/

References:
https://p5js.org/reference/#/p5/setup

:)

1 Like

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

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:

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.

:)

1 Like

@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. :wink: :hugs:

2 Likes