Creative coding

Vertex Shader Art

three.js

Ett program som körs på grafikkortet består av två funktioner som kallas "shaders"
En "vertex shader" behandlar koordinater
En "fragment shader" fyller i pixlar
Skrivs i GLSL, "GL Shading Language" som är ett språk med komplexa typer anpassade för 3D-grafik
Exekveras upprepade gånger parallellt. Arbetar bara med en enda koordinat eller pixel per anrop, därför behövs ofta inga loopar

En "lekplats" eller "sandlåda" för att snabbt skapa grafik med musik.
Man skriver bara GLSL-koden för en "vertex shader", allt annat är redan på plats
Koden genererar position och färg för en punkt vid varje exekvering
Tryck new "+" för ett slumpmässigt exempel som utgångsläge
Kolla "help" för inputs och outputs, även dessa finns redan på plats och är tillgängliga från koden

Syntaxen liknar C och JavaScript
Komplexa datatyper för olika stora vektorer och matriser
Kompakt kod tack vare att operatorer arbetar direkt med dessa typer, tänk objektorientering och operatoröverlagring.
Exempel för att rotera en punkt med JavaScript:

Och med GLSL:
Använd "Cheat Sheet" som referens

p.xy *= mat2(cos(a), -sin(a), sin(a), cos(a));

var sin = Math.sin(angle),
    cos = Math.cos(angle),
    p = {
        x: p.x * cos - p.y * sin,
        y: p.y * cos + p.x * sin
    };

Points: enskilda punkter, storleken kan variera
Lines: en linje mellan varje par av punkter
Line strip: en linje från varje punkt till nästa
Line loop: Samma som strip men även en linje från sista punkten tillbaka till fösta
Triangles: en triangel mellan varje grupp av tre punkter
Triangle strip: en triangel för varje ny punkt, återanvänder de två senaste punkterna
Triangle fan: en triangel för varje ny punkt, återanvänder startpunkten samt den senaste punkten.