Processing - Wat is het en hoe werkt het - Deel 1

[Clementine]

Inhoudsopgave 1: Inhoudsopgave 2: Inleiding 3: Wat gaan we doen 4: Sketches van tweakers 5: Bronnen 6: Contact « · ^ Inleiding Processing is een open source programmeer taal en omgeving voor mensen die afbeeldingen, animaties en interacties willen programmeren. Het wordt gebruikt door studenten, artiesten, designers, onderzoekers en hobbyisten voor leer doeleinden, het maken van prototypes en producties. Het is ontworpen om de fundamenten van het programmeren via de computer te leren binnen een visuele omgeving en te fungeren als een software schetsboek en professioneel productie instrument. Processing is een alternatief voor propriëtaire software programma's in hetzelfde domein. « · ^ Wat gaan we doen Het is de bedoeling dat we in dit topic elkaar gaan helpen bij het maken en bedenken van zogenaamde "Processing sketches". Deze sketches kunnen zo simpel of zo uitgebreid zijn als jij zelf wilt. Aangezien Processing relatief nieuw is en er nog niet veel mensen het gebruiken is er weinig te vinden over deze programmeer taal. Een goed boek om Processing te leren bestaat wel, namelijk: Learning Processing. Dit boek wordt onder andere gebruikt bij lessen op het hbo. Een lijst van commando's kun je vinden op de website van de makers van Processing. Ook vind je hier enige voorbeelden en beginners code's om je op weg te helpen. Voor meer geavanceerde sketches kun je het beste even kijken op Open Processing. Dit is een website waar artiesten hun sketches aan elkaar kunnen laten zien en commentaar geven op elkaars werk. Ik hoop dat iedereen veel plezier zal hebben in dit topic en moge er intressante sketches uit voort vloeien! - Remco « · ^ Sketches van tweakers [url="http://www.openprocessing.org/visuals/?visualID=4281"][img=100,100]http://www.openprocessing.org/visuals/applets/visual1268e045bdb54963c0e6b733303f8389/smallImage.jpg[/img][/url] [url="http://www.openprocessing.org/visuals/?visualID=4293"][img=100,100]http://www.openprocessing.org/visuals/applets/visual3b3628e53849f323662c5e8c76ad8753/smallImage.jpg[/img][/url] [url="http://www.openprocessing.org/visuals/?visualID=4300"][img=100,100]http://www.openprocessing.org/visuals/applets/visualb049f8c9f4bae54406a14499ccc958ff/smallImage.jpg[/img][/url] [url="http://bredend.com/sketch/"][img=100,100]http://www.imgcentre.com/img/uploads/big/3b34822f41.gif[/img][/url] [url="http://bredend.com/luisterpaler/"][img=100,100]http://bredend.com/images/Luisterpaler2.png[/img][/url] « · ^ Bronnen [url="http://www.processing.org"]www.processing.org[/url] - De makers en bedenkers van Processing [url="http://www.openprocessing.org"]www.openprocessing.org[/url] - Online showcase website voor Processing sketches [url="http://bredend.com"]www.bredend.com[/url] - Website van een medetweaker "Bredend" waar je processing applicaties kunt vinden. « · ^ Contact Catz (Topicstarter) Direct message « · ^

[ Voor 3% gewijzigd door Clementine op 15-02-2010 02:03 ]

[Clementine]

Ik doe maar even de 1st post om het topic wat leven in te blazen.

Op het moment volg ik de opleiding Concept & Product development aan de hoge school Saxion in Enschede. Hier krijgen wij het vak "programmeren". Dit vak volgen wij om zo in de toekomst prototypes te bouwen en te besturen en visuele projecten te kunnen ondersteunen.

Op het moment werk ik aan een rekenmachine. Het is nu alleen nog een template welke ik daadwerkelijk volledig werkzaam wil maken.

Rekenmachine:


Link: Klik hier

Huidige code:

code:

// Page settings 
smooth(); 
size(500, 500); 
background(255); 
 
// Calculator base 
stroke(124,124,124); 
fill(227,227,226); 
rect(100,50,300,430); 
 
// No stroke around forms 
noStroke(); 
 
// Calculator top 
fill(42,42,42); 
rect(100,50,300,100); 
 
