Espace projectif

Un exemple qui boucle le long de quatre directions (horizontal, vertical, et deux diagonales) au sein d'un conteneur, en utilisant deux boucles imbriquées.

by defeo

HTML

<div id="canvas">Click</div>

CSS

#canvas {
    margin: auto;
    position: relative;
    width: 400px;
    height: 200px;
    text-align: center;
    padding-top: 200px;
    border: solid thin black;
}
span {
    width: 2px;
    height: 2px;
    background-color: black;
}

JavaScript

var $ = document.querySelector.bind(document);

$('#canvas').onclick = function (e) {
    // Ces deux valeurs donnent la distance du click
    // par rapport à la bordure du div
    console.log(e.pageX - this.offsetLeft,
                e.pageY - this.offsetTop);
    // On vide le div
    this.innerHTML = '';
    // Les quatre directions à parcourir (en coordonnées projectives)
    var dir = { 'horizontal': [1, 0],
                'diagonal': [1, 1],
                'vertical': [0, 1],
                'antidiagonal': [-1, 1] };
    // On boucle sur chaque direction
    for (var d in dir) {
        // Pour chaque direction, on boucle sur une longueur double
        // par rapport au conteneur
        for (var i = -99; i < 100; i++) {
            // Les coordonnées du prochain point
            var x = e.pageX - this.offsetLeft + 4 * i * dir[d][0],
                y = e.pageY - this.offsetTop + 4 * i * dir[d][1];
            // Si le point est à l'intérieur du conteneur,
            // on l'ajoute au div
            if (x > 0 && x < 400 && y > 0 && y < 400) {
                var dot = document.createElement('span');
                dot.style.position = 'absolute';
                dot.style.left = x + 'px';
                dot.style.top = y + 'px';
                this.appendChild(dot);
            }
        }
    }
}