p5.js, animatie met 12 rechthoeken  

 

Processing                                 terug naar de startpagina

Processing is een opensource java software project tbv kunstenaars, ontwerpers en natuurlijk iedereen die digitale schetsen wil maken.
Ga naar de website van processing. Je kan hier het programma of ide (Integrated development environment) downloaden.
Processing installeren in Ubuntu
1) download processing plaats deze in de persoonlijke map en unzip processing.

2) Open het terminal venster in de processsing map 3) voer het install script uit ./install.sh

Processing is eigenlijk een uitbreiding van Java met een bibliotheek waarmee je op een simpele manier objecten kan creeren.
In versie 3 kan je verschillende modi selecteren oa de p5.js modus, deze modus maakt processing geschikt om java  applets te maken.
(Zie de p5.js website)  zie het p5.js menu op deze website.
Zie de introfilm van Casey Reas op youtube "how to draw with code".

Zie ook dit artikel over  het waarom van processing, p5.js en ml5.js

Je kan in processing een fors aantal libs installeren. Interressant is toxic libs met spannende creaties die op vimeo zijn gepubliceerd.
Toxic lib is een echte java lib die door Daniel Shiffman omgezet is naar een lib voor processing. Zie  toxiclibs javadoc
 

open processing

Ga ook naar de open processing website met meer dan 668618 geuploaden projecten.
Iedereen kan een account aanmaken en zo zijn processing creaties aan de wereld laten zien.
Van deze creaties kan je de code veranderen, copieeren en in je eigen processing ide plakken.
Zo kan je het effect bestuderen van veranderingen die je in de code aanbreng.
Voorbeeld: boards in line, deze code werkt goed in de processing ide.
Enkele interessante open processing kanalen:   Raven Kwok  ,  Jason Labbe  met 145 schetsen waarvan enkele schetsen met tutorials en de Japanner Sayama met 280 schetsen.
Het open processing kanaal van Richard Bourne bevat 4787 schetsen, copieen van verschillende kunstenaars , gecopeerde schetsen worden "forks" genoemd.
Je kan Richard een verzamelaar van open source Digital art noemen.
Zie ook het kanaal van Okazz met animaties die binnen bepaalde grenzen at random veranderen na verversen van de pagina
 
Processing tutorials
Op youtube staan natuurlijk veel tutorials, goed te volgen zijn de tutorials van Daniel Shiffman.
Hij heeft verschillende video series gemaakt, oa beginners tutorials met 69 video´s, voor mensen zonder programmeer ervaring.
Voor de gevorderden heeft hij het boek the nature of code  geschreven.
Hij heeft inmiddels 84 tutorial video´s over dit boek op youtube gezet.
Je kan de in het boek beschreven code als voorbeelden in de processing ide installeren en uitproberen. 
Ga ook eens naar fun programming een site met veel korte en grappige schetsen, erg leerzaam omdat de code goed is te begrijpen
 
 Have processing fun                 Ga ook naar mijn open processing schetsen
 
 Groetjes Jos Winnubst
 
Enkele voorbeelden van mijn processing creaties
 

Aliens         Twee soorten Aliens met een blauwe zon          rendering lijnen, cirkels en vierkanten

ster en veelhoek vormen         bewegende lijnen en cirkels        zie ook "tekenen met code"

 

Processing schetsen op je website zetten

Om processing pde schetsen op het internet te zetten moet de schets gebruik maken van het javascript processing.js

De pde code draait dan direct op het internet je hoef de code niet om te zetten. Zie github voor het script met voorbeelden.
processing.js is echter verouderd en werkt niet altijd in versie 3 van de processing ide.
Processing.js wordt niet ondersteund door de processing foundation.
 
processing.js is overgenomen door p5.js wat nog volop in ontwikkeling is. ga ook naar mijn p5.js rubriek
 
index.html script voor processing.js
 
 

<!DOCTYPE html> 
  <html> 
  <head> 
      <title>dit is een processing.js schets</title> 
      <script src="../processing.js"></script> 
  </head> 
  <body> 
     <canvas data-processing-sources="schets.pde"></canvas> 
 </body> 
 </html>
 

curven:  "Bezier Chaos"

curven:  "Bezier Chaos"

 

gouden vormen: tien driehoeken rond vijfhoek

gouden vormen: tien driehoeken rond vijfhoek

 

 

tekenen met code, class: "Text" "Waar komt de wind vandaan" ?

tekenen met code 

 

pentominos: gemaakt met de class "Pentos"

pentominos: gemaakt met de class "Pentos" 

 

"Drieh_nh", animatie met 24 driehoeken

"Drieh_nh", animatie met 24 driehoeken