ASCII visualization issue

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

“Unicode Letters Test” is using library p5*js while “Unicode Chars Test” is in Pjs.

“Unicode Letters Test”:


“index.html”:

<!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”:

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”:

"""
 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”:

<!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”:

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”:

"""
 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()

3 Likes