// Lcd screen 
fill(227,225,223); 
rect(125,88,250,40); 
 
// buttons (non-numbers) 
fill(42,42,42); 
// 1st layer of buttons 
rect(280,170,40,40); 
rect(330,170,40,40); 
// 2nd layer of buttons 
rect(130,220,40,40); 
rect(180,220,40,40); 
rect(230,220,40,40); 
rect(280,220,40,40); 
rect(330,220,40,40); 
// 3rd layer of buttons 
fill(42,42,42); 
rect(130,270,40,40); 
fill(200,200,200); 
rect(180,270,40,40); 
rect(230,270,40,40); 
rect(280,270,40,40); 
fill(42,42,42); 
rect(330,270,40,40); 
// 4th layer of buttons 
rect(130,320,40,40); 
fill(200,200,200); 
rect(180,320,40,40); 
rect(230,320,40,40); 
rect(280,320,40,40); 
fill(42,42,42); 
rect(330,320,40,40); 
// 5th layer of buttons 
rect(130,370,40,40); 
fill(200,200,200); 
rect(180,370,40,40); 
rect(230,370,40,40); 
rect(280,370,40,40); 
fill(42,42,42); 
rect(330,370,40,90); 
// 6th layer of buttons 
fill(182,71,99); 
rect(130,420,40,40); 
fill(200,200,200); 
rect(180,420,40,40); 
rect(230,420,40,40); 
fill(42,42,42); 
rect(280,420,40,40); 
 
// 1st key 
PFont font; 
smooth(); 
font = loadFont("buttons.vlw");  
textFont(font, 20); 
fill(255, 255, 255); 
// 1st key layer 
text("MU", 284, 200); 
text("ON", 334, 200); 
// 2nd key layer 
text("MC", 135, 250); 
text("MR", 185, 250); 
text("M-", 235, 250); 
text("M+", 285, 250); 
text("÷", 342, 250); 
// 3rd key layer 
text("±", 143, 300); 
text("7", 193, 300); 
text("8", 243, 300); 
text("9", 293, 300); 
text("X", 343, 300); 
// 4th key layer 
text("%", 143, 350); 
text("4", 193, 350); 
text("5", 243, 350); 
text("6", 293, 350); 
text("-", 344, 350); 
// 5th key layer 
text("√", 142, 400); 
text("1", 193, 400); 
text("2", 243, 400); 
text("3", 293, 400); 
text("+", 342, 420); 
// 6th key layer 
text("AC", 136, 450); 
text("0", 193, 450); 
text(".", 247, 450); 
text("=", 293, 450);

Wellicht zijn er al mensen op tweakers bekend met Processing. In dat geval neem ik graag jullie meningen, commentaren en tips mee in mijn project.

[ Voor 3% gewijzigd door Clementine op 03-09-2009 22:54 . Reden: Plaatje + link toegevoegd ]

[bredend]

Je kan beter met de setup() en draw() methode gaat werken, zeker als je er nog een werkende versie van wil maken. Daarnaast kan je dan ook nog methodes gebruiken bij het tekenen:

code:

void setup(){
}

void draw(){
  drawButton(50, 50, 30, 30, "+", color(200, 150, 150));
}

void drawButton(int x, int y, int w, int h, String t, int clr){
  fill(clr);   //achtergrondkleur
  rect(x, y, w, h);   //knopje tekenen
  textAlign(CENTER, CENTER);   //tekst horizontaal en verticaal centreren 
  textFont(font);   //font instellen
  fill(255);   //tekstkleur instellen
  text(t, x, y, w, h);   //tekst met tekstvak even groot als knopje
}

[bredend]

Ik ben trouwens een simpel tekenprogramma aan het maken in Processing:
http://bredend.com/sketch/
Je kan je tekening ook opslaan en dan bijvoorbeeld in een topic gebruiken.

[ Voor 17% gewijzigd door bredend op 06-09-2009 00:46 ]

[Bozozo]

Dit ziet eruit als Flash maar dan met Java ipv Actionscript als programmeertaal. Mag je dat zo zeggen?

[Clementine]

bredend schreef op zondag 06 september 2009 @ 00:45:
Ik ben trouwens een simpel tekenprogramma aan het maken in Processing:
http://bredend.com/sketch/
Je kan je tekening ook opslaan en dan bijvoorbeeld in een topic gebruiken.

