Stolon

title

let json = `{
    "config": {
        "comment": "Cold Dusts is made with été v1.0",
        "synth": {
            "note": 200,
            "type": "sine",
            "gain": 0.5,
            "dur": 0.1,
            "dyn": 0,
            "env": [
                0,
                1,
                0
            ]
        },
        "itv": 3200,
        "exe": null,
        "mode": "rec"
    },
    "patterns": [
        {
            "id": 0,
            "cycle": [
                1073,
                1073
            ],
            "mute": 0,
            "duration": "itv / 1",
            "note": 140,
            "pan": 0,
            "synth": {
                "type": "sine",
                "gain": 0.9,
                "dur": 0.8,
                "dyn": [
                    "note",
                    0.8,
                    1
                ],
                "env": [
                    1,
                    0
                ]
            },
            "beats": [
                {
                    "id": 1,
                    "offset": 50
                }
            ]
        },
        {
            "id": 5,
            "cycle": [
                477,
                590
            ],
            "mute": 0,
            "duration": "itv * 2",
            "note": 330,
            "pan": 0.4,
            "synth": {
                "type": "sine_noise",
                "gain": 0.5,
                "dur": 0.9,
                "dyn": 0,
                "env": [
                    1,
                    1,
                    1,
                    1,
                    0,
                    0.9,
                    0,
                    0.8,
                    0,
                    0.7,
                    0,
                    0.6,
                    0,
                    0.5,
                    0,
                    0.4,
                    0,
                    0.3,
                    0,
                    0.2,
                    0,
                    0.1,
                    0
                ]
            },
            "beats": [
                {
                    "id": 6,
                    "offset": 18
                }
            ]
        },
        {
            "id": 8,
            "cycle": [
                1086,
                1618
            ],
            "mute": 0,
            "duration": "itv / 2",
            "note": 200300240,
            "pan": -0.4,
            "synth": {
                "type": "triangle_square",
                "gain": "sh([0.2])",
                "dur": 0.4,
                "dyn": 0,
                "env": [
                    0.7,
                    1,
                    0.2,
                    0,
                    0,
                    0,
                    0.3,
                    0
                ]
            },
            "beats": [
                {
                    "id": 9,
                    "offset": 50
                }
            ]
        },
        {
            "id": 18,
            "cycle": [
                7148,
                7147
            ],
            "mute": 0,
            "duration": "itv / 16",
            "note": "sh([200,200,200,200,200,300])",
            "pan": "r(-1,1)",
            "synth": {
                "type": "sh([\"sine\",\"sine_noise\",\"triangle\",\"square_sine\",\"sine_sawtooth\"])",
                "gain": "eucl(4,r(4,12),.3,0,$)",
                "dur": "sh([0.04,0.04,0.04,0.3,0.04,0.04,0.04,0.04])",
                "dyn": 0,
                "env": [
                    0,
                    1,
                    0
                ]
            },
            "beats": [
                {
                    "id": 19,
                    "offset": [
                        10,
                        0
                    ]
                }
            ]
        },
        {
            "id": 23,
            "cycle": [
                310,
                614
            ],
            "mute": 0,
            "duration": "itv * 2",
            "note": 1200,
            "pan": -1,
            "synth": {
                "type": "sine",
                "gain": 0.2,
                "dur": 0.04,
                "dyn": 0,
                "env": [
                    1,
                    0
                ]
            },
            "beats": [
                {
                    "id": 24,
                    "offset": 40.12
                },
                {
                    "id": 25,
                    "offset": 43.3
                }
            ]
        },
        {
            "id": 26,
            "cycle": [
                304,
                1608
            ],
            "mute": 0,
            "duration": "itv * 2",
            "note": [
                100,
                94,
                100,
                100,
                100,
                100
            ],
            "pan": 0.2,
            "synth": {
                "type": "sine",
                "gain": 0.8,
                "dur": 0.25,
                "dyn": 0,
                "env": [
                    1,
                    1,
                    1,
                    0
                ]
            },
            "beats": [
                {
                    "id": 36,
                    "offset": 0,
                    "note": 72,
                    "synth": {
                        "dur": 0.7
                    }
                },
                {
                    "id": 28,
                    "offset": 12.2,
                    "synth": {
                        "dur": 0.5
                    }
                },
                {
                    "id": 29,
                    "offset": 46
                },
                {
                    "id": 30,
                    "offset": 49
                },
                {
                    "id": 31,
                    "offset": 52
                },
                {
                    "id": 32,
                    "offset": 56
                }
            ]
        },
        {
            "id": 37,
            "cycle": [
                1,
                0
            ],
            "mute": 0,
            "duration": "itv * 2",
            "note": 1200,
            "pan": "-.7",
            "synth": {
                "type": "noise",
                "gain": 0.5,
                "dur": 0.3,
                "dyn": 0,
                "env": [
                    0,
                    1,
                    0
                ]
            },
            "beats": [
                {
                    "id": 38,
                    "offset": 33.5,
                    "synth": {
                        "dur": 0.4,
                        "env": [
                            0.5,
                            1,
                            0.5
                        ]
                    }
                },
                {
                    "id": 39,
                    "offset": 37
                },
                {
                    "id": 40,
                    "offset": 74,
                    "synth": {
                        "dur": 0.8,
                        "env": [
                            0,
                            0.5,
                            0,
                            0,
                            0.8
                        ]
                    }
                }
            ]
        }
    ]
}`

// create a container element where the JSON tree will be rendered
const container = document.createElement('div');
document.body.appendChild(container)

// recursively create elements to represent the JSON tree
function createTree(json) {
  // create a container element for the current JSON branch
  const branch = document.createElement('div');

// iterate over the keys in the JSON object
  for (const key of Object.keys(json)) {
    // create an element to represent the current key
    const keyElement = document.createElement('span');
    keyElement.innerText = key;

// create an element to represent the current value
    const valueElement = document.createElement('div');

// if the value is an object, recursively create tree elements to represent it
    if (typeof json[key] === 'object') {
      valueElement.appendChild(createTree(json[key]));
    } else {
      // if the value is not an object, create a simple text element to represent it
      valueElement.innerText = json[key];
    }

// add the key and value elements to the branch container
    branch.appendChild(keyElement);
    branch.appendChild(valueElement);
  }

// return the completed branch container
  return branch;
}

// render the JSON tree inside the container element
container.appendChild(createTree(json));

snap save new fork

gallery