How can I make the depth map of text using white lines on a black background in the web browser?

So I found a really cool processing sketch here ( that I would like to recreate in the browser, either using processing.js, p5.js, or some other form that would allow me to do this, but I can’t figure out a way to make it work. Can anyone help me?


Which part of this are you stuck on? What do you have so far?

I’ve been able to render it in the processing desktop application, but I don’t know how to do it using Javascript in the web browser

How you do this depends on what your code contains.

If it does not contain any Java-specific code, use any Java libraries, or use any Processing 3 features, then you can use Processing.js.

Otherwise, you’d have to reimplement your logic in P5.js.

Shameless self-promotion:


The problem I’m having is converting it from Java to JS, and suggestions on the process?

1 Like