Drawing on canvas using array from json


#1

Hi, i’m trying to draw on canvas with pure js, using arrays from json file.
First, i’m using MidiConvert from:
https://tonejs.github.io/MidiConvert/
To convert midi files to json format,
here is example of conversion twinkle_twinkle.mid to json:

    {
      "header": {
        "PPQ": 960,
        "timeSignature": [
          4,
          4
        ],
        "bpm": 100,
        "name": "Twinke Twinkle Little Star"
      },
      "startTime": 0,
      "duration": 28.800000000000015,
      "tracks": [
        {
          "startTime": 0,
          "duration": 0,
          "length": 0,
          "notes": [],
          "controlChanges": {},
          "id": 0,
          "name": "Twinke Twinkle Little Star"
        },
        {
          "startTime": 0,
          "duration": 28.800000000000015,
          "length": 69,
          "notes": [
            {
              "name": "C4",
              "midi": 60,
              "time": 0,
              "velocity": 0.5433070866141733,
              "duration": 0.6
            },
            {
              "name": "C3",
              "midi": 48,
              "time": 0,
              "velocity": 0.5118110236220472,
              "duration": 1.2
            },
            {
              "name": "C4",
              "midi": 60,
              "time": 0.6,
              "velocity": 0.5984251968503937,
              "duration": 0.6
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 1.2,
              "velocity": 0.6850393700787402,
              "duration": 0.5999999999999999
            },
            {
              "name": "E3",
              "midi": 52,
              "time": 1.2,
              "velocity": 0.5984251968503937,
              "duration": 1.2
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 1.7999999999999998,
              "velocity": 0.6377952755905512,
              "duration": 0.6000000000000001
            },
            {
              "name": "A4",
              "midi": 69,
              "time": 2.4,
              "velocity": 0.6299212598425197,
              "duration": 0.6000000000000001
            },
            {
              "name": "F3",
              "midi": 53,
              "time": 2.4,
              "velocity": 0.5984251968503937,
              "duration": 1.2000000000000002
            },
            {
              "name": "A4",
              "midi": 69,
              "time": 3,
              "velocity": 0.6062992125984252,
              "duration": 0.6000000000000001
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 3.6,
              "velocity": 0.5984251968503937,
              "duration": 1.1999999999999997
            },
            {
              "name": "E3",
              "midi": 52,
              "time": 3.6,
              "velocity": 0.6062992125984252,
              "duration": 1.1999999999999997
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 4.8,
              "velocity": 0.5275590551181102,
              "duration": 0.5999999999999996
            },
            {
              "name": "D3",
              "midi": 50,
              "time": 4.8,
              "velocity": 0.5984251968503937,
              "duration": 1.1999999999999993
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 5.3999999999999995,
              "velocity": 0.5826771653543307,
              "duration": 0.5999999999999996
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 5.999999999999999,
              "velocity": 0.5748031496062992,
              "duration": 0.5999999999999996
            },
            {
              "name": "C3",
              "midi": 48,
              "time": 5.999999999999999,
              "velocity": 0.5905511811023622,
              "duration": 1.1999999999999993
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 6.599999999999999,
              "velocity": 0.5826771653543307,
              "duration": 0.5999999999999996
            },
            {
              "name": "D4",
              "midi": 62,
              "time": 7.199999999999998,
              "velocity": 0.5590551181102362,
              "duration": 0.5999999999999996
            },
            {
              "name": "F3",
              "midi": 53,
              "time": 7.199999999999998,
              "velocity": 0.6377952755905512,
              "duration": 0.5999999999999996
            },
            {
              "name": "D4",
              "midi": 62,
              "time": 7.799999999999998,
              "velocity": 0.6062992125984252,
              "duration": 0.6000000000000005
            },
            {
              "name": "G3",
              "midi": 55,
              "time": 7.799999999999998,
              "velocity": 0.6141732283464567,
              "duration": 0.6000000000000005
            },
            {
              "name": "C4",
              "midi": 60,
              "time": 8.399999999999999,
              "velocity": 0.5354330708661418,
              "duration": 1.1999999999999993
            },
            {
              "name": "E3",
              "midi": 52,
              "time": 8.399999999999999,
              "velocity": 0.5511811023622047,
              "duration": 0.5999999999999996
            },
            {
              "name": "C3",
              "midi": 48,
              "time": 8.999999999999998,
              "velocity": 0.5669291338582677,
              "duration": 0.5999999999999996
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 9.599999999999998,
              "velocity": 0.6850393700787402,
              "duration": 0.5999999999999996
            },
            {
              "name": "E3",
              "midi": 52,
              "time": 9.599999999999998,
              "velocity": 0.6614173228346457,
              "duration": 1.1999999999999993
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 10.199999999999998,
              "velocity": 0.6141732283464567,
              "duration": 0.5999999999999996
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 10.799999999999997,
              "velocity": 0.5354330708661418,
              "duration": 0.5999999999999996
            },
            {
              "name": "F3",
              "midi": 53,
              "time": 10.799999999999997,
              "velocity": 0.5984251968503937,
              "duration": 1.1999999999999993
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 11.399999999999997,
              "velocity": 0.5669291338582677,
              "duration": 0.5999999999999996
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 11.999999999999996,
              "velocity": 0.5826771653543307,
              "duration": 0.5999999999999996
            },
            {
              "name": "G3",
              "midi": 55,
              "time": 11.999999999999996,
              "velocity": 0.6535433070866141,
              "duration": 1.1999999999999993
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 12.599999999999996,
              "velocity": 0.5905511811023622,
              "duration": 0.5999999999999996
            },
            {
              "name": "D4",
              "midi": 62,
              "time": 13.199999999999996,
              "velocity": 0.5826771653543307,
              "duration": 1.1999999999999993
            },
            {
              "name": "G3",
              "midi": 55,
              "time": 13.199999999999996,
              "velocity": 0.5984251968503937,
              "duration": 1.1999999999999993
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 14.399999999999995,
              "velocity": 0.6850393700787402,
              "duration": 0.5999999999999996
            },
            {
              "name": "E3",
              "midi": 52,
              "time": 14.399999999999995,
              "velocity": 0.5590551181102362,
              "duration": 1.1999999999999993
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 14.999999999999995,
              "velocity": 0.6377952755905512,
              "duration": 0.5999999999999996
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 15.599999999999994,
              "velocity": 0.5354330708661418,
              "duration": 0.6000000000000014
            },
            {
              "name": "F3",
              "midi": 53,
              "time": 15.599999999999994,
              "velocity": 0.6062992125984252,
              "duration": 1.2000000000000028
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 16.199999999999996,
              "velocity": 0.5905511811023622,
              "duration": 0.6000000000000014
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 16.799999999999997,
              "velocity": 0.6062992125984252,
              "duration": 0.6000000000000014
            },
            {
              "name": "G3",
              "midi": 55,
              "time": 16.799999999999997,
              "velocity": 0.6299212598425197,
              "duration": 1.2000000000000028
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 17.4,
              "velocity": 0.6062992125984252,
              "duration": 0.6000000000000014
            },
            {
              "name": "D4",
              "midi": 62,
              "time": 18,
              "velocity": 0.5669291338582677,
              "duration": 1.1999999999999993
            },
            {
              "name": "G3",
              "midi": 55,
              "time": 18,
              "velocity": 0.5826771653543307,
              "duration": 1.1999999999999993
            },
            {
              "name": "C4",
              "midi": 60,
              "time": 19.2,
              "velocity": 0.5748031496062992,
              "duration": 0.6000000000000014
            },
            {
              "name": "C3",
              "midi": 48,
              "time": 19.2,
              "velocity": 0.5748031496062992,
              "duration": 1.2000000000000028
            },
            {
              "name": "C4",
              "midi": 60,
              "time": 19.8,
              "velocity": 0.5826771653543307,
              "duration": 0.6000000000000014
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 20.400000000000002,
              "velocity": 0.6692913385826772,
              "duration": 0.6000000000000014
            },
            {
              "name": "E3",
              "midi": 52,
              "time": 20.400000000000002,
              "velocity": 0.6692913385826772,
              "duration": 1.2000000000000028
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 21.000000000000004,
              "velocity": 0.6220472440944882,
              "duration": 0.6000000000000014
            },
            {
              "name": "A4",
              "midi": 69,
              "time": 21.600000000000005,
              "velocity": 0.6220472440944882,
              "duration": 0.6000000000000014
            },
            {
              "name": "F3",
              "midi": 53,
              "time": 21.600000000000005,
              "velocity": 0.6614173228346457,
              "duration": 1.2000000000000028
            },
            {
              "name": "A4",
              "midi": 69,
              "time": 22.200000000000006,
              "velocity": 0.6062992125984252,
              "duration": 0.6000000000000014
            },
            {
              "name": "G4",
              "midi": 67,
              "time": 22.800000000000008,
              "velocity": 0.5433070866141733,
              "duration": 1.1999999999999993
            },
            {
              "name": "E3",
              "midi": 52,
              "time": 22.800000000000008,
              "velocity": 0.5826771653543307,
              "duration": 1.1999999999999993
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 24.000000000000007,
              "velocity": 0.5826771653543307,
              "duration": 0.6000000000000014
            },
            {
              "name": "D3",
              "midi": 50,
              "time": 24.000000000000007,
              "velocity": 0.6220472440944882,
              "duration": 1.2000000000000028
            },
            {
              "name": "F4",
              "midi": 65,
              "time": 24.60000000000001,
              "velocity": 0.6062992125984252,
              "duration": 0.6000000000000014
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 25.20000000000001,
              "velocity": 0.5984251968503937,
              "duration": 0.6000000000000014
            },
            {
              "name": "C3",
              "midi": 48,
              "time": 25.20000000000001,
              "velocity": 0.5826771653543307,
              "duration": 1.2000000000000028
            },
            {
              "name": "E4",
              "midi": 64,
              "time": 25.80000000000001,
              "velocity": 0.5984251968503937,
              "duration": 0.6000000000000014
            },
            {
              "name": "D4",
              "midi": 62,
              "time": 26.400000000000013,
              "velocity": 0.5748031496062992,
              "duration": 0.6000000000000014
            },
            {
              "name": "F3",
              "midi": 53,
              "time": 26.400000000000013,
              "velocity": 0.6299212598425197,
              "duration": 0.6000000000000014
            },
            {
              "name": "D4",
              "midi": 62,
              "time": 27.000000000000014,
              "velocity": 0.6062992125984252,
              "duration": 0.6000000000000014
            },
            {
              "name": "G3",
              "midi": 55,
              "time": 27.000000000000014,
              "velocity": 0.6377952755905512,
              "duration": 0.6000000000000014
            },
            {
              "name": "C4",
              "midi": 60,
              "time": 27.600000000000016,
              "velocity": 0.5590551181102362,
              "duration": 1.1999999999999993
            },
            {
              "name": "C3",
              "midi": 48,
              "time": 27.600000000000016,
              "velocity": 0.5433070866141733,
              "duration": 1.1999999999999993
            }
          ],
          "controlChanges": {
            "7": [
              {
                "number": 7,
                "time": 0,
                "value": 1
              },
              {
                "number": 7,
                "time": 0,
                "value": 1
              }
            ],
            "10": [
              {
                "number": 10,
                "time": 0,
                "value": 0.4015748031496063
              },
              {
                "number": 10,
                "time": 0,
                "value": 0.4015748031496063
              }
            ],
            "64": [
              {
                "number": 64,
                "time": 0,
                "value": 0
              },
              {
                "number": 64,
                "time": 0,
                "value": 0
              }
            ],
            "91": [
              {
                "number": 91,
                "time": 0,
                "value": 0.3779527559055118
              },
              {
                "number": 91,
                "time": 0,
                "value": 0.3779527559055118
              }
            ],
            "121": [
              {
                "number": 121,
                "time": 0,
                "value": 0
              },
              {
                "number": 121,
                "time": 0,
                "value": 0
              }
            ]
          },
          "id": 1,
          "instrumentNumber": 0,
          "instrument": "acoustic grand piano",
          "instrumentFamily": "piano",
          "channelNumber": 0,
          "isPercussion": false
        }
      ]
    }

