p5.anaglyph

p5.anaglyph is a p5.js library for creating 3D (anaglyph) scenes and images using red/cyan glasses. Uses Dubois anaglyph algorithm & color matrices.

Created by Jenna deBoisblanc.

Examples

NOTE - for red/cyan glasses, the most common method is red on the left eye and blue on the right eye.

• basic demo
• terrain
• tunnel
• text
• 3D .obj model
• anaglyph from stereo left/right images
• p5.js instance mode

Sample Code

In the index.html:
NOTE - there may be issues with caching and jsdelivr depending upon if I've made changes recently; if something breaks, you can find the library p5.anaglyph.min.js in the dist folder.

<script src="https://cdn.statically.io/gh/jdeboi/p5.anaglyph/main/dist/p5.anaglyph.min.js"></script>

In the sketch.js:

let anaglyph;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  
  anaglyph = createAnaglyph(this); 
}

function draw() {
  anaglyph.draw(scene);
}

// this is the logic of the scene
// all usual methods from draw(), but call on the 
// pGraphics parameter pg
function scene(pg) {
  pg.background(0);
  pg.fill(255);
  pg.rotateY(frameCount / 200);
  pg.box(200);
}

Acknowledgments

Code adapted from:

• Camera 3D Processing Library
• three.js anaglyph effect

Other links:

• p5.js & shader tutorial