Giter VIP home page Giter VIP logo

hyperbolic_canvas's Introduction

hyperbolic_canvas

A lua/love visualization of a tiled hyperbolic plane. You can move around on it and change the color of the tile you're on.

The tiling is infinite, but whenever you change the color of your tile, you also change the color of some "random" tiles far, far away.

For a demo see this and this demo of the langtons-ant branch.

How to use it

  1. Install love
  2. Open love with this directory
  3. Pray that the shader code works on your device
  4. Use arrow keys to move around, press space to change the color, left click to change the pattern, press 1/2/3 to rotate, press 4 to change the tiling parameters.

Alternatively, you can watch a stripped-down version of this project on Shadertoy

How it works

This displays the Poincaré disk model of the hyperbolic plane. There, translations and rotations are Möbius transformations, which can be represented as matrices of complex numbers.

The visualization uses the GPU to compute, for each pixel, the tile that pixes is in, as follows: It starts with the position of the pixel, represented as a complex number. First, it applies a given transformation (that is supposed to represent the position of the viewer) to that position. Then, it repeatedly tries to shift the position by some constant l in various directions (the four cardinal directions for a square tiling, six directions for a hexagonal tiling, and so on). Here, l represents the "distance" from one tile to the next. If the new position is closer to the origin than the old one, the shift succeeds, otherwise we undo it. Eventually, no shifts will succeed, as the position has been shifted into the center tile.

Depending on if the number of shifts that succeeds is even or odd, we can obtain a simple black-and-white coloring. But to use the plane as a canvas, we need to go further: I assign a pseudorandom "tile ID" to each tile.

To compute that "tile ID", we mirror each shift we perform (viewed as a Mobius transformation matrix) by a corresponding matrix in a finite field. We then multiply all the finite field matrices together with a matrix representing the tile that the viewer is on; the result (or at least a hash of its top row) will be the tile ID.

The finite field stuff is tricky since we only have 16 bit integers. We choose some prime p and then do all computations in GF(p^2) (with a modulus polynomial x^2 + 1 to make everything look as much like the complex numbers as possible). We calculate the "finite field version" of the constant l by solving some weird equation using python/sage.

Issues

When writing this, I adapted to all the quirks of the love version of GLSL, as well as to all the quirks of my machine. The result seems to be not particularly portable.

If you know how to write portable GLSL code (or just how to do integer modulo quickly and portably), or you know a framework that is as easy to use as love while resulting in more portable shader code, any hints would be greatly appreciated!

hyperbolic_canvas's People

Contributors

felixbauckholt avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

drbeefsupreme

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.