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

**URL:** <https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617>\
**Category:** Coding Questions\
**Created:** [September 17, 2018, 10:14pm UTC](https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617 "2018-09-17T22:14:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![seppe](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@seppe](https://discourse.processing.org/u/seppe)\
**Post date:** [September 17, 2018, 10:14pm UTC](https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617/1 "2018-09-17T22:14:56Z")

</div>

So I found a really cool processing sketch here ([https://www.flickr.com/photos/jegb70/2218491686](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!

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [September 17, 2018, 10:19pm UTC](https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617/2 "2018-09-17T22:19:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![seppe](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@seppe](https://discourse.processing.org/u/seppe)\
**Post date:** [September 17, 2018, 10:24pm UTC](https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617/3 "2018-09-17T22:24:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [September 18, 2018, 12:08am UTC](https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617/4 "2018-09-18T00:08:07Z")

</div>

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:

> **[Processing.js](https://happycoding.io/tutorials/processing/processing-js)**
>
> Embed your sketch in a webpage.

> **[Which Processing?](https://happycoding.io/tutorials/p5js/which-processing)**
>
> Which Processing should I use? What's the difference between Processing, Processing.js, and P5.js?

---

<div class="post-metadata">

**Author:** ![seppe](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@seppe](https://discourse.processing.org/u/seppe)\
**Post date:** [September 18, 2018, 3:20am UTC](https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617/5 "2018-09-18T03:20:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 18, 2018, 4:14am UTC](https://discourse.processing.org/t/how-can-i-make-the-depth-map-of-text-using-white-lines-on-a-black-background-in-the-web-browser/3617/6 "2018-09-18T04:14:37Z")

</div>

- 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/](http://Processingjs.org/reference/)
- Further instructions below:

> [@Can i import my stuff into wallpaper engine?](https://discourse.processing.org/t/can-i-import-my-stuff-into-wallpaper-engine/153):
>
> \*\*Welcome slight_smile \*\* My name is Luc(16) and last week I installed processing. the past week I have been making quite some stuff with processing already. I showed what I made to a couple of friends and asked me if I would be so kind to get the application running in [wallpaper engine](https://store.steampowered.com/app/431960/Wallpaper_Engine/). processing is able to make .exe files as most of you may already know. however, when I try to open up the .exe file in wallpaper engine it just opens the application instead of setting it as background. Does …