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 (https://www.flickr.com/photos/jegb70/2218491686) 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?

Thanks!

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:

2 Likes

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

  • That sketch on Flickr got some PDF code in it.
  • You should 1st clean up that sketch from any code that isn’t directly related to display the graph, such as that PDF part.
  • Make sure the sketch uses only the basic ProcessingJS API from here: Processingjs.org/reference/
  • Further instructions below:
1 Like