After getting json file i manually added x and y position in pixels for each notes,
and now i’m trying to draw each notes on canvas .
I’m not sure how to draw each note as new Rectangle Object,i already have have x and y starting point and static width, but height of rectangle needs to be calculated by using velocity ??
All rectangle objects are animated,so they falling down from top to the bottom of the canvas,
Its a mess, please share some links about using json files to draw on canvas.


#2

The JSON file is just a data format. You can turn that into something more consumable like an array or just a plain object, if you don’t like working with JSON directly. Is your question around how to load the JSON file? Or how to draw rectangles once you have a series of X and Y positions? :slight_smile:

Here is an article on how to read JSON: https://www.kirupa.com/html5/all_about_json.htm
Here is an article on drawing rectangles using the canvas: https://www.kirupa.com/html5/drawing_rectangles_squares_canvas.htm

:slight_smile:


#3

I already know basics of drawing on canvas with rectangles and arc,lines,etc, now i’m trying to create falling down miusic notes, based on x and y position from json file.
I will always use json file,coz i’m converting midi files to json.
So i have my piano keys in index.html file created as ul li list, this keys playing correct sounds on keydown events, and have theirs x and y position on screen.
I saved coordinates for piano keys in array, so in my piano_keys array i have key with value C6 , and in json array i have also note with C6 value, i need to draw rectangle directly above correct piano key.
Its complicated, i guess i’m re-crerating synthesia piano player ;/
So i have already x,y and width for rectangles, but what about height?
It should be calculated using duration value, so duration per note = restangle height?