jtremesay.org


Images générés par ordinateur

Quelques expérimentations avec la création d'images par ordinateur.

Triangle de Sierpinski

Ici, un triangle de Sierpinski généré dans une image SVG avec du vanilla typescript.

function create_triangles(deep: number) {
    if (deep == 0) {
        const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
        path.setAttribute("d", `M 0.5,0L${0.5 - Math.sin(Math.PI / 3) / 2},0.75 ${0.5 + Math.sin(Math.PI / 3) / 2},0.75Z`)
        path.setAttribute("fill", "yellow")
        path.classList.add("triangle")
        return path
    }

    const g = document.createElementNS("http://www.w3.org/2000/svg", "g")
    g.classList.add("triangle")

    const triangle_a = create_triangles(deep - 1)
    triangle_a.setAttribute("transform", `scale(0.5, 0.5) translate(0.5, 0)`)
    g.appendChild(triangle_a)

    const triangle_b = create_triangles(deep - 1)
    triangle_b.setAttribute("transform", `scale(0.5, 0.5) translate(${0.5 - Math.sin(Math.PI / 3) / 2}, 0.75)`)
    g.appendChild(triangle_b)

    const triangle_c = create_triangles(deep - 1)
    triangle_c.setAttribute("transform", `scale(0.5, 0.5) translate(${0.5 + Math.sin(Math.PI / 3) / 2}, 0.75)`)
    g.appendChild(triangle_c)

    return g
}

function sierpinski(svg: SVGElement) {
    const input = document.getElementById(svg.dataset.sierpinskiInput ?? "sierpinski-input") as HTMLInputElement
    if (input !== null) {
        input.addEventListener("input", (event) => {
            svg.querySelectorAll(".triangle").forEach((triangles) => triangles.remove())
            svg.appendChild(create_triangles(parseInt((event.target as HTMLInputElement).value)))
        })
        svg.appendChild(create_triangles(parseInt(input.value)))
    } else {
        svg.appendChild(create_triangles(1))
    }
}

document.querySelectorAll("svg.sierpinski").forEach((svg) => sierpinski(svg as SVGElement))