[afbeelding]

Dat ziet er wel gaaf uit

Ik zou het vak waarin je gaat tekenen alleen wat meer "paint-a-like" maken. Voegt niets toe maar maakt het wel leuker om te zien.

Bozozo schreef op zondag 06 september 2009 @ 11:32:
Dit ziet eruit als Flash maar dan met Java ipv Actionscript als programmeertaal. Mag je dat zo zeggen?

Het heeft zo z'n overeenkomsten.

Het is in ieder geval voor creatieve mensen die niet geweldig kunnen programmeren

Ik kan een hele hoop in html en css maar dat is niets als je prototypes wil besturen vanaf je pc.

[ Voor 37% gewijzigd door Clementine op 06-09-2009 23:49 ]

[3V3RT]

Even mijn game of life opzoeken die ik onlangs ook gepost heb in het "show je eigen gemaakte software" topic.

[Salvatron]

Kun je hier ook filmpjes mee maken, of plaatjes exporteren, in plaats van een java-applet?

[zwippie]

Spruit 11 schreef op maandag 07 september 2009 @ 22:01:
Kun je hier ook filmpjes mee maken, of plaatjes exporteren, in plaats van een java-applet?

Ja en ja.

Het is ook nog eens zo gemaakt dat het best makkelijk gaat.

Java:

// in de setup
mm = new MovieMaker(this, width, height, "export.mov");

// in de draw loop
mm.addFrame();

// en uiteindelijk
mm.finish();

En om een frame als plaatje op te slaan doe je enkel:

Java:

save();

// of in de draw loop
saveFrame(); // plakt de framecounter achter de filename om series te maken

Zie ook de libraries voor de wat geavanceerdere input/output.

[Clementine]

Spruit 11 schreef op maandag 07 september 2009 @ 22:01:
Kun je hier ook filmpjes mee maken, of plaatjes exporteren, in plaats van een java-applet?

Het kan maar houd er wel rekening mee dat je eigenlijk een java code aan het schrijven bent (op de achtergrond).

[ieperlingetje]

Leuke is als je loops gaat gebruiken (snel even iets gemaakt)

code:

size(1000, 900);
for(int i=1; i<100; i++) {
rect(random(width),random(height),i,i);
}

[bredend]

Met behulp van XML en wat command line programma's dit programma in elkaar gezet om CD's van de luisterpaal mee te downloaden. De download knop is verdwenen omdat de CD's aan het downloaden zijn.


Instellingenscherm:


Zonder UI manager gaat prima, alleen is het minder dynamisch.
Als het programma af is zal ik versie 1 posten.

[Verwijderd]

Een boek waar Processing centraal staat: O'Reilly - Visualizing data

[Clementine]

bredend schreef op zaterdag 24 oktober 2009 @ 23:40:
Met behulp van XML en wat command line programma's dit programma in elkaar gezet om CD's van de luisterpaal mee te downloaden. De download knop is verdwenen omdat de CD's aan het downloaden zijn.
[afbeelding]

Instellingenscherm:
[afbeelding]

Zonder UI manager gaat prima, alleen is het minder dynamisch.
Als het programma af is zal ik versie 1 posten.

En dat is gemaakt met Processing ?

Zeer indrukwekkend!

Ik ben vanaf deze week weer begonnen met processing op school. Tussendoor hebben we met Arduino's mogen klooien (wat een nachtmerrie).

Ik heb er zin in en hoop gauw weer wat moois te kunnen maken

[windwarrior]

Catz schreef op vrijdag 12 februari 2010 @ 07:27:
[...]

*knip*
Ik ben vanaf deze week weer begonnen met processing op school. Tussendoor hebben we met Arduino's mogen klooien (wat een nachtmerrie).
*knip*

vindt jij arduino een nachtmerrie ja? Ik ben echt super fan van wat die dingen kunnen

verder ben ik ook begonnen met processing, ik dacht dat wordt appeltje eitje nadat ik al een tijd arduino doe en bezig ben met c++ maar dat valt even tegen zeg....

[eghie]

Er is ook een Javascript library die processing kan parsen, waarbij je dus processing in je website kunt gebruiken. Zie ook: http://processingjs.org/learning/ide