{"id":312,"date":"2011-12-12T13:03:20","date_gmt":"2011-12-12T12:03:20","guid":{"rendered":"https:\/\/tristanweis.com\/?p=312"},"modified":"2019-03-04T02:28:08","modified_gmt":"2019-03-04T01:28:08","slug":"processing","status":"publish","type":"post","link":"https:\/\/tristanweis.com\/de\/processing\/","title":{"rendered":"Processing"},"content":{"rendered":"W\u00e4hrend eines Einf\u00fchrungskurses in die Programmierung mit Processing<\/a> kreierte ich diverse kleine Programme.
\n
\nDie meisten dieser sogenannte Sketches<\/em> behandeln Raum, Klang, Farben und Muster.<\/p>\n

Aufgabe f\u00fcr die Abschlussaufgabe<\/h4>\n

Zeitbasierende Muster:
\nIn den letzten zwei Wochen haben wir uns Musterbeobachtungen genauer angeschaut.
\nDies sollte eure Inspiration f\u00fcr einen programmierten Sketch<\/em> sein. Startet mit euren eigenen Beobachtungen und nat\u00fcrlichen Beschreibungen. Denkt \u00fcber Muster, die ihr kreieren wollt nach. Das Muster kann auf eingegebenen Daten (z.B. ein Bild oder ein Text) basieren, oder aus komplexeren Formen erstellt sein. Verwandelt dieses Muster in ein zeitbasiertes Muster \u2013 eine Animation. Denkt \u00fcber die verschiedenen Verhaltensweisen eurer Elemente nach. Benutzt eine oder mehrere Funktionen, um das Programm aufzubauen.<\/p><\/blockquote>\n

Ich versuchte, einige davon via Processing.js<\/a> im Browser laufen zu lassen. Grunds\u00e4tzlich funktioniert das gut genug f\u00fcr eine schnelle Demonstration, aber die generelle Performance l\u00e4sst zu w\u00fcnschen \u00fcbrig und es kommt hier und da zu einigen Abweichungen.
\nEinige der Quellcodes finden sich unter den Beschreibungen der Sketches<\/em>.<\/p>\n

Nat\u00fcrlich lassen sich alle Programme als kompilierte Pakete herunterladen; sie beinhalten ausf\u00fchrbare Dateien und sollten auf den meisten Systemen funktionieren.<\/p>\n

 <\/p>\n

Soundvirus<\/h3>\n

Das Soundvirus<\/strong> ist eine dreidimensionale Klangvisualisierung. Es besteht aus vier Ebenen von Zweigen, die aus einem gemeinsamen Ursprung entspringen. Jeder Zweig besitzt mehrere Unterzweige, deren Anzahl in den h\u00f6heren Ebenen zunimmt. Das komplette System bewegt sich mit der Zeit, w\u00e4hrend die insgesamt 360 Zweige 90 zuf\u00e4llig generierte Variablen basierend auf ihrer Feldposition abrufen, um ihre Bewegung in drei Dimensionen zu berechnen. Das bedeutet, das die meisten \u00c4ste drei Geschwister besitzen, die die gleiche Bewegung teilen, was eine Mischung aus Zufallsarrangement und unterbewusstem Muster zur Folge hat. Die Geschwindigkeit der Evolution des Systems, sowie die Farben basieren auf dem Stereopegel der Tonspur.<\/p>\n

\"Soundvirus\"<\/a><\/p>\n

F\u00fcr die soundvirus_mic<\/strong>-Version wird der Mikrofoneingang verwendet. Die Ger\u00e4uschsensibilit\u00e4t l\u00e4sst sich durch das \u00e4ndern der Variable \"volumeadjust\" einstellen. Eine kleinere Nummer erh\u00f6ht die Sensibilit\u00e4t.
\nDer soundvirus<\/strong>-Sketch benutzt die mitgelieferte Audiodatei zum Auslesen des Pegels.<\/p>\n<\/i> Soundvirus<\/em> herunterladen<\/span><\/a>\n<\/i> Soundvirus_mic<\/em> herunterladen<\/span><\/a>\n

 <\/p>\n

Dimension Clock<\/h3>\n

Die Dimension Clock<\/strong> ist ein Versuch, die Zeit dreidimensional darzustellen. Stunden, Minuten und Sekunden sind als Linien dargestellt, die in Kreisen auf drei verschiedenen Ebenen im Raum angeordnet sind. Mit dem Fortschritt der Zeit \u00e4ndert sich ihre Anzahl, sowie L\u00e4nge. Die digitale Zeitanzeige ist aus praktischen Gr\u00fcnden im Ursprung zu finden. Durch das Bewegen der Maus l\u00e4sst sich der Blickwinkel ver\u00e4ndern; ein Klicken vergr\u00f6\u00dfert die Uhr. Nach ein paar Sekunden ohne Eingabe startet ein 'Bildschirmschoner-Modus', bei dem die Kamera automatisch herumschwebt.<\/p>\n

\"Dimensionclock\"<\/a><\/p>\n

Die Processing.js-Version stellt in einigen Browsern leider die falsche Zeit dar.<\/span><\/p>\n\n

<\/span>Code: Dimension Clock<\/div>
\n
PFont font;\nfloat timecount = 0;\nfloat zoom=(200.0);\nint mousemovefalse = 0;\nint mousetimer = 0;\nfloat mouseTestX = 0;\nfloat mouseTestY = 0;\n\nvoid setup()\n{\n  size(800, 600, P3D);\n  frameRate(30);\n  background(255);\n  font = createFont(\"Helvetica\", 24);\n}\nvoid draw()\n{ \n  \/\/Screensaver-Modus\n  if (mouseX==mouseTestX&&mouseY==mouseTestY) {\n    mousetimer+=1;\n  } else {\n    mousetimer=0;\n    mousemovefalse=0;\n  }\n  if (mousetimer==120) {\n    timecount=0;\n  }\n  if (mousetimer>=120) {\n    mousemovefalse=100;\n  }\n  timecount+=1;\n\n  smooth();\n  background(255);\n  camera(mouseX+mousemovefalse*(sin(timecount\/100)),\n    mouseY+mousemovefalse*(sin((timecount\/100)*0.7)),\n    zoom, width\/2.0, height\/2.0, zoom-200, 0, 1, 0);\n\n  \/\/Rasteranpassung f\u00fcr Darstellung\n  translate(width\/2, height\/2, -100);\n\n  \/\/Boden\n  rotateX(-PI\/2);\n  noStroke();\n  fill(240);\n  rectMode(CENTER);\n  translate(0, 0, 250);\n  rect(0, 0, 1000, 1000);\n  translate(0, 0, -250);\n  rotateX(PI\/2);  \n\n  \/\/Zeit als Integers f\u00fcr Rechnung und Strings f\u00fcr Textdarstellung\n  String s = str(second());\n  int sec = second();\n  String m = str(minute());\n  int minu = minute();\n  String h = str(hour());\n  int hou = hour();\n\n  \/\/Nullen f\u00fcr einziffrige Zahlen\n  if (sec<10) {\n    s = '0'+str(sec);\n  }\n  if (minu<10) {\n    m = '0'+str(minu);\n  }\n  if (hou<10) {\n    h = '0'+str(hou);\n  }\n\n  \/\/Text\n  fill(0);\n  textAlign(CENTER, CENTER);\n  textFont(font);\n  text(h+\":\"+m+\":\"+s, 0, 0);\n\n  \/\/Kreisf\u00f6rmige Anzeige f\u00fcr Sekunden\n  rotateX(PI\/3.0);\n  for (int linesecond=0; linesecond<sec; linesecond++)\n  {\n    strokeWeight(4);\n    stroke(0, 220);\n    float winkels = radians(linesecond);\n    line(cos(winkels*6)*60,\n        sin(winkels*6)*60,\n        cos(winkels*6)*(200-2*sec),\n        sin(winkels*6)*(200-2*sec));\n  }\n  rotateX(PI\/-3.0);\n  \/\/Koordinatensystem wird zur\u00fcckgedreht\n\n  \/\/... Minuten\n  rotateY(PI\/-4.0); \n  for (int lineminute=0; lineminute<minu; lineminute++)\n  {\n    strokeWeight(4);\n    stroke(255, 0, 0, 220);\n    float winkelm = radians(lineminute);\n    line(-cos(winkelm*6)*60,\n        -sin(winkelm*6)*60,\n        -cos(winkelm*6)*(200-2*minu),\n        -sin(winkelm*6)*(200-2*minu));\n  }\n  rotateY(PI\/2.0);\n\n  \/\/... Stunden\n  for (int linehour=0; linehour<hou; linehour++)\n  {\n    strokeWeight(4);\n    stroke(0, 255, 0, 220);\n    float winkelh = radians(linehour);\n    line(cos(winkelh*15)*60,\n        sin(winkelh*15)*60,\n        cos(winkelh*15)*(200-5*hou),\n        sin(winkelh*15)*(200-5*hou));\n  }\n  mouseTestX = mouseX;\n  mouseTestY = mouseY;\n}\n\n\/\/Zoom per Mausklick\nvoid mousePressed() {\n  zoom-=120;\n}\nvoid mouseReleased() {\n  zoom+=120;\n}\n<\/pre>\n<\/div><\/div>\n<\/i> Dimension Clock<\/em> herunterladen<\/span><\/a>\n
 <\/p>\n
Color Pattern<\/h3>\n
Dieser Sketch visualisiert Sinuswellen auf verschiedene Weisen, basierend auf Zeit. Zwei Sinuswellen werden kombiniert und erzeigen ein sich bewegendes Muster, indem sie Vertex-Formen beeinflussen. Die Farben dieser Formen werden ebenfalls durch zwei Sinuswellen mit unterschiedlichen Frequenzen ver\u00e4ndert. Letztendlich erzeugt dieses Programm einen Effekt, der sich mit einer optischen T\u00e4uschung vergleichen l\u00e4sst \u2013 rein auf Wellen basierend.<\/p>\n
\"Colorpattern\"<\/a><\/p>\n
Es kann durchaus etwas langsam sein (abh\u00e4ngig von Deinem System), aber es funktioniert:<\/span><\/p>\n\n
<\/span>Code: Color Pattern<\/div>
\n
int col = 0;\nint patternsize = 20;\nvoid setup()\n{\n  size(800,600);\n  background(255);\n  frameRate(30);\n}\n\nvoid draw()\n{\n  background(255);\n  smooth();\n  col++;\n  for(int ex = 0; ex <= width; ex=ex+patternsize)\n  {\n    for(int yp = 0; yp <= height; yp=yp+patternsize)\n    {\n      float movex = ex;\n      float movey = yp;\n      noStroke(); \n      fill(((sin(((movex\/10)+col)\/12))*100)+150,(sin(((movey\/12)+col)\/12)*100)+150,100);\n      beginShape();\n      float wob=col;\n      vertex( 2+movex,  2+movey);\n      vertex( 7+movex, (3*sin((20*wob+movey-movex)\/100))+6+movey);\n      vertex(13+movex, (3*sin((20*wob+movey-movex)\/100))+6+movey);\n      vertex(18+movex,  2+movey);\n      vertex(18+movex, 18+movey);\n      vertex(13+movex, (-3*sin((20*wob+movey+movex)\/100))+14+movey);\n      vertex( 7+movex, (-3*sin((20*wob+movey+movex)\/100))+14+movey);\n      vertex( 2+movex, 18+movey);\n      endShape(CLOSE);\n    }\n  }\n}\n\n<\/pre>\n<\/div><\/div>\n<\/i> Color Pattern<\/em> herunterladen<\/span><\/a>\n
 <\/p>\n
Spectralmandala<\/h3>\n
Ein weiterer Sketch basierend auf Sinuswellen. Dieses Programm erzeugt neun kreisf\u00f6rmig angeordnete Ellipsen, die herumschweben und ihre Farbe \u00e4ndern. Die Verformungen und Farbverl\u00e4ufe provozieren eine dreidimensionale, fast halluzinativ wirkende Wahrnehmung.<\/p>\n
\"Spectralmandala\"<\/a><\/p>\n
Dieser Sketch leidet mit Processing.js unter mysteri\u00f6sen Unterbrechungen. Ansonsten funktioniert aber alles.<\/span><\/p>\n\n
<\/span>Code: Spectralmandala<\/div>
\n
float rad=radians(35);\nfloat counter=0;\n\nvoid setup()\n{\n  size(800, 600);\n  frameRate(60);\n  background(255);\n}\n\nvoid draw()\n{\n  counter=counter+0.01;\n  pushMatrix();\n  translate(width\/2+sin(counter)*100,\n    height\/2+sin(counter+PI\/2)*100);\n  for (int i=0; i<10; i++)\n  {\n    noStroke();\n    rotate(sin(counter));\n    fill(122+122*sin(i-counter*counter),\n        122+122*sin(i+counter),\n        122+122*sin(i*i+counter), 30);\n    rectMode(CENTER);\n    ellipse(60, 60, 100*cos(counter*0.4),\n        100*tan(counter*0.6));\n  }\n  popMatrix();\n}\n<\/pre>\n<\/div><\/div>\n<\/i> Spectralmandala<\/em> herunterladen<\/span><\/a>\n
 <\/p>\n
Volumeter<\/h3>\n
Der Volumeter<\/strong> benutzt den Mikrofoneingang, um Geschwindigkeit, Gr\u00f6\u00dfe und Farbe eines sich bewegenden Kreises zu bestimmen. Wenn die Lautst\u00e4rke einen bestimmten Grenzwerde \u00fcberschreitet, f\u00e4rbt sich die komplette Kreisfl\u00e4che rot und verdeutlicht, das der Ton 'zu laut' ist.<\/p>\n
\"Volumeter\"<\/a><\/p>\n
<\/span>Code: Volumeter<\/div>
\n
import ddf.minim.*;\nMinim minim;\nAudioInput input;\nfloat xmove=width\/2;\nfloat ymove=height\/2;\nint xaccel=1;\nint yaccel=1;\n\nfloat laut = 0;\n\nvoid setup()\n{\n  size(800, 600);\n  background(0);\n  minim = new Minim (this);\n  input = minim.getLineIn (Minim.STEREO, 512);\n  smooth();\n}\n\nvoid draw()\n{\n  fill(0, 20);\n  noStroke();\n  rect(0, 0, width, height);\n  laut = input.mix.level()*4000;\n  noFill();\n  strokeWeight(2);\n  if (laut>=600) {\n    fill(255, 0, 0, 235);\n  }\n  xmove=xmove+laut*xaccel\/50;\n  ymove=ymove+laut*yaccel\/50;\n  if (xmove<=0) { xaccel=1; } if (xmove>=width) {\n    xaccel=-1;\n  }\n  if (ymove<=0) { yaccel=1; } if (ymove>=height) {\n    yaccel=-1;\n  } else {\n    stroke(195-laut\/100, 195-laut\/100, 255, 235);\n  }\n  ellipse(xmove, ymove, laut, laut);\n}\n<\/pre>\n<\/div><\/div>\n<\/i> Volumeter<\/em> herunterladen<\/span><\/a>","protected":false},"excerpt":{"rendered":"
Leider ist der Eintrag nur auf English verf\u00fcgbar. Der Inhalt wird unten in einer verf\u00fcgbaren Sprache angezeigt. Klicken Sie auf den Link, um die aktuelle Sprache zu \u00e4ndern.Completing an introductional course on programming with Processing I wrote various little programms.<\/p>\n","protected":false},"author":1,"featured_media":1699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other-stuff"],"_links":{"self":[{"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/posts\/312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":0,"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/media\/1699"}],"wp:attachment":[{"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tristanweis.com\/de\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}