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. 
2 Likes