Generative Art with JS

Sine Waves

            const x = cx + r * Math.cos(a)
            const y = cy + r * Math.sin(a)
        

            const y = Math.sin(x)
        

            const colorIndex = Math.cos(x + time)
                + Math.sin(y + time)
        

            const y = Math.sin(time / K)
        

            const y1 = Math.sin(time + shift * 1)
            const y2 = Math.sin(time + shift * 2)
            const y3 = Math.sin(time + shift * 3)
        

Interpolation

            const [left, top] = toIsometric(x, y)
        

            const toIsometric = (x, y) => [x, y]
             
            const [left, top] = toIsometric(x, y)
            const levels = maxTop * (Math.sin(time) + 1) / 2
        

Some Basics

• Numbers should be normalized to 0-1
• Learn several functions
• Add scroll event handler

            const lerp = (x, y, a) => x * (1 - a) + y * a
             
            lerp(20, 80, 0)   // 20
            lerp(20, 80, 1)   // 80
            lerp(20, 80, 0.5) // 50
        

            const clamp = (a, min = 0, max = 1) => 
                Math.min(max, Math.max(min, a))
             
            clamp(24, 20, 30) // 24
            clamp(12, 20, 30) // 20
            clamp(32, 20, 30) // 30
        

            const invlerp = (x, y, a) => clamp((a - x) / (y - x))
             
            invlerp(50, 100, 75)  // 0.5
            invlerp(50, 100, 25)  // 0
            invlerp(50, 100, 125) // 1
        

            const progress = invlerp(
                screenTop, 
                screenBottom, 
                window.scrollY
            )
        

Distribution

Some Basics

• Grids
• Nested grids (trees)
• Spatial partitioning
• Quadtree
• Octree

Noise

            const g = Math.random()
            const color = `rgb(${g * 255}, ${g * 255}, ${g * 255})`
        

            function pseudoRandom(seed) {
                return Math.sin(seed) * 10000
                  - Math.floor(Math.sin(seed) * 10000)
            }
            function noise(x, y) {
                const seed = x * 137 + y * 149
                return pseudoRandom(seed) % 1
            }
        

Some Basics

• Perlin noise
• Simplex noise

Free Artists

            x += Math.sin(Math.random()) * distance
            y += Math.sin(Math.random()) * distance
        

Some Basics

• Random walkers
• Cellular automata

Key takeaways