Processing ( JS )
Posted by kll on September 18 2025 09:39:08

processing

Extended Blog

i long time not play
* processing
* p5.js
and also stopped there forum work after problems with 'forum moderators' years ago

but now i see
p5.js V2.x is in 'beta'
so i want to revisit it.
p5js.org
and has its own reference

possibly most known for its use by artists

processing

( as java desktop app or HTML embedded JS canvas )
is special for the graphic capabilities, but also sound and photo tools are strong.

here some links to my earlier work:
processing TUTORIAL
electrical engineering tool
play my HandPan emulation

so first i try p5.js version 2.0.5 in the online editor
and using my MOD from a very old code from Daniel Shiffman
p5v2_recursive_tree


pls . use mouse X and Y for animation

now above electric engineering example already shows that
i want use it not for just make a nice graphic ( a canvas in an empty html )
* i want it interactive ( mouse movement ) and also use parameter input from html input fields
* use the HTML also for better / dynamic page info like the printed electric calculations ( and the optional [help] texts included )


step 1


start a new online p5.js example using version 2.0.5
and add some color and text to the canvas

code

step 2


edit the index.html using a responsible flex-box design ( i get from w3schools )

code
filled some HTML template defaults with example data,
but you can easily adapt it.
the main trick was to position the p5.js canvas in the 'main' HTML DIV via a 'id'
short example

step 3


now work on the p5.js sketch.js
to make a 3D view ( using orbitControl )

code

step 4


create 3 input fields for X Y Z values
see DOM_code.js ( incl. update functions on change )
and use that to draw objects.


so here i have still the problem to position the input fields on the right place in the html document...
! i used new style of input fields, created in JS code instead in HTML
// if i can not find a way need to go back to old style

code


step 5


ok change back (delete ) DOM code to
old style html input fields, now positioned in HTML
and calling a JS function on change ( much more easy as the recent DOM coding )



code

step 6


now as the code is working we can download it ( from the online editor )
and copy it into our html test directory on PC desktop ( double click on file index.html )
or deploy it to the RPI3 nginx web-server

note: it comes as a ZIP including the big p5.js lib but that is actually unused
as it is called by index.html from https://cdn.jsdelivr.net/npm/p5@2.0.5/lib/p5.js anyhow
so that file could be deleted.

step 7


changes in V2
the file preload function is depricated now use
async await

here a example load data from JSON file

code

step 8


try a 'manual'

sankey diagram


from JSON data
that curved path try by new version of bezierVertex ( function inside beginShape() endShape() )



code