# ASCII visualization issue

**URL:** <https://discourse.processing.org/t/ascii-visualization-issue/42041>\
**Category:** Processing.py\
**Created:** [May 20, 2023, 5:31pm UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041 "2023-05-20T17:31:40Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rrnn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rrnn/32/18396_2.png) [@rrnn](https://discourse.processing.org/u/rrnn)\
**Post date:** [May 20, 2023, 5:31pm UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/1 "2023-05-20T17:31:40Z")

</div>

Hello!  
I’m trying to draw with some ASCII characters (like ░▒▓) on a Mac with Processing.py  
but unfortunately when I hit play they are not displaying correctly as you can see from the screenshot here

 ![Schermata 2023-05-20 alle 19.27.12](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/d/1dde4095892bdacc8e16eb010f61aacd011d5545.png)

What am I missing? Should I install something on my machine?  
Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [May 21, 2023, 3:17am UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/2 "2023-05-21T03:17:00Z")

</div>

Cheers @rrnn !

Please show us your code.

I’m afraid ’ ░▒▓’ are not ASCII chars, check this [ASCII table at wikipedia](https://en.wikipedia.org/wiki/ASCII#/media/File:USASCII_code_chart.png), I think they are Unicode. So, you might need to find a font that has those glyphs on the Mac.

Also, remember Processing 3.5.4 with Python mode (doesn’t work well on Processing 4) are using a Python 2.7 interpreter, so you’ll need `u` before literal strings for unicode, like this: `unicode_chars = u"░▒▓"`

Here on Linux, using Source Code Pro, it worked for me.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/1/215e62ae69bbbf0a8a9294d1a269fbfd14174b7c.png)

---

<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:** [May 21, 2023, 3:48am UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/3 "2023-05-21T03:48:18Z")

</div>

> [@villares](#):
>
> , so you’ll need `u` before literal strings for unicode, like this: `unicode_chars = u"░▒▓"`

More sketch examples of UNICODE chars in Python Mode: 🐍

```auto
"""
 Unicode Letters Test (v1.0.1)
 GoToLoop (2018/Apr/01)

 Forum.Processing.org/two/discussion/27619/
 drawing-characters-and-symbols#Item_3

 Discourse.Processing.org/t/ascii-visualization-issue/42041/3

 Studio.ProcessingTogether.com/sp/pad/export/ro.9hlrt8LyDd9uA
"""

FONT_TYPE, FONT_SIZE = 'Roman', 24
FG, BG = 0xffFFFF00, 0xff0000FF

def setup():
    size(600, 200)
    noLoop()

    fill(FG)
    textAlign(CENTER, CENTER)
    textFont(createFont(FONT_TYPE, FONT_SIZE, True))

def draw():
    background(BG)

    text(u'διχθαδίας κῆρας φερέμεν θανάτοιο τέλος δέ.\n' +
    u'Бу́ря мгло́ю не́бо кро́ет, Ви́хри сне́жные крутя́;\n' + 
    u'富士の風や扇にのせて江戸土産\n' + u'Ako sa voláš', width >> 1, height >> 1)

```

```auto
"""
 Unicode Chars Test (v1.0.1)
 GoToLoop (2018/Apr/01)

 Forum.Processing.org/two/discussion/27619/
 drawing-characters-and-symbols#Item_6

 Discourse.Processing.org/t/ascii-visualization-issue/42041/3
"""

FONT_TYPE, FONT_SIZE = 'Roman', 0100
FG, BG = 0xffFFFF00, 0xff008000

GLYPHS = u'■□▢▲△▼▽◆○●Δʊ'
GLY_LEN = len(GLYPHS)

def setup():
    size(150, 150)
    noLoop()

    fill(FG)
    textAlign(CENTER, CENTER)
    textFont(createFont(FONT_TYPE, FONT_SIZE, True))

def draw():
    background(BG)
    text(GLYPHS[int(random(GLY_LEN))], width >> 1, height >> 1)

def keyPressed(): redraw()
def mousePressed(): this.keyPressed()

```

---

<div class="post-metadata">

**Author:** ![rrnn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rrnn/32/18396_2.png) [@rrnn](https://discourse.processing.org/u/rrnn)\
**Post date:** [May 21, 2023, 6:53am UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/4 "2023-05-21T06:53:46Z")

</div>

hey both @villares @GoToLoop thanks for the help, I haven’t solved yet but you put me in the right direction to understand it 🙂

> Also, remember Processing 3.5.4 with Python mode (doesn’t work well on Processing 4) are using a Python 2.7 interpreter,

is then better to use the Java or js version?

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [May 21, 2023, 1:08pm UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/5 "2023-05-21T13:08:10Z")

</div>

If you’d like to code in Python, have a look at [py5](https://py5coding.org/). It fills a similar role as Processing.py and may be nicer to use at the moment.

---

<div class="post-metadata">

**Author:** ![rrnn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rrnn/32/18396_2.png) [@rrnn](https://discourse.processing.org/u/rrnn)\
**Post date:** [May 21, 2023, 1:18pm UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/6 "2023-05-21T13:18:11Z")

</div>

Thanks, checking it!

---

<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:** [May 21, 2023, 3:21pm UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/7 "2023-05-21T15:21:14Z")

</div>

There’s also [PyScript](https://pyscript.net/), which allows us to code in Python on the web, using both Python & JavaScript libraries, such as [p5\*js](https://p5js.org/reference/), [q5#js](https://q5xjs.netlify.app/) and even [Pjs](https://gotoloop.github.io/processing-js.github.io/reference/):

> [@Converting coding challenge 'Self-avoiding walk backtracing' from p5.js to Processing (Java)](https://discourse.processing.org/t/converting-coding-challenge-self-avoiding-walk-backtracing-from-p5-js-to-processing-java/35047/21):
>
> Python is now a full browser client language w/ PyScript: So again I couldn’t resist converting my previous RapydScript sketch “Self Avoiding Walk II” to PyScript. I’ve also added Python type hints to the whole code: All 3 JS Processing flavors run on PyScript just like CoffeeScript & RapydScript previous versions: You can [click here](https://api.glitch.com/project/download/?authorization=3d2d3e71-2277-421f-9d6a-38d0f41b0522&projectId=3dc3a6ae-9818-441a-8f7e-b1d50e7199c3) to download the full sketch so you can edit & run it somewhere else. And go to the link below to view it fullscreen: [https://Self-Avoiding-Walk-II-PyScrip…](https://Self-Avoiding-Walk-II-PyScript.Glitch.me/)

---

<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:** [May 22, 2023, 2:19am UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/8 "2023-05-22T02:19:16Z")

</div>

I almost forgot, @mcintyre has a [Pyodide](https://pyodide.org/) addon package for [p5\*js](https://p5js.org) + PyScript named [proceso](https://proceso.cc):

> [@Proceso: A Python package for creative coding on the web](https://discourse.processing.org/t/proceso-a-python-package-for-creative-coding-on-the-web/41895):
>
> Hello! I started tinkering with p5.js and [PyScript](https://pyscript.net) last week and wound up creating a new sketchbook for the web called [proceso](https://github.com/nickmcintyre/proceso) (“process” in Spanish). It’s heavily inspired by [py5](https://py5coding.org) and aims to integrate p5.js into the Python ecosystem. Many thanks to @villares and @hx2A for their help in getting started! Here’s an example of how to create a “static sketch” without animation or interaction: index.html \<!DOCTYPE html\> \<html lang="en-us"\> \<head\> \<title\>Simple Shapes\</title\> \<meta charse…

It’s an excellent option for coding in [p5\*js](https://p5js.org) using a pythonic syntax.

But we can always opt to just use [PyScript](https://pyscript.net) directly, especially if we prefer other Processing flavors such as [Pjs](https://gotoloop.github.io/processing-js.github.io), [q5#js](https://q5xjs.netlify.app) and its fork [q5\*js](https://github.com/quinton-ashley/q5.js).

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [May 22, 2023, 12:41pm UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/9 "2023-05-22T12:41:10Z")

</div>

Thanks @GoToLoop! I need a couple of weeks to complete proceso’s documentation, but the package works well today. I’ll learn a lot by teaching with it in my “Data Science in the Garden” class this summer.

@rrnn here’s a quick [sketch with your original glyphs](https://pyscript.com/view/4b2d42a1-0e0c-430f-8b20-4b2c7ff0dc3e/c4b922de-7b99-4929-b281-31f6f5957248/latest/) running on [PyScript](https://pyscript.com). Would love your feedback if you have some time to tinker.

---

<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:** [May 22, 2023, 3:38pm UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/10 "2023-05-22T15:38:32Z")

</div>

> [@mcintyre](#):
>
> Would love your feedback if you have some time to tinker.

Just made some [small coding style changes](https://PyScript.com/view/37e29c80-c433-4dca-a8bc-4b7207b089a8/fd5c6e94-a7f3-424d-9be1-d43eb1859386/latest/) to match my preferences: 🫣

* * *

## index.html:

```auto
<!DOCTYPE html>

<meta charset=utf-8>

<link rel=stylesheet href=//PyScript.net/latest/pyscript.css>
<script defer src=//PyScript.net/latest/pyscript.js></script>

<link rel=stylesheet href=p5.css>
<script defer src=//cdn.JsDelivr.net/npm/p5></script>

<py-config src=pyscript.toml></py-config>
<py-script defer src=sketch.py></py-script>

```

* * *

## pyscript.toml:

```auto
name = 'ASCII Visualization'
version = '1.0.2'
description = 'https://Discourse.Processing.org/t/ascii-visualization-issue/42041/10'
url = 'https://PyScript.com/view/37e29c80-c433-4dca-a8bc-4b7207b089a8/fd5c6e94-a7f3-424d-9be1-d43eb1859386/latest'
packages = ['proceso']

```

* * *

## p5.css:

```auto
html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

```

* * *

## sketch.py:

```auto
"""
 Response to rrnn's issue:
 Discourse.Processing.org/t/ascii-visualization-issue/42041
 2023/May/22
"""

from proceso import Sketch

p = Sketch()
p.describe('big glyphs')

GLYPHS = '░▒▓'

def setup():
    p.create_canvas(200, 300)
    p.frame_rate(12)

    p.text_size(0o300)
    p.text_align(p.CENTER, p.CENTER)

def draw():
    p.background(0o350)
    char = GLYPHS[p.frame_count % len(GLYPHS)]
    p.text(char, p.width >> 1, p.height >> 1)

p.run_sketch(setup = setup, draw = draw)

```

* * *

---

<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:** [May 27, 2023, 12:33am UTC](https://discourse.processing.org/t/ascii-visualization-issue/42041/11 "2023-05-27T00:33:00Z")

</div>

Just converted my 2 Python Mode sketches to run on just PyScript w/o any packages.

[“Unicode Letters Test”](https://PyScript.com/view/37e29c80-c433-4dca-a8bc-4b7207b089a8/f540a5ff-ca53-4e5a-b149-a61df207cd01/latest) is using library p5\*js while [“Unicode Chars Test”](https://PyScript.com/view/37e29c80-c433-4dca-a8bc-4b7207b089a8/9c2d93cb-4168-45d9-a58e-9aea24ce8f40/latest) is in Pjs.

> “Unicode Letters Test”:

* * *

## “index.html”:

```auto
<!DOCTYPE html>

<meta charset=utf-8>

<link rel=stylesheet href=//PyScript.net/latest/pyscript.css>
<script defer src=//PyScript.net/latest/pyscript.js></script>

<script defer src=//cdn.JsDelivr.net/npm/p5></script>

<py-config defer src=pyscript.toml></py-config>
<py-script defer src=sketch.py></py-script>

```

* * *

## “pyscript.toml”:

```auto
name = 'Unicode Letters Test'
version = '1.0.0'
author_name = 'GoToLoop'
license = 'Unlicense'
description = 'https://Discourse.Processing.org/t/ascii-visualization-issue/42041/11'
url = 'https://PyScript.com/view/37e29c80-c433-4dca-a8bc-4b7207b089a8/f540a5ff-ca53-4e5a-b149-a61df207cd01/latest'

```

* * *

## “sketch.py”:

```auto
"""
 Unicode Letters Test (v1.0.0) [p5*js]
 GoToLoop (2023/May/26)

 Discourse.Processing.org/t/ascii-visualization-issue/42041/11

 Forum.Processing.org/two/discussion/27619/
 drawing-characters-and-symbols#Item_3

 Studio.ProcessingTogether.com/sp/pad/export/ro.9hlrt8LyDd9uA
"""

from js import p5
from types import MethodType

FONT_TYPE, FONT_SIZE = 'Verdana', 24
FG, BG = 'yellow', 'blue'

def sketch(p):
    p.setup = MethodType(setup, p)
    p.draw = MethodType(draw, p)

def setup(p):
    p.createCanvas(600, 200)
    p.fill(FG).noLoop()
    p.textFont(FONT_TYPE, FONT_SIZE).textAlign(p.CENTER, p.CENTER)

    global bg
    bg = p.color(BG)

def draw(p):
    p.background(bg).text(
      'διχθαδίας κῆρας φερέμεν θανάτοιο τέλος δέ.\n' +
      'Бу́ря мгло́ю не́бо кро́ет, Ви́хри сне́жные крутя́;\n' +
      '富士の風や扇にのせて江戸土産\n' + 'Ako sa voláš',
      p.width >> 1, p.height >> 1
    )

p5.new(sketch)

```

* * *

> “Unicode Chars Test”

## “index.html”:

```auto
<!DOCTYPE html>

<meta charset=utf-8>

<link rel=stylesheet href=//PyScript.net/latest/pyscript.css>
<script defer src=//PyScript.net/latest/pyscript.js></script>

<script defer src=//Unpkg.com/processing-js></script>

<py-config defer src=pyscript.toml></py-config>
<py-script defer src=sketch.py></py-script>

```

* * *

## “pyscript.toml”:

```auto
name = 'Unicode Chars Test [pjs]'
version = '1.0.0'
author_name = 'GoToLoop'
license = 'Unlicense'
description = 'https://Discourse.Processing.org/t/ascii-visualization-issue/42041/11'
url = 'https://PyScript.com/view/37e29c80-c433-4dca-a8bc-4b7207b089a8/9c2d93cb-4168-45d9-a58e-9aea24ce8f40/latest'

```

* * *

## “sketch.py”:

```auto
"""
 Unicode Chars Test (v1.0.0) [pjs]
 GoToLoop (2023/May/26)

 Discourse.Processing.org/t/ascii-visualization-issue/42041/11

 Forum.Processing.org/two/discussion/27619/
 drawing-characters-and-symbols#Item_6
"""

from js import Processing, document
from types import MethodType

FONT_TYPE, FONT_SIZE = 'Verdana', 0o100
FG, BG = 0xffFFFF00, 0xff008000

GLYPHS = '■□▢▲△▼▽◆○●Δʊ'
GLY_LEN = len(GLYPHS)

INSTANCES = range(3)

def instantiatePjs():
    canvas = document.createElement('canvas')
    document.body.appendChild(canvas)

    Processing.new(canvas, sketch)

def sketch(p):
    p.setup = MethodType(setup, p)
    p.draw = MethodType(draw, p)

    p.keyPressed = MethodType(keyPressed, p)
    p.mousePressed = MethodType(mousePressed, p)

def setup(p):
    p.size(150, 150)
    p.noLoop()

    p.fill(FG)
    p.textFont(FONT_TYPE, FONT_SIZE)
    p.textAlign(p.CENTER, p.CENTER)

def draw(p):
    p.background(BG)

    char = GLYPHS[int(p.random(GLY_LEN))]
    x, y = p.width >> 1, p.height >> 1

    p.text(char, x, y)

def keyPressed(p): p.redraw()
def mousePressed(p): keyPressed(p) # p.keyPressed()

for _ in INSTANCES: instantiatePjs()

```

* * *