attempting-diffraction/main.js

const diffraction = ["happens when waves -light, water, sound- encounter an obstacle and form a multitude of patterns as they pass through.",
                    "performs inter-connection between things.", 
                    "creates a pattern of differences",
                    "suggests there is no sharp boundary separating things", 
                    "is to think the differences within el medio, el espacio que nos conecta y nos separa simultaneously", 
                    "is about taking responsability for the fact that our practices matter; the world is materialized differently through different practices."]

    let i = Math.floor(Math.random() * 6)

    document.getElementById("diffraction").innerHTML = `<p>⤷ Diffraction ${diffraction[i]} <a href="https://hub.xpub.nl/soupboat/pad/p/camilo_glossary">⤴︎</a></p>`

    document.getElementById("about").onclick = function() {show()};

    function show() {
        let show = document.getElementById("description-show").style.display;
        if (show === "none") {
            document.getElementById("description-show").style.display = "block";
        } 
        else {
            document.getElementById("description-show").style.display = "none";
        }
    }

    document.getElementById("colophon").onclick = function() {show_col()};

    function show_col() {
        let show = document.getElementById("colophon-show").style.display;
        if (show === "none") {
            document.getElementById("colophon-show").style.display = "block";
        } 
        else {
            document.getElementById("colophon-show").style.display = "none";
        }
    }

    document.getElementById("legend").onclick = function() {show_leg()};

    function show_leg() {
        let show = document.getElementById("legend-show").style.display;
        if (show === "none") {
            document.getElementById("legend-show").style.display = "block";
        } 
        else {
            document.getElementById("legend-show").style.display = "none";
        }
    }

    /////// PATHS ////////////


    document.getElementById("permeable-tab").onmouseover = function() {color_p()};


    function color_p(){
        let paths = document.getElementsByClassName("permeable-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "var(--permeable)";
            };
        }

    document.getElementById("permeable-tab").onmouseout = function() {colorout_p()};
    
    function colorout_p(){
        let paths = document.getElementsByClassName("permeable-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "";
            };
        }

    document.getElementById("rumination-tab").onmouseover = function() {color_r()};

    function color_r(){
        let paths = document.getElementsByClassName("rumination-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "var(--rumination)";
            };
        }

    document.getElementById("rumination-tab").onmouseout = function() {colorout_r()};
    
    function colorout_r(){
        let paths = document.getElementsByClassName("rumination-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "";
            };
        }
    
    document.getElementById("tool-tab").onmouseover = function() {color_t()};

    function color_t(){
        let paths = document.getElementsByClassName("tool-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "var(--tool)";
            };
        }

    document.getElementById("tool-tab").onmouseout = function() {colorout_t()};
    
    function colorout_t(){
        let paths = document.getElementsByClassName("tool-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "";
            };
        }

    document.getElementById("questions-tab").onmouseover = function() {color_q()};

    function color_q(){
        let paths = document.getElementsByClassName("questions-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "var(--questions)";
            };
        }

    document.getElementById("questions-tab").onmouseout = function() {colorout_q()};

    function colorout_q(){
        let paths = document.getElementsByClassName("questions-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "";
            };
        }

    document.getElementById("brief-tab").onmouseover = function() {color_b()};

    function color_b(){
        let paths = document.getElementsByClassName("brief-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "var(--brief)";
            };
        }

    document.getElementById("brief-tab").onmouseout = function() {colorout_b()};

    function colorout_b(){
        let paths = document.getElementsByClassName("brief-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "";
            };
        }

    document.getElementById("dear-tab").onmouseover = function() {color_d()};

    function color_d(){
        let paths = document.getElementsByClassName("dear-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "var(--dear)";
            };
        }

    document.getElementById("dear-tab").onmouseout = function() {colorout_d()};

    function colorout_d(){
        let paths = document.getElementsByClassName("dear-p");
        for (i = 0; i < paths.length; i++) {
                paths[i].style.stroke = "";
            };
        }
    

function randompath(){
    let paths_question = document.getElementsByClassName("questions-p");
    let paths_brief = document.getElementsByClassName("brief-p");
    let paths_dear = document.getElementsByClassName("dear-p");
    let paths_permeable = document.getElementsByClassName("permeable-p");
    let paths_rumination = document.getElementsByClassName("rumination-p");
    let paths_tool = document.getElementsByClassName("tool-p");

    let i_p = Math.floor(Math.random() * 3);
    let i_q = Math.floor(Math.random() * 5);
    let i_d = Math.floor(Math.random() * 6);
    let i_b = Math.floor(Math.random() * 24);
    let i_r = Math.floor(Math.random() * 14);
    let i_t = Math.floor(Math.random() * 132);

    paths_question[i_q].style.stroke ="var(--questions)";
    paths_dear[i_q].style.stroke ="var(--dear)";
    paths_brief[i_b].style.stroke = "var(--brief)";
    paths_permeable[i_p].style.stroke = "var(--permeable)";
    paths_rumination[i_r].style.stroke = "var(--rumination)";
    paths_tool[i_t].style.stroke = "var(--tool)";
}