Articles Hierarchy

Articles Home » Processing » Processing UPDATE

Processing UPDATE

test on Raspberry Pi
i need a new start now full PTZ operation
RPI now works
polynom graph 3.5D or data from CSV file
Klein bottle
SOLarsystem and and planets elliptic orbit

play more:
The PI Game
forum graphic questions
forum button class question
mouse wheel plus plus
mouse over triangle grid + color editor
shooting game ( automatic / no game )
a rolling dice ( points grid )
random rectangles on canvas, no overlap!
processing app settings file
edit grid
IKEDA function
natural frequencies synth
another painter
rotate a PVector in 3D
image split
image from circles: MWPP RGB and pixelation
a 3D measuring table simulation
processing as webserver
network: Websocket v.s. OSC
making lines by click ++
mace grid
p5JS HandPan
p5JS 2 Orbit

Processing 4 beta, JAVA 11 Gradle

use GIT LAB for tutorial and snippets


it has been ?2years? i play processing, time for a update:
-a- download for PC win 7 32bit processing 3.3.7
-b- play with some examples
i like the "RIBBONS" / nice static 3D object with 3D view operation mouse moves

that's not in the internet examples to find
-c- update some tools and examples

test on Raspberry Pi

DEBIAN stretch
Linux version 4.14.52-v7+
Raspberry Pi 3 Model B Rev 1.2
date: Sun 2018-07-22 18:35:19

see here
curl | sudo sh

worked, test: RIBBONS and other

did not work out, but some simple example SINUS OK

a short check in internet suggests that there is a missing support for the graphic chip of RPI,
but other say it works when you compile processing for your RPI hardware.
also i need to check on this.

reading / look youtube / about some historical famous mathematicians i rediscovered my love for the MOEBIUS ?strip?
but the existing examples for processing should not display with the new processing tools.
this is a ?MATLAB? example

i need a new start

actually i am more interested in the OPERATION concept as in the objects to show.
+ a 3D view like google earth OR SketchUp; ahm no, more simple, no MOVE needed, just:
* mouse up/down and button presssed: roll up/down
* mouse left/right and button presssed: roll left/right
* mouse wheel : zoom in/out
the object stay in center, but depending on zoom ( and rotation ) it may overlap button area!
UPDATE from rev 1.4.2 changed my mind
Left Mouse Button TILDE ( rotate / orbit ) mode
and added
Right Mouse Button PAN mode
and Mouse Wheel ZOOM ( no press needed )
NOW have REAL PTZ 3D View.
when mouse button LEFT or RIGHT is pressed,
the operation is not limited to the processing window area!
also it can interact with operation buttons.

+ + a button area to select program options:
here, as first step, can select AXIS or RGB cube ++ added later Moebius.

and also added Klein Bottle, Graph 3.5D, Control P5 and SOLarsystem
+ + + add to the Bottom Button Menu also Right Button Parameter Menu used by some objects.

RPI now works

at first it did not run on RPI, only on my Win 7 PC,
but after i checked/changed RPI for
sudo raspi-config advanced, GL (Full KMS)
my VNC window changed to 720 * 480
and now it runs:

and after reboot with HDMI and restart VNC again even full window works:
( might need do a fix resolution setting again, ha, not possible! in that mode ???)

note: my memory split is on 128

polynom graph 3.5D

as this is fun i like to play with some graph features,
-a- like a polynom ( Y over X ) graph where parameters can be changed "online"
-b- like a 3D function ( Z over X,Y ) graph from function ( or array data like terrain / Topographic map / )
-c- or even my 3.5D graphs i developed already with Processing and Arduino 5 years ago.
well, got something, but looks like confused axis:

that's better.

so, if i want to use a function Z = A * f(X)*f(Y) i need the "A" tunable,
and i found a setpoint input integer here and changed it to a button what ask the question to change the setting.
now try to do same for float input, and F = Float.parseFloat(r); does the trick.

one step further is to make it a float function, what is called with
A = askF("A",A);
but now it seems that the [Cancel] button makes heavy problems,
NullPointerException in the "try" line
tricky: the return on [Cancel] is "null",
but it works to restore the original number value "as result"
if(r == null ){ print(" NULL "); r = str(F); }

try: code

i just start with a simple example function:
Algebraic polynomial equation: Z = A + B * X + C * X*X + D * X*X*X so need the 4 A B C D tunable.

the transfer to the project worked, but i needed to put the text of the function and buttons
into main ( with a if switch )
as these elements are not part of the "rotating/zoomed" object.

so besides that i must include the calculation, i must not forget to RECALCULATE after change parameters:
if (overRect(485, 5, 75, 20)) { print("BUTTON A "); A = askF("A",A); fill_Array(); }

ok, and how to use the "Y" axis in a general ( online parameterized ) way?
just for example i multiply the Z=f(X) with a exp(M*Y)

and now show the CALC as formula and again with parameters.

-note 1- when you call the 3.5D graph it is TOO BIG, pls zoom out (roll mouse wheel away from you) first
and show/rotate ( with left mouse pressed) it for better 3D view,
then start to tune the CALC Parameters
-note 2- when you start all parameters are at 0.0,
when you click the parameter buttons the first "tune" input window might be hidden behind the main window

finally our 3D function needs a 4th dimension ( shown by 3 planes ) like for a variant analysis
i see here 2 options,
-a- a added math function
-b- a split of the existing function to A and B, and show for
N=0 part A
N=1 part B
N=2 A + B
might need a OFFSET for each plane to see it better.
-c- or a combination:
N=0 random noise ( with tunable amplitude "n" )
N=1 org polynom function
N=2 org function + noise ( + optional OFFSET for visibility )

i added some visibility switches to the button menu
+- show AXIS
+- show OFFSET ( for N=2 if n>0 )
+- show N=2 plane ONLY

the actual functionality of nDchart is to calculate (fill) 3 arrays [8,8]:
on start and after change parameter. (fill_Array())

in DRAW loop
these array is used by (fill_Planes())
to make 3 times ( N = 0,1,2 ) "planes"
by adding 8 * beginShape(TRIANGLE_STRIP) each
( that is a old code and has to do that this was the only way to keep the planes transparent )

ok, now i am reading into creating shapes and just call them later in DRAW.
see here and here.and even array of shapes might be possible.
so it would be possible to fill arrays and create (3) shapes ( like offline),
and while draw loop just call that shapes. ( where i hope that reduces cpu load / but could use memory ?how to check?frame count? ) for the 3D rotating/zoom show.

idea is to optimize the code prior to change the arrays from [8,8] to higher resolution

first i experiment about a function to make a shape
and a shape group to add them.

play this

to experiment with the matrix [8,8] and performance i copy above version to the RPI first.
and tested 8*8 and 16*16 and 32*32 and 64*64 all run
but then i see
-a- the axis and its xy plane need to grow with the data planes
-b- at 64*64 the window size and the object size not fit anymore.
so here is the 32*32 with a better axis visibility and new N=2 plane color

ok, you can change the example calculation here OR
do it in a spreadsheet and make a /data/D4.csv file
but more you can use real measurement data in it ( like i did 2013 using a Arduino )
so for compatibility ( and to open that way for you ) i make a new button [CSV]
what loads that data file // and disables all calculations i showed above.
as no way back must restart the program.

Klein bottle

after MOEBIUS the next level is KLEINSCHE FLAECHE or "Klein bottle"

info and how it should look: here and here and here or check google image, also i like this show

but i got stuck at the rendering ( so i asked for help )

today 2.8.2018 i changed from Processing 3.3.7 to 3.4, see done.txt

and i try to dig into the Klein shape loops and see 2 problems:
-a- the inner loop (M) creates NOT closed ?cone sections?
-b- for N > 12 the shape courves back with bigger radius where i actually expect the smaller radius ?bottle neck? should begin.

try again with some tools to adjust Na < N < Nb to see parts of the shape and luckily
got also the idea to check on the formula and ! FIND A TYPO !
now shape looks much more like the examples,
but in the detail it looks like my shape is not closed in both of the ends of the loops,
here also endShape(CLOSE) not help.

changed visibility ( triangle stroke ) and got 3 more small rectangles closed manually,
and stuck again.

so i put the test menu into the main program with a switch:
boolean useKLEINmenu = true; //false; // true;

what might help if i got a idea how to solve that, it is anyhow a good show using like
Na=0, Nb=1, N+ button repeatedly.
closing the rings and closing the shape ends, while these ends are twisted by 180 deg. (Moebius)
is a open point.

and so it is also not easy to identify a position,
i try to pinpoint it by making a "white bullet" at the x/y/z from the array at Nx/Mx.

who follow me here might know that i rarely give up,
+ + so close the cone shapes was easy, just one more loop back to M = 0
+ + close the shape ends was very tricky,
-a- must jump between N = 0 and N = 31
-b- must connect from Ma = 0 on one side to Mb = 16 on the other side
-c- must run UP Ma AND run DOWN Mb
-d- when in section mode (and using [N+] ) not show that "final closing loop"

left is a very small hickup at the start of that additional final closing loop with a
triangle connecting N=30, N=31, N=0 ( at M = 0 ) ( see right photo, mouse pointer )

this time i work on PC so need to recheck on RPI ( still run )

make Klein menu via menu switchable
change start default Klein // no stroke // no menu //
and color change ( red yellow red ) along M loop

now i got the idea that even i have what i wanted, the solution is just the solution for a problem a prior mistake created!
the idea is that the array is one to short, the last ring should end at the same position as the first ring starts, but the problem is not the number of records, it is the step width not cover the full 2PI,
that is what i changed ( after i undo the last "solutions" )
ustep=PI/Ncount; to ustep=PI/(Ncount-1);
vstep=2*PI/Ncount; to vstep=2*PI/(Ncount-1);
makes bigger steps and ends at (2)PI.
so now the rings are closed and
the endshapes touch ( are actually not closed like the tricky ( now disabled ) shape code did )

also i changed Ncount from 32 to 64

and checked on the begin/end ring red color, there was a visible color step
and after change to Ncount 64 not too yellow/orange anymore.

so there is still one ugly thing:
if you play like with Mb = 32 ( see half ring )
and Nb = Na +1 // and use N+ it works,
but if the difference Na Nb is bigger ( like Na=0, Nb =2 )
the end of the first half ring closes to the beginning of the second half ring ..
here the half cut bottle view.


long time ago when i make my first Poor Man Scope with arduino and processing
i used some code from David Konsumer who used the Control P5 library ( reference ) from Andreas Schlegel.
even last update is from 2015 it still runs ( pls see example ControlP5slider2D )
my button menu ( + sub menu ) is manual coding and no need to switch,
but for a slider i would like to use that old library again.
first try a simple sliders

then using the example ControlP5slider2D doc and here
to change the Color mix RED .. PURPLE
and the Transparency of the DUMMY BOX
- - but not see the blue border lines through the transparent box fill.
i exchange the box with a QUADS shape but still same,
the transparency not really work
- - and when you switch by main menu to a other example the 2Dslider stays on
if (showObject == 6) { CP5S2D(); } // see TAB CP5S2D
if (showObject != 6) { if (CP5used) { s.remove(); CP5used=false; } }
with this and the remember that CP5 example was used, and the .remove CP5 controller option
this is more hacked as solved.
+ only generate the BOX shape at start, and change shape fill ONLY if 2Dslider used.

still a good example how to use that 2 Dim slider for a good show.

but a test with the above shapeshifter test code shows that rectangles with border and transparency can be stacked..

so i should try instead of a BOX shape use 6 3D rectangles added to a group shape?? NO
adding 6 shapes without stroke to a
Q0 shape with 12 lines with stroke building the cube stroke as extra object
also no use. So i give you this Q0 shape with 3 "sides" only to show the transparency problem.

possibly a newer lib might be G4P

on RPI do a
curl | sudo sh
use the library manager to load ControlP5

after doing sudo raspi-config // 7 advanced options // A7 GL driver // G1 full KMS ( G2 fake KMS also works) //
still have the problem that i must boot with HDMI connected to later can use VNC.
if use //G3 Legacy Original non-GL desktop driver//
it works on RPI 3B+ but not RPI 3B ( at same update status 4.14.52-v7+ 08.08.2018) ???


i put in a extra BLOG here

and planets elliptic orbit

a extra tool to calc and show position / speed / day acc KEPLER second law


( you need also to install Control P5 library )

The PI Game

see new BLOG


play this code

a other thing is to work with .obj .mtl file and load and show it as shape,
i got the moon free from internet and make
this code

forum graphic question

play with a forum question
SPIRAL1 here

SPIRAL2 here

and a Flying-Terrain version here

forum button class question

make my own button and slider as a class

now for the second time there was a question how to build image buttons,
this new would be a button array with the function of a option list
( means toggle buttons where only one can be selected )
i disabled the on/off text thing,
enabled a image what i made by a internet tool ( as a .png file with transparent background
// and as image just a number for test )
so the status change the background color ( green || blue )
and can see that through the .png file.

also test the command
using the same image as cursor shape,
worked on RPI linux ( but badly about the background )
give a error on windows 7, so i disabled it.

pls understand that the numbers are no text, that are image (.png),
again, while the green blue status is a background color behind the image.


spiral bender

i found some math for a spirograph on line and play with it,
one week later at the forum someone want to make that spiral thing
but not as circle, like around a irregular shape.
i see several ways: can add a array to the spiral xy
and that array can be filled by math / rectangle / triangle /
fourier typerectangle was:
a*sin(f) + b*sin(3f)+ c*sin(5f)...
triangle wave
a*sin(f) - b*sin(2f) + c*sin(3f)

or a CSV file can be read into what allows to make any shape external.
also added many operation features keyboard and mouse


mouse wheel plus plus

test how the mouse wheel can be used with keyboard
and get multi slider function ( NonGUI slider )

code zip
while the GUI concepts like my button ask number even new button / slider class i play with
are much nicer, but getting a number set point via the mousewheel by a one line command
if ( keyPressed && key == 'x' ) e_radiusx += e;
is unbeatable.
SCROLLITIS3 slider move ( Y, X, Rotate )
3 slider object size ( Y, X, Stroke )
1 slider object select list ( default YOUR object + example ellipse/ rectangle/ triangle )
9 slider HSB fill / stroke / background ( using like [b][f][s] hue [B][F][S] sat [Alt][b][f][s] brt )

mouse over triangle grid + color editor

code zip

shooting game ( automatic / no game )

from a forum question,
* to add remove from ArrayList
* use PVector points
* use Vector math for target, move (aim), even speed

code zip

a rolling dice ( points grid )

code zip

random rectangles on canvas, no overlap!


i wanted to learn about a 2 window application, where controls like button, slider, option groups
are in the second ( menu / tune ) window. i got stuck about the handlers but forum help me im minutes here

processing app settings file

processing creates (canvas) windows, but that is not the usual windows program
with [file] and [settings] menu...
unless you use one of the better GUI libs.
still i wanted to test a easy start into that, but also dealing with the file problem:
once you start with files ( in /data/ ) like data- or font- , image- or sound- files
you can distribute your "project" only as zip file, as a start of the pure code ends in errors.
so here using a string-dict ( array ) and reading lines from file / or writing defaults to file
even creating /data/ dir and settings file.
* now even with user login / md5 password
* SCROLLITIS settings editor RGB background, fill, stroke

the SCROLLITIS help window ( on startup and mouse click )

this code

and a 3D version using
* read or generate /data/settings.txt file
* user login ( secure password )
* mousewheel-plus-plus as color editor for bg, fill, stroke ( also stroke Weight )
* mouse and keyboard PTZ for rotation zoom
* optional save settings on exit
start console infoMouseWheel Plus Plus:
colors: RGB: red, GREEN, [Alt]blue
+ key [b],[B],[Alt][b] backg
+ key [f],[F],[Alt][f] fill
+ key [s],[S],[Alt][s] stroke
+ key [w] border strokeWeight
+ key [h] this help
+ + key [l] for login
PTZ info:
key UP DOWN RIGHT LEFT -> rotate // key PAGE UP DOWN -> zoom
mouse LEFT press drag up down right left -> rotate
mouse RIGHT press -> move
mouse WHEEL turn -> zoom

this code

edit grid

this code

but later tested G4P lib, see this code


this code

IKEDA function

see WIKI

changed zoom stroke, here with zoom 30:

this code

actually a multi timer test in p5.js ended up in a little hypno show

natural frequencies synth

forum link
try learn more about Minim library and use it for a sound signal generator
also needed some tools like audio recorder and fft analyze it offline
so that second version includes that tools and data code

actual version natural frequencies code

another painter

processing JAVA paint tool:
* mouse right paint, mouse left erase
* [s] save to file
mouse wheel plus plus functions:
* [r][g][b] paint color 0 .,. 100
* [w] brush size 1..30
now try a p5.js version here

rotate a PVector in 3D

also see: forum

actual: code



image split


image from circles: MWPP RGB and pixelation



code with stresstest

a 3D measuring table simulation

moved to extra article

processing as webserver

not impossible!

test IE, Chrome, Firefox ! see my favicon
code text
code zip

network: Websocket v.s. OSC

example: using Websockets and transfer a JSON record for drawing vertex


example: using OSC and a button lib

but not forget here



update: now can see a simulated bary center with earth and moon moving around,
simulated as with the real values but the fake zooms of this show it was not much visible.
with moon earth distance: 381658 km avg
barycenter: 4638 km from earth center, means it is inside earth radius: 6371km

for the resulting tide wave i have a math problem to add 2 ellipse ( where one is rotating )
in the first versions i do a hack what looks not too bad.
But sure i try to dig into this and come up with:

was not that easy, needed to use different calc for the sun tide,
- one for the ellipse
- one only delta for the add to the moon tide ( without the earth radius )


a processing JAVA project what needs a structure with different screens
( here it was a multi step tutorial but also for a game usable )
i test a class structure like


now added a walker using array - grid - pixel thinking

making lines by click ++

what started from "homework" forum questions grows to a line drawing editor
+ + CSV import export
+ + SVG export
( this is not about edit color stroke ... it is only about array of pvector points...
used to be connected by lines )
keyboard menu:settings: snap [s]: true, sgrid [g]: true, lclose [c]: false, diagp [h]: true, linem [l]: false,
[r] reset [p] print, [f] save SVG, [q] read CSV, [w] write CSV
key [e] edit mode:false if true can use click point and drag and [d] delete [i] insert points


mace grid


new Win 10 PC, Processing 4 beta, JAVA 11, Gradle


use GIT LAB for tutorial and snippets

button to game tutorial
here in the BLOG
snippets overview

actually what i learned for this tutorial i could use again here where i also go deeper into GIT.

p5JS HandPan

and while i am bussy with that p5.js design tool / tutorial for a specific application,
and make a Arduino tutorial here using a learning kit,
i got into something new:
i watched youtube music videos about / hang / handpan / like Malte Marten & Sergio Huerta Pérez - GIOs Handpan
i love the sound, want to play, but know i will never buy that thing because i know my short timed interest...
( still have that good traverse flute here, i never learned to play.. )
so i made it a p5.js sound project
you can call it from a mobile/tablet full mode
but best is to run it inside a KIOSK app ( i used this )

p5JS 2 Orbit

long time not play p5js,
but when i see 14.3.2022 a planet spiro graph
i wanted to try it..
need to dig into astronomy math again

and while i dig and prepare data could see me head scratching

-a- Planet V
-b- in double log plot a solar / circular gravitational system seems pretty linear??