Medien Wiki - User contributions [en]

EKK:LoFi Sounds in HiFi Spaces/Johannes

2013-04-26T13:53:42Z

Mago8031:

==Interests==
[[File:johm underwater.jpg|thumb|Johannes]]
My Interests are in generative arts (form and code). I try me to work with Processing, MAX MSP and PD and i want to combine it with handmade electronic sounds or music. For example i'm using piezo disk contact mikes to pick up tiny sounds in vibrating objects and coding a algorithm that takes the frequencies and makes it harmonic or composed it in a interference rhythm. With the higher harmonics of any sounds i will play... ;-) I like sound design and film music composing.

==Project Idea==
Maybe a visualization technique time series that displays the rhythms and emphases of speech from any members at these project. Any spoken word over the connection will show as an animated image that combines data through motion.

EKK:LoFi Sounds in HiFi Spaces/Johannes

2013-04-26T13:29:20Z

Mago8031:

EKK:LoFi Sounds in HiFi Spaces/Johannes

2013-04-26T13:25:15Z

Mago8031: /* Interests */

File:Johm underwater.jpg

2013-04-26T13:23:29Z

Mago8031: Johannes K. Altmann

== Summary ==
Johannes K. Altmann
== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

EKK:LoFi Sounds in HiFi Spaces/Johannes

2013-04-26T13:14:44Z

Mago8031: Created page with "==Interests== My Interests are in generative arts (form and code). I try me to work with Processing, MAX MSP and PD and i want to combine it with handmade electronic sounds or mu..."

==Interests==
My Interests are in generative arts (form and code). I try me to work with Processing, MAX MSP and PD and i want to combine it with handmade electronic sounds or music. For example i'm using piezo disk contact mikes to pick up tiny sounds in vibrating objects and coding a algorithm that takes the frequencies and makes it harmonic or composed it in a interference rhythm. With the higher harmonics of any sounds i will play... ;-) I like sound design and film music composing.

EKK:LoFi Sounds in HiFi Spaces

2013-04-26T11:39:35Z

Mago8031: /* Weimar */

[[:Category:Projektmodul|Projektmodul]] 
''Lecturers:'' [[Robin Minard]], [[/miller|Miller Puckette]], Katharina Rosenberger, [[/Shahrokh|Shahrokh Yadegari]], [[Ludger Hennig]], [[Max Neupert]] 
''Credits:'' 18 [[ECTS]], 16 [[SWS]] 
''Date:'' Monday, 18:00 until 21:30 h (due to the time difference to San Diego) 
''Venue:'' [[Coudraystraße 13a]], SeaM Werkstattstudio 
''First meeting:'' 15.04.2013

==Description==
The sensation of space through spatialized sound may be influenced by sources that differ in their quality and quantity. Within this project, we will investigate ways to modify, expand or augment how space can be experienced through sound. The outcome may be, for instance, an electroacoustic composition, a simulation of spatial perception, sonic architecture or a set-design as a virtual or performative environment.

This project is the beginning of a long-term cooperation between the Bauhaus-Universität Weimar and the University of California in San Diego. Partners in Weimar are Prof. Robin Minard and Ludger Hennig from the Studio for Electroacoustic Music (SeaM) and Max Neupert (Medial Environments). Partners in San Diego are Prof. Miller Puckette (Computer Music), Prof. Katharina Rosenberger (Music) and Prof. Shahrokh Yadegari (Theatre and Dance). Telematic classes will allow students from both faculties to work together. Classes will take place in Weimar in the evening, mid-morning in San Diego. The cooperation is funded by the German Academic Exchange Service (DAAD).

===German description===
Die Wahrnehmung von Raum durch verräumlichten Klang, kann durch Klangquellen beeinflusst werden, welche sich in ihrer Qualität und Quantität unterscheiden. In diesem Projekt werden wir untersuchen, auf welche Art wir die Erfahrung von Raum durch den Klang verändern, erweitern oder verbessern können. Das Ergebnis kann beispielsweise eine elektroakustische Komposition, eine Simulation einer räumlichen Wahrnehmung, klangliche Architektur oder ein Bühnenbild als virtuelle oder performative Umgebung sein.

Dieses Projekt ist der Beginn einer langfristigen Zusammenarbeit zwischen der Bauhaus-Universität und der Universität von Kalifornien in San Diego. Partner aus Weimar sind Prof. Robin Minard und Ludger Hennig vom Studio für Elektoakustische Musik (SeaM) und Max Neupert (Gestaltung medialer Umgebungen). Partner aus San Diego sind Prof. Miller Puckette (Computermusik), Prof. Katharina Rosenberger (Musik) und Prof. Shahrokh Yadegari (Theater und Tanz). Gemeinsamer Unterricht mit einer Videoverbindung wird es den Studierenden beider Universitäten ermöglichen, zusammen zu arbeiten. Der Unterricht wird in Weimar am Abend und vormittags in San Diego stattfinden. Die Zusammenarbeit wird vom Deutschen Akademischen Austauschdienst (DAAD) gefördert.

==Werk/Fachmodule==
We recommend the Werk/Fachmodul [[GMU:Dataflow II]] and/or Ludger Hennigs soundscapes class along with this Project module.

==Assignments==
# [[/Making connection/]] due 04-22
# [[/Mingling sounds/]] due 04-29
# [[/Textualize ideas/]] due 05-06
# [[/Proposing concepts/]] due 05-13

==Evaluation==
Active participation, presentation, artistic examination, documentation, edits in the wiki.

==Participants==
===Weimar===
* [[/Rico/]]
* [[/Alex/]]
* [[/Alice/]]
* [[/Jonas/]]
* [[/Andre/]]
* [[/Paul/]]
* [[/Ben/]]
* [[/Ludwigberger/]]
* [[/TimH/]]
* [[/Dorian/]]
* [[/Clemens/]]
* [[/Ives/]]
* [[/Cornelio/]]
* [[/Johannes/]]

* [[/Max/]] (you may use this as a template for your self-introduction)

===San Diego===
* [[/Brendan Bernhardt Gaffney/]]
* [[/Kevin/]]
* [[/Melanie/]]
* [[/Jeffrey/]]
* [[/Bo/]]
* [[/Andy/]]
* [[/Jamilah/]]
* [[/Marcelo/]]
* [[/Ryan Welsh/]]
* [[/ElisabetCurbelo/]]
* [[/Joe Cantrell/]]
* [[/czyskows/]]
* [[/NickDrashner/]]

* [[/miller/]]
* [[/Shahrokh/]]
* [[/CarolineMiller/]]

==Syllabus==
ISO Standard: MONTH/DAY
# 04/01 Only in San Diego (Easter Monday is holiday in Germany; Robin, Ludger and Max join via Skype/Google+ Hangout) faculty presentations about technical means and/or artistic issues. Introduction to the wiki.
# 04/08 Only in San Diego – faculty presentations continued. Miller - Rasberry Pi as an audio and video platform. Shahrokh - Mugic protocol; video walls
# 04/15 First joint class
# 04/22 Robin, Ludger and Max are in San Diego
# 04/29
# 05/06
# 05/13
# 05/20
# 05/27 Only in Weimar (Memorial day in the U.S.)
# 06/03
# 06/10
# 06/17
# 06/24
# 07/01

==Literature==
* Föllmer, Golo: Netzmusik, Wolke Verlag ISBN 3936000336
* LaBelle, Brandon: Background Noise ISBN 9780826418456
* LaBelle, Brandon: Site of Sound: Or Architecture and the Ear ISBN 978-0982743904
* Minard, Robin: Silent Music ISBN 978-3933257130
* Minard, Robin: Sound Installation Art
* Leitner, Bernard: Sound:Space ISBN 978-3893224449

Pd books:
{{Template:PdBooks}}

==Links==
* [https://groups.google.com/forum/#!forum/buw-ucsd-class Google Group BUW-UCSD-class]
* [https://puredata.info/docs/raspberry-pi Pure Data on the Raspberry Pi]

===Sending data over the network===
* [[OSC]]
* netsend/netreceive, netserver/netclient. In Pd look at <tt>mrpeach</tt> and <tt>iemnet libraries</tt>
* [http://ivl.calit2.net/wiki/index.php/StreamingGraphics Mugic]

===Sending Audio and Video over the Internet===
* [[wikipedia:Audio Video Bridging]] AVB is a set of standards for audio and video transmission by the IEEE

====Intended for Communcation====
* [http://www.skype.com Skype] [[File:Icon newtux 16x16.png]] [[File:Icon android 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]
* [https://tools.google.com/dlpage/hangoutplugin Google+ Hangout] [[File:Icon newtux 16x16.png]] [[File:Icon android 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]] (Seems to work best in Chome/Chromium)
* [http://www.oovoo.com ooVoo] [[File:Icon android 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]
* [http://www.voxox.com voxox] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]
* [http://line.naver.jp/en LINE] [[File:Icon android 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]
* [http://www.teamviewer.com TeamViewer] [[File:Icon newtux 16x16.png]] [[File:Icon android 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]
* [http://www.teamspeak.com TeamSpeak] [[File:Icon newtux 16x16.png]] [[File:Icon android 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]

Teleconferencing
* [http://www.polycom.com Polycom] [[File:Icon windows8 16x16.png]] System available in Weimar
* [http://www.radvision.com/Products/Video-Conference-Systems Radvision Scopia] [[File:Icon windows8 16x16.png]]
* [http://www.lifesize.com Livesize] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]] System available in San Diego

Unidirectional only (aka streaming)
* [http://giss.tv Global Independent Streaming Support], [http://giss.tv/wiki/index.php/Main_Page G.I.S.S wiki]
* [http://www.ustream.tv Ustream]
* [http://www.justin.tv justin.tv]
* [http://www.shoutcast.com/ shoutcast] also as vst plugin availlable

====Intended for Performance/Creative Use====
* [http://code.sat.qc.ca/redmine/projects/scenic/wiki/Scenic_fr Scenic] Audio and video in high quality, as well as MIDI [[File:Icon newtux 16x16.png]]
* [http://code.google.com/p/jacktrip JackTrip] [[File:Icon newtux 16x16.png]] [[File:Icon apple 16x16.png]] a network extension for [http://jackaudio.org/ Jack Audio Connection Kit] [[File:Icon newtux 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]
* [http://gstreamer.freedesktop.org GStreamer] and bindings for Pd: [http://umlaeute.mur.at/Members/zmoelnig/projects/pdgst PdGst] [[File:Icon newtux 16x16.png]]
* netsend~ for Max/MSP and Pd: [http://www.nullmedium.de/dev/netsend~ Olaf Matthes' Original Version] [[File:Icon newtux 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]], [http://www.olivierguillerminet.com/portfolio/netsend Olivier Guillerminet's/Remu's Fork] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]
* [http://code.google.com/p/streaming-audio Streaming Audio Manager (SAM)] by [https://ccrma.stanford.edu/~danielsm/research.html Michelle Daniels] [[File:Icon newtux 16x16.png]] [[File:Icon apple 16x16.png]] [[File:Icon windows8 16x16.png]]

===Performing Remotely===
* [http://www.netpd.org NetPd]
* [http://at.or.at/serendipd SerendiPd] collaborative patching

IFD:ShowreelWS1112/Johannes Altmann - Redesign für eine Hebamme, neue Webpräsentation

2012-02-03T14:34:41Z

Mago8031: /* Werkmodul 'Interface-Entwicklung für Fortgeschrittene' */

==Redesign für eine Hebamme | Webseite mit Dojo & Jquery==
===Johannes Altmann===

====Werkmodul 'Interface-Entwicklung für Fortgeschrittene'====

[[File:johannes_altmann_bild1.png|800px]]
[[File:johannes_altmann_bild2.png|800px]]
[[File:johannes_altmann_bild3.png|800px]]

Programmierung eines Kalendersystems mit diversen Angeboten für Kurse oder ähnliches. Weiterhin soll es direkt für jeden Kurs ein Anmeldeformular geben sowie Info Material zum Download und

Kurse vor der Geburt

Geburtsvorbereitung

Geburtsvorbereitung Hypnobirthing

Schwangerschaftsgymnastik

Yoga in der Schwangerschaft

Erste Hilfe bei Kindernotfällen

Kurse nach der Geburt

Rückbildungsgymnastik

Rückbildungsgymnastik für Fortgeschrittene

Rückbildungs-Yoga

Pilates

Autogenes Training

Erste Hilfe bei Kindernotfällen

Eltern-Kind-Kurse

Babymassage

FEP - Frühkindliches Entwicklungsförderungsprogramm®

Mit Kindern wachsen - EntdeckungsRaum

Spielkreis

Spielturnen

Musik & Yoga für Kinder

Mutter-Kind-Yoga

Kurse für Frauen

Yoga für Frauen

Yoga für den Beckenboden

Bauch-Beine-Po-Kurs

Singkreis für Frauen

IFD:ShowreelWS1112/Johannes Altmann - Redesign für eine Hebamme, neue Webpräsentation

2012-02-03T13:10:51Z

Mago8031: /* Redesign für eine Hebamme */

IFD:ShowreelWS1112/Johannes Altmann - Redesign für eine Hebamme, neue Webpräsentation

2012-02-03T13:06:59Z

Mago8031: /* Werkmodul 'Interface-Entwicklung für Fortgeschrittene' */

==Redesign für eine Hebamme==
===Johannes Altmann===

====Werkmodul 'Interface-Entwicklung für Fortgeschrittene'====

[[File:johannes_altmann_bild1.png|800px]]
[[File:johannes_altmann_bild2.png|800px]]
[[File:johannes_altmann_bild3.png|800px]]

File:Johannes altmann bild3.png

2012-02-03T12:42:00Z

Mago8031:

== Summary ==

== Copyright status: ==

== Source: ==

File:Johannes altmann bild2.png

2012-02-03T12:41:36Z

Mago8031:

== Summary ==

== Copyright status: ==

== Source: ==

File:Johannes altmann bild1.png

2012-02-03T12:41:06Z

Mago8031:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:ShowreelWS1112/Johannes Altmann - Redesign für eine Hebamme, neue Webpräsentation

2012-02-03T12:40:42Z

Mago8031: /* Werkmodul 'Interface-Entwicklung für Fortgeschrittene' */

==Redesign für eine Hebamme==
===Johannes Altmann===
====Werkmodul 'Interface-Entwicklung für Fortgeschrittene'====

[[File:johannes_altmann_bild1.png]]
[[File:johannes_altmann_bild2.png]]
[[File:johannes_altmann_bild3.png]]

IFD:ShowreelWS1112

2012-02-02T10:22:07Z

Mago8031:

[[File:Ifd_showreel_20120114b.png]]

<h3 style="color:#0083D6;">INFOS</h3>
'''Präsentation WS 2011/12''' 
Professur Interface Design 
Prof. Dr. Jens Geelhaar, Frederic Gmeiner, Michael Markert, Gabriel Rausch, Martin Schied,

'''03. Februar 2012'''
'''11:00 - 17:00 Uhr''' 
'''Audimax''' 
Steubenstraße 6, Haus F

Die Präsentation der Professur Interface Design bietet die Möglichkeit, einen Einblick in die Semesterarbeiten und die Inhalte der angeboten Module zu bekommen. Die Veranstaltung lädt nicht nur Studenten des Bereichs IFD ein, sondern ist offen für alle Interessierten.

<h3 style="color:#0083D6;">HOW TO...</h3>
[[/Wie stelle ich mein Projekt ins Wiki?/]] 

Beispiel-Eintrag: 
[[/Vorname Nachname - Projekttitel/]]

<h3 style="color:#0083D6;">PROGRAMM</h3>

'''11:00 - 13:00 Block "Projektmodule"'''

* Projektmodul 'Interaktive Bildmedien' (DEUTSCH)
**[[/Reinhard & Tobias & Lydia & Anastasiya - Weimarpedia Kids (Redesign) (15 min)/]]
**[[/Sven & Carlo - Weimarpedia Kids (Spiel und Spaß)/]]
**[[/Juliane & Alex - Weimarpedia Kids (neuer Inhalt) (5 min)/]]
**[[/Melanie & Christiane - IPad-Film kinderleicht?/]]
**[[/Sebastian Johansson - Tweet State of Mind (Research) (5 min?)/]]

* Projektmodul 'Zeitmaschinen' (ENGLISH)
**[[/Claudia Heinze - Kreativrhythmus/]]
**[[/Liana Chandra - Musical Movements/]]
**[[/Dianna Mertz - In-Depth: Smart Containers/]]
**[[/Yunshui Jin - Magic Wall/]]
**[[/Jie Wang - Interactive Growing Plant/]]
**[[/Yue Mao - Color your life/]]
**[[/Xin Wang - "talk" to flower/]]
**[[/Jelena Djokic & Lu Jin - Vade Mecum (Zusammenarbeit)/]]
**[[/Adriana Cabrera - BuildVille/]]
**[[/Shayna Lauer - eswap/]]
**[[/Patawat Phamuad - Relieve Climate/]]
**[[/Sascha & Sebastian & Jonas - Isochronics/]]
**[[/Jason Reizner - Walls Have Ears/]]
**[[/Nawar Jnedee - Virtual Assistant/]]
**[[/Test - testtitle/]]
**[[/Jeffers Egan - Color Correct App for TouchDesigner_Play/]]

'''Mittagspause'''

'''13:30 - 14:30 Block "Fachmodule"'''

* Fachmodul 'iOS Development II'
**[[/Andreas - Game of Life/]]
**[[/Antje - MovingCloud/]]
**[[/Johannes - Museum/]]
**[[/Patawat - Project/]] (unter Projektmodul)
**[[/Stephan - Projekttitel/]]

* Fachmodul 'Physical Computing'
**[[/Vorname Nachname - Projekttitel/]]
**[[/Yunshui Jin - 3D Scan/]]
**[[/Julia Putscher & Reinhard W. - EHP - Emotion Heartbeat Project/]]
**[[/ Augusto Gandia - Trip Book/]]
**[[/Jelena Djokic - Projekttitel/]]
**[[/Lu Jin - SHAKE ME/]]

'''14:30 - 17:00 Block "Werkmodule"'''

* Werkmodul 'Interface-Entwicklung für Fortgeschrittene'
** [[/Bastian Bischoff - Projekttitel/]]
** [[/Antje Danz - The Other Europeans/]]
** [[/Georg Müller - Projekttitel/]]
** [[/Tobias Wolf - backup_festival/]]
** [[/Daniel Schulz - Parallax Scrolling/]]
** [[/Michel Buechner - Enchytraeenzucht/]]
** [[/Marcel Döpel - Residential Lab/]]
** [[/Johannes Altmann - Redesign für eine Hebamme, neue Webpräsentation/]]
** [[/Jan Grassegger & Daniel Plath - Anycook/]]

* Werkmodul 'Grundlagen Webentwicklung'
**[[/Wiebke Jahns - "This is what we mean, when we say..."/]]
**[[/Sebastian Johansson - Tweet State Of Mind/]]
**[[/Wünsche Hannes - Grat u Murdur/]]
**[[/Christian Sohn - "AbrakaHAMM - eine animierte Kinderkochshow"/]]
**[[/Marcus Glahn - Portfolio/]]
**[[/Stepan Boldt - Pappwand/]]
**[[/Lisa Fickenscher - ohrzucker/]]
**[[/Florian Froger - Portfolio/]]
**[[/Shayna Lauer - Portfolio/]]
**[[/Martin Pabsdorf - Portfolio/]] *
**[[/Stefanie Meyer - Portfolio/]]
**[[/Christoph Römer - Architekt Franz Römer/]]
**[[/Ulrike Schmidt - Portfolio Udo Keck/]]

'''17:00 Schlusswort'''

IFD:InterfaceEntwicklung2011/Kursplan

2012-01-11T16:21:37Z

Mago8031: /* Kursplan */

==Kursplan==

'''1. Veranstaltung'''
19. Okt. 2011

'''2. Veranstaltung'''
26. Okt. 2011
* Animation CSS3, JS, Video & PNG-Sequenz (Gabriel)

'''3. Veranstaltung'''
2. Nov. 2011
* CSS-Frameworks: PHP, Less oder Sass (Daniel S.)

'''4. Veranstaltung'''
9. Nov. 2011
* [[Canvas (Anastasiya)]]

'''5. Veranstaltung'''
16. Nov. 2011
* Website Optimierung: HTML, SEO, pagespeed (Rheinhard)

'''6. Veranstaltung'''
23. Nov. 2011
* paper.js (Marcel D.)
* [[Media:Paperjs_marcel_20111123.zip|Daten Paper.js Marcel]]

'''7. Veranstaltung'''
30. Nov. 2011
* [[Media:Paperjs_rennspiel_material_20111130l.zip|Race Material]]
* anycook (Daniel P. & Jan G.)

'''8. Veranstaltung'''
7. Dez. 2011
* Konzeptpräsentation
* jQuery Basics (Antje D.)

'''9. Veranstaltung'''
14. Dez. 2011
* jQuery Plugins (Georg M.)
* Beispiel: http://webuser.uni-weimar.de/~dbsx5751/interface/

'''10. Veranstaltung'''
4. Jan. 2011
* CMS: Was? Wieso? Warum? (Bastian B.)
* [[Media:Wordpress_material_20120104.zip|Wordpress Material]]

'''11. Veranstaltung'''
11. Jan. 2011
* Client-Side Storage – lokale Datenbanken (Tobias W.)

'''12. Veranstaltung'''
18. Jan. 2011
* Interfaceoptimierung für mobile Endgeräte (Sven S.)
* Dojo Toolkit (modulare JavaScript-Bibliothek) (Johannes A.)

'''13. Veranstaltung'''
25. Jan. 2011
* Firebug, etc. (Michel B.)
* Kursinterne Zwischenpräsentation

'''Endpräsentation'''
3. Feb. 2011

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T13:57:06Z

Mago8031: /* Craig Taborn - Patterns in Audio (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

=== Craig Taborn - Patterns in Audio (Johannes Konrad Altmann) ===

<videoflash type="youtube">OjJJx-JI37o</videoflash>

Craig possesses that trait so valued by listeners and leaders alike (and sometimes not, by the less self-assured of them) throughout the history of the music; that is, they find themselves pointing their ears towards him throughout recordings and performances to find out what remarkable phrase, color, texture or idea he's going to come up with- invent even- next.

Craig's knack for multi-level, textural thinking, both in composition and execution, reveals itself to the listener in acoustic, electric and electronic settings and should continue to place him at the very center of modern jazz reinvention for many years to come.

[http://www.allaboutjazz.com/php/article.php?id=319 Quelle]

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T13:51:51Z

Mago8031: /* Craig Taborn - Patterns in Audio (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

=== Craig Taborn - Patterns in Audio (Johannes Konrad Altmann) ===

<videoflash type="youtube">OjJJx-JI37o</videoflash>

Craig possesses that trait so valued by listeners and leaders alike (and sometimes not, by the less self-assured of them) throughout the history of the music; that is, they find themselves pointing their ears towards him throughout recordings and performances to find out what remarkable phrase, color, texture or idea he's going to come up with- invent even- next.

[http://www.allaboutjazz.com/php/article.php?id=319 Quelle]

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T13:45:30Z

Mago8031: /* Craig Taborn - Patterns in Audio */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T13:43:11Z

Mago8031: /* House Of Cards (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

=== Craig Taborn - Patterns in Audio ===

<videoflash type="youtube">OjJJx-JI37o</videoflash>

Craig possesses that trait so valued by listeners and leaders alike (and sometimes not, by the less self-assured of them) throughout the history of the music; that is, they find themselves pointing their ears towards him throughout recordings and performances to find out what remarkable phrase, color, texture or idea he's going to come up with- invent even- next.

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T13:40:00Z

Mago8031: /* House Of Cards (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards (Johannes Konrad Altmann) ===

<videoflash type="youtube">OjJJx-JI37o</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T12:55:23Z

Mago8031: /* House Of Cards (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards (Johannes Konrad Altmann) ===

<videoflash type="vimeo">7489094</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T12:54:55Z

Mago8031: /* House Of Cards (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards (Johannes Konrad Altmann) ===

<videoflash="vimeo">7489094</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T12:52:41Z

Mago8031: /* House Of Cards (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards (Johannes Konrad Altmann) ===

from url http://www.youtube.com/watch?v=8nTFjVm9sTQ
<videoflash>8nTFjVm9sTQ</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T12:48:00Z

Mago8031: /* House Of Cards (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards (Johannes Konrad Altmann) ===

from url http://www.youtube.com/watch?v=8nTFjVm9sTQ
<videoflash type=youtube>8nTFjVm9sTQ</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T12:46:32Z

Mago8031: /* House Of Cards (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards (Johannes Konrad Altmann) ===

from url http://www.youtube.com/watch?v=4lhyH5TsuPg
<videoflash type=youtube>8nTFjVm9sTQ</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T12:38:44Z

Mago8031: /* House Of Cards */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards (Johannes Konrad Altmann) ===

<videoflash type=youtube>8nTFjVm9sTQ</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T12:38:24Z

Mago8031: /* Telepresent Water (Johannes Konrad Altmann) */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

<flashmp3 id="MsJohnSoda">MsJohnSoda.mp3</flashmp3> 

''' Description of Music: '''
The music consists of several layers that are layered one after another, so that the music increases.

*soft, high, fading single tones ->from beginning till 4th seconds
*+
*-louder, deeper, fading single tones -> from 4th second till 16th seconds +

*lasting note with higher sequence -> from 16th second +

*another lasting note with deeper sequence -> from 19th second

*--> changing with higher sequence note by turn every 3rd second -> till 59th second
*+
*deep lasting note - instead of changing tones -> from 59th second till 121st second
*+

*very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

*two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second +

*unregularly short cut and deep tones -> from 121st second
*singing voice of a woman, fading -> from 143rd second +

*singing voice of a woman, clear and louder -> from 204th second
*+
*kind of irregular beat -> from 204th second

===House Of Cards===

<videoflash type=youtube>8nTFjVm9sTQ</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T09:46:04Z

Mago8031: /* Homework */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water (Johannes Konrad Altmann) ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

'''Description of Music'''

-soft, high, fading single tones ->from beginning till 4th seconds

+

-louder, deeper, fading single tones -> from 4th second till 16th seconds

+

-lasting note with higher sequence -> from 16th second

+

-another lasting note with deeper sequence -> from 19th second

--> changing with higher sequence note by turn every 3rd second -> till 59th second

+

-deep lasting note - instead of changing tones -> from 59th second till 121st second

+

-very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

-two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second

+

-unregularly short cut and deep tones -> from 121st second
-singing voice of a woman, fading -> from 143rd second

+

-singing voice of a woman, clear and louder -> from 204th second

+

-kind of irregular beat -> from 204th second

===House Of Cards===

<videoflash type=youtube>8nTFjVm9sTQ</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-13T09:44:42Z

Mago8031: /* Homework */

= 28/10 =

== Homework ==

Check the links below. Choose one or two projects, works you really like and write a short text about it. (why you like it, what is interesting for you and what happens there. Feel free to look at other sources as well. We'll have a look at them tomorrow.

http://processing.org/exhibition/ 
http://www.openprocessing.org/ 
http://vimeo.com/groups/processing 
http://www.visualcomplexity.com/vc/ 
http://www.creativeapplications.net 
http://www.complexification.net 

=== Patawat Phamuad ===

'''project:'''
 
Balldroppings

[[File:balldroppings.png|500px|link=http://balldroppings.com/js/]]
 ''click at above picture to go to application.''

'''description:'''
 
This web-based application is constructed from Processing.js, a part of Processing language which is able to run on browser. The most interesting point of this project is to focus on both 2 of 4 approaches to interactive design.

For the first approach "User-Centered Design" , the designer tried to make a simple drum without any complicated set of drum pieces. Only lines and circles working with physic law are able to initiate a set of user-based instrument. Importantly, the user foresees what is supposed to be happened without any instructions.

Furthermore, the second approach focuses on "Activity-Center Design" . The system flows until the user press "close" button on web browser. The system has no fixed ending. Thus, the designer designed tool for actions. In addition, each action directly depends on each own person's experience and mental processes. (Exteriorized:-interesting in what people do)

'''system & technology:'''
 
I.application processes active to each order <balls & lines> 
II.Users active to application process. <dragging line & outputsound> 
III. Processing.js + html5

'''referred:'''
 
Dan S. Designing for interaction. ''The four approaches to interaction design''. (2001) 
[http://www.michelepasin.org/techblog/2010/02/18/processing-js-iprocessing-javascript-does-everything-for-you/ Processing.js, iProcessing: javascript does everything for you! ]

=== everyware, Soak===

<videoflash type=vimeo>27158491|549|309</videoflash>

Soak is an empty canvas made of an elastic material. The moment you touch it the canvas gets virtually soaked with color. 
A Kinect detects any deformation of the elastic surface and passes this data to Processing, which then simulates virtual drops of dye. 
What I like about this project is the combination of digital tools with analog materials and the beauty of being so simple. The simulation of watercolor on the other hand is very interesting as well. (*cellular automata)

// [[Sebastian Wolf|Sebastian]]
 

=== Substrate ===
by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/index.php]

http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg 
''0001 iterated substrate'' by Jared Tarbell [http://www.complexification.net/gallery/machines/substrate/substrate0001.jpg]

'''Substrate''' is a piece of generative art written in processing that creates a landscape looking a lot like urban plans.

At the start of the program a couple of straight black lines are placed randomly on the canvas. They expand during the program, each line growing other lines at right angle but at random positions and at random times. This process is repeated for the newly grown lines. The expansion of a line stops when it collides with another line.

Each line has a shadowish colouring of variable hue and amplitude to the left of the line's growing direction.

Due to the different angles of the starting lines the growing image consists of distinguishable parts that could resemble city districts if the image was compared to an urban plan.

'''Substrate''' seems particularly interesting as it creates beautiful patterns using a rather simple algorithm.

(md)

=== Alexander Gustke ===

'''OASIS'''
 
http://everyware.kr/portfolio/contents/09_oasis/imgs/main.jpg
 
http://everyware.kr/portfolio/contents/09_oasis/
 
 

'''Was ist OASIS?'''

In OASIS hat der Benutzer die Möglichkeit mit einer virtuellen Unterwasserwelt mit allen möglichen Tieren die dort leben zu interagieren.

Basis ist ein Touchscreen der vollständig mit schwarzem Sand bedeckt ist. Wenn der Sand zur Seite geschoben wird und freie Stelle entstehen, bildet sich in diesen eine kleine Welt voller Fische, Seesterne und Quallen. Durch das Wegschieben des Sandes entsteht eine erweiterte Welt in der sich dann mehr Fische und andere Tiere bilden können. Das Verkleinern der Welt führt dazu, dass sich alle Tiere den engeren Platz teilen müssen. Weiterhin reagiert die Welt auf Hindernisse, wie zum Beispiel Steine. Diese können inmitten einer freien Stelle platziert werden, welche die Unterwassertiere dann versuchen zu umschwimmen.

Was mich zu den oben genannten Dingen zusätzlich interessiert ist, dass Fische Schwärme bilden können und versuchen innerhalb des Schwarms nicht miteinander zu kollidieren.

=== Julia Putscher ===

'''Project:'''
 
Algorithm Art Code

[[File:tr_lines_example.png|500px|link=http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines]]
 ''click at above picture to go to application.''

'''Description:'''
 
This project was made by Joao Martinho Moura with Processing.js.
Processing.js is the sister project of Processing and designed for the web. It makes makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Processing.js allows Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.

'''Algorithm Art Code''' is a generative system that creates compositions of lines and even sculptures. It is able to cause multiple results and may even produce art.
By clicking into the interactive frame and moving the mouse you can influence the appearence of the creating composition.
There are six different types of the "Algorithm Art Code": TR-Lines (Transversal Lines), Closed Lines, Infinite-Boils, Perls and Sine-Paths.
I think this project is interesting because I like interactive surfaces that "act" according to a human's behavior and through which you can influence the result of the process.

'''Links:'''
 
*http://www.jmartinho.net / Webpage of Joao Martinho Moura
*http://projects.jmartinho.net/#1577272/Html5-Algorithm-Art-Code / Examples for Algorithm Art Code

=== Dianna Mertz ===

http://senseable.mit.edu/nyte/images/01%20nyte%20-%20globe%20encounters.jpg
[http://senseable.mit.edu/nyte/ New York Talk Exchange]
 
[http://senseable.mit.edu/nyte/movies/nyte-globe-encounters.mov Globe Encounters]

This animated infographic illustrates the flow of information in real time between I.P. addresses in New York City and elsewhere around the world. The greater the illumination of each arc, the greater the internet traffic flow between NYC and that particular city within the last day. This project appeals to me mostly because it successfully demonstrates information consumption — a personal area of interest. This is also a great way to relay the usage of I.P. address data. I only wish that it wasn't limited to NYC; ideally, we'd see how the info traffic consumption flowing from NYC compares to other cities around the world.

===Jelena Djokic===

http://www.visualcomplexity.com/vc/images/725_big01.jpg

http://xiaoji-chen.com/blog/2010/map-of-paris-visualizing-urban-transportation/

The work is a mental map of the city of Paris, not related to the proportional distancies of diferent points to the city center, but to the cost it takes to get there.

Touch DJ

http://vimeo.com/groups/processing/videos/30735367/

The project, by which the user interface and sound come to dialog. I find it interesting because it is about a usual case of influencing sound by picking diferent buttons from the board, but the both sound and user interface influence changes to each other. Otherwise people developed a new tool for themself, making a ppeace of work. Or were oposite?

=== Life Support Systems - Vanda ===

http://www.visualcomplexity.com/vc/images/40_big01.jpg

The system analyzes electrical signals from the vanda hybrida orchid and generates a virtual model of this "language". It then produces similar signals based on the learned model, even after the orchid's death. In this way, the plant's spirit somehow is preserved in a digital system.

http://www.visualcomplexity.com/vc/images/40_big02.jpg

''' Link: '''http://www.visualcomplexity.com/vc/project.cfm?id=40
 
''' Tristan Weis '''

=== Andreas Dietrich ===

'''E7'''

E7 from http://www.openprocessing.org/visuals/?visualID=40859 is a little game to play (in German XXO should say everything). You need to draw the things alone, but so you can change the number of rows and colons. With a left click (or the left mouse button is pressed) you draw a horizontal line, with the right mouse button you draw a vertical line. If you drag the mouse you can draw the O or the X (or whatever you want).

[[File:Processing_E7_AD.png]]

 
=== JOHANNES KONRAD ALTMANN ===
 
<videoflash type=vimeo>26383732|549|309</videoflash>

VOID is a conceptional processing magazine for the iPad. It is aimed to bring coding closer to designers, with focus on enhanced user integration and personalization with a strong visual approach.

The magazine app features sections where the reader is able to explore projects, learn about other processing artists, manipulate source code live inside the app and immediately see the changes highlighted in the code.

Users can save their modified versions of a sketch, screenshots or short videos to a custom dropbox folder that is linked to the app. It is also possible to share this data via facebook, twitter and email.

Idea, Concept and App-Layout: Natalie Hanke
Camera and Postproduction: Daniel Oliveira Carneiro
Music: Pivot — Make Me Love You

For more information:
*http://cargocollective.com/coffeemakescreative
*http://cargocollective.com/coffeemakescreative/1736030/VOID
*http://www.danielcarneiro.eu/
*http://www.pvtpvt.net/

Sources for text, images and code:
*http://www.creativeapplications.net/
*http://www.generative-gestaltung.de/
*http://www.openprocessing.org/

=== Lu JIN ===
[[File:SandTravelerPRN2.jpg]]
*Name: Sand Traveler
*Link:http://www.complexification.net/gallery/machines/sandTraveler/
*Description: use single dot to create a three dimensional figure in the 2d plane.
*Reason: The sand pictures change frequently and leave me a great expectation for the next picture, when the dot stops.

=== Jan Schepanski ===

http://pingmag.jp/images/article/tokyodesignweek2006_30.jpg

'''Shadow Monsters'''

Wer kennt sie nicht aus Kindertagen: Die illustren Schattenspiele. Die Hand in gewissem Abstand vor eine Lichtquelle gesetzt und los ging der Spaß. Dank moderner Technik lassen sich die aus Hand geformten Monster nun zum Leben erwecken!
Technisch wird es umgesetzt, indem man die jeweiligen Hände filmt, deren Bewegungen samt Silhouette erfasst und mit Hilfe eines Beamers dann die Hände in kleine Monster verwandelt.

http://www.youtube.com/watch?v=tSJTTkwrZ9s

http://www.youtube.com/watch?v=g0TOQo_7te4

http://worthersoriginal.com/viki/#page=shadowmonsters

= 29/10 =

== Homework ==

Look for a visual pattern on your way home, at your house, somewhere around you. that can be: a textile, the pattern on the sidepath, a pattern in the sky, a pattern on your wallpaper. Make a photo or a sketch.

Patterns are always repetitions of elements. The elements are sorted in a certain way. That’s the rhythm. try to describe the rhythm. cut your pattern in its smallest elements. How many elements do you have. in which way are they composed? write a short text about the composition.

=== cobblestone ===

http://farm6.static.flickr.com/5280/5895055290_ebde12b4b0_m.jpg 
''cobblestone'' (photo cc-by-sa by a2t [http://www.flickr.com/photos/a2t/])

Cobblestone pavements are often laid in interesting patterns like the one shown above.

The stones are placed in arcs which are repeated to the inside and outside of the arc's circle and in similarly oriented arcs at their endpoints.

Due to the irregularities in the stone's sizes a random component is added to the pattern, making it harder to decode while still keeping it repetitive.

'''Pattern definition''':

[[Image:Md-processing-cs-1.png|thumb|cobblestone pattern]]

The pattern consists of basically one shape, a square.
The squares are arranged in rows and columns as shown in the image on the right (one row highlighted in green, the two columns separated in red). The tricky part is that within each row/column the stones are placed along an arc while being rotated according to their position on the arc.

The radius of the arc is determined by the size, number and spacing of the squares used to form one row/column segment of the pattern and will stay the same during the whole drawing process. The position of each square on an arc is determined by its width and the predefined spacing. The orientation of each square is determined by its position on the arc, starting with -45 degrees and being rotated clockwise by 90/(n-1) degrees (where n is number of squares on each arc; this is also the angle between the centers of two stones on the arc).

The pattern can be drawn with three nested loops:
* ONE looping through each row, setting the center Y for the arc's circle (starting with the position of the square closest to the bottom (highest value) plus the radius and being decreased by the square's height and predefined vertical spacing during each run)
** TWO looping through each column, setting the center X for the arc's circle (starting with the of distance of the leftmost square to the center of the arc's circle and increasing it by two times that distance during each run)
*** THREE looping through each stone, going along the arc in previously determined steps and placing a square in it's proper rotation (-45 degrees incremented by the length of the step during each run).

Each stone shall of course be drawn only if inside the pattern's bounding box and the first stone of each column is only drawn for the first column as it is the same as the last stone for all following columns.

(md)

=== Growing Ivy ===

[[File:tree_all_elements.jpg|600px]]

The pattern of growing ivy is a pretty dense one. The l[[http://www.example.com link title]]eaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

--Julia Putscher

=== Textile on a Chair ===

[[File:Chair4.jpg]]

The textile pattern on this chair has alternating vertical stripes. Some of these stripes are solid colors; others have patterns within them. Within the patterned stripes, a few have vertically stacked repeating elements. One set has a floral pattern sitting alone a line that resembles a sine wave. The floral pattern mirrors itself along the vertical axis. 
Color plays an important role in this textile pattern, as the plain black stripe is consistently placed between the two main alternating floral stripes. The black stripe contrasts sharply with the flowery pastels. 
--Dianna Mertz

=== Spider ===

[[File:Spider0.jpg‎]]

This is the spider on the white wall. It has two antennas and 8 feet, 3 long and 5 short feet. The most part of it is symmetrical. I think it can be realized through rotation and mirror effects.

--Lu Jin

=== Case===

[[File:Upperpartofaharddrive.jpg‎|700px]]

A sketch of a part from a hard drive case. It consists of two lines of a different length and a point. Put this in a line, one line, one point, one line, three points, and in the next line just mirror it.

Raphael K.

=== My midnight pizza===

[[File:pizza_surface2.gif‎|300px]]

Do you like pizza? yes I like it. Pizza is always founded as circle big shape background then come after with a lot of edible stuffs on second layer or surface. Your favorite pizza always decorates with tomatoes, concentrated-tomatoes sauce, cheese, pepperoni, paprika, salami, and so on.
They are laid on the surface with random position but with sense of human that drop anythings on surface with an appropriate position:- not too far, no too close to each other. More,each will be laid on each other layer by layer.

-PATawat. P-

=== Plattenbau ===
http://farm6.static.flickr.com/5305/5597569756_aff9d2942c_m.jpg 
(image © Oleg Borodin [http://www.flickr.com/photos/odeonmelancholy/5597569756]) 

Plattenbauten, or prefabricated houses always shape patterns because of their construction and design, which aims to make them cheap, quick and rather easy to build. They consist of ready-made standardized parts, which all look basically the same and form quite repetitive patterns automatically.

// [[Sebastian Wolf|Sebastian]]

=== Sofakissen ===

[[File:Sofakissen.jpg]]

(Farben auf dem Bild nicht originalgetreu...)

Auf dem Bild zu sehen ist das Muster von einem Sofakissen. Dabei kann das Muster im ersten Schritt grob als parallel aneinander liegende Rechtecke beschrieben werden. Im zweiten Schritt kann man sagen, dass neben jedem nicht gelben Rechteck ein gelbes Rechteck ist, welches nicht weiter zu unterteilen ist. Diese gelben Rechtecke haben immer dieselben Abmessungen. Die Muster in den Rechtecken zwischen zwei gelben Rechtecken alternieren in zwei Varianten.

Die erste Variante ist wie folgt aufgebaut: Der Rand längs des Rechtecks besteht aus gelben kleinen Quadraten, wobei zwischen zwei Quadraten ein roter Zwischenraum von der Breite eines halben Quadrates ist. Die Seitenlänge jedes Quadrates ist ungefähr ein Fünftel der Breite des gelben Rechtecks. Zwischen diesem Rand aus Quadraten ist das entstehende Rechteck rot, wie der Zwischenraum der Quadrate. Das rote Rechteck ist etwas größer als die gelben Rechtecke.

Die zweite Variante unterscheidet sich zur ersten nur in dem Punkt, dass der Zwischenraum zwischen dem Rand aus Quadraten nur noch ein Drittel so groß ist, und die Farbe mehr ins Orange geht.

Alles in Allem kann man sagen, dass dieses Muster aus insgesamt 5 Elementen besteht.

|Alexander Gustke|

===Jelena Djokic===

A tent pattern

[[File:Pattv.jpg|400px]]

Though is the composition of the pattern simple central structure, the complexity comes from the structure and the way, the patterns with each other connected are. This provokes 3dimensionality, on the way, that putting facets together by different angles provokes the look of broken lines and broken shapes.

===Andreas Dietrich: Pavement===
Pavements have often paving stones. The are many patterns available. In this example the pavement consists of two rectangle. Both have the same heights. The bigger one has a width of the height times two. The width and the height of the smaller one is equal.

To Draw this shapes: 
Begin with the bigger one. Place three of them next to each other. Go the height of the rectangles downwards and to the rectangle, which is on the left. Begin on the left side with the smaller rectangle. Place two bigger rectangles next to it. Finally place a new smaller rectangle next to one of them.
Go the height of the rectangles downwards and to the rectangle, which is on the left.
Repeat this steps, if you want.

[[File:ProcessingStone.JPG]]

 
 

===Tristan Weis: Couch cloth pattern===
[[File:Couchclothpattern.jpg|400px]]

The pattern consists of very small strings. There are strings from the bottom to the top, and from left to right. Running from one side to another, every few millimeters a batch of strings runs over the crossing batch; after that it runs under the next one; over the one after - and so on. The batches running from left to right seem slightly thicker, forming a diversified web with the thinner ones from top to bottom.

''Sketch:'' 
[[File:Couchclothpatternsketch.jpg|400px]]

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|left|thumb|Click me!]] 

This pattern provides an illusion of depth due to use of simple 2D geometry (rhombus) 
with different shades that matches with our conception of how three-dimensional 
shapes must look like as soon as light is getting reflected off their surfaces 
from a specific angle.

===Jan Schepanski: Schneefall===

http://www.buecherundbilder.de/images/schneefall.jpg

''Wie im Flug schritten sie durch des Winters Flockenflug mit frohlockend lockrem Lockenhaupt und so war schnell klar wer von beiden keine schützend Mütze trug.''

So wie jede Schneeflocke nach dem Regelwerk der Natur gebildet wird, so segeln sie dahin, getrieben von Wind, Schwerkraft und der Lust des Tanzes.

===Johannes Konrad Altmann===

[[File:Asymmetrie_1.jpg|350px]] 
[[File:Asymmetrie_2.jpg|350px]]

'''Asymmetric Balance!'''

Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance. There is no simple formula for achieving balance in asymmetrical balance (hence the term informal balance) so the designer must sense whether or not the composition is balanced. This is where your sense of balance really comes into play.
 
The composition either looks like it is balance or it does not. Where does your attention goes when you look at an image? If it seems to wander around more or less evenly, there is probably balance. If you seem to always come back to the same area, and that is not the center of the composition, then the balance is suspect.
 
One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format. The effect is like confetti dropped on the area. There is balance because interest is evenly distributed, and there is unity. The problem is that everything is likely to seem too equal and hence too uniform. There is not enough variety and the design soon becomes boring.

= 11/11 =

== Homework ==

=== Textile on a Chair ===

[[File:Chair4.jpg]]

To write the code for this pattern, you could set the background fill to (0). Then, there could be one main "for" structure, that continually repeats itself horizontally for the width of the window. Within this structure, there would be two sub "for" structures: A + B. The first (A) would feature the thicker main vertical set, and the second (B) would feature the thinner vertical set. Each set would be spaced roughly 1 inch (or x pixels) apart from each other.

For each of the two vertical sets, we could create a stack of lines of varying thicknesses on top of each other. The bottom layer would have the heaviest weight, and the top layers the lightest weight. Within each of the two sets, each line would be centered, so that an equal part of the line appears from both sides as we move towards the center of the vertical set. As we approach the center of each set, we would have to create:

A) The vertical sine wave mirrored upon itself vertically

and

B) The vertically stacked flowers

For A), we create a trigonometic (sine wave) function. Perhaps we use another "for" structure with a float + sin() function.

For B), we create yet another "for" structure, this time repeating an image along a vertical line.

--Dianna Mertz

=== Textile on Pizza Chilino ===

[[File:Joey_Pizza.png|400px]]

If we focus closely to this Chilio Pizza, we would see that the pizza contains with many layers. Each layer is decorated with vegetables, cheese and meat. However, the distance between each asset doesn't random itself, there is a hidden pattern which each edible lays far from each other by almost constant distance.

To make sketch of this pizza, we would follow these processes below:

1) Make a pizza flour base layer by drawing an ellipse and fill with cream or yellow color. '''Function''': ''ellipse()'',''fill()'' 
2) Put a concentrate tomato sauce by drawing another layer on top of pizza flour, after that, fill red color. '''Function''': ''ellipse()'',''fill()'', ''pushMatrix()'', ''popMatrix()'' 
3) Create salamis() function by drawing ellipses and put little white spots on around salamis' surface. '''Function''': ''ellipse()'',''fill()'', ''point()'', ''random()'' 
4) Spread salamis around the pizza with random() function BUT not further than pizza flour edge(2*PI*radian). Furthermore, we could use ''For loop'' or ''While loop'' iteration to identify a number of salamis we need. '''Function''': ''salamis()'', ''random()'',''constrain()'' 
5) Repeat 3) and 4) to drop more tomatoes, chilis, basils and mozarella cheese layer by layer. Moreover, we could rotate assets to make it more real pizza by rotating function. '''Function''': ''tomatoes()'', ''chilis()'', ''basils()'', ''mozarella()'', ''random()'', ''rotate()'' 
6) Enjoy your Pizza Chilino :)

--Patawat P.

===Florian Meyer: Fake 3D===
[[File:pattern_rhombus.jpg|400px]] 
One single cube consists of 3 rhombs which can be drawn simply by using the 
”beginShape()-endShape()” method. Besides, the values of their coordinates 
and colours depends on the angle of perspective from which we want to look 
at the cube. After that we have to make a row by using the 'for loop ' and 
another 'nested loop' for making the columns. As we can see in the image, 
each column underneath isn't placed exactly in same order as their previous 
ones are. There are shifted sideways by half the size of a single cube for 
each time the nested 'for loop' is calculating a further one. 

[[File:pattern_rhombus2.jpg|left|thumb|wrong!]]

We have to consider that moving the columns in only one horizontal direction 
will cause a bad looking stairway. To get rid of that, we have to find a way 
to turn the values from every 2nd counting step the nested loop does, into 
negative values instead of just adding them, so that each 2nd column is placed 
back to its original starting position. This can be done for example by declaring 
a new variable that is working as a multiplying operator and carries switching 
values of 1 and -1. 

[[File:pattern_rhombus3.jpg|left|thumb|fixed!]]

 
=== Sofakissen ===

[[File:sofakissen.jpg]]

Um dieses Muster zu beschreiben bräuchte man eine for-Schleife. Je nachdem wie oft sich das Muster wiederholen soll wird der Endwert festgelegt. Zum Beispiel auf 8. Diese Anzahl an Iterationen wird benötigt um das Muster einmal ohne Wiederholhung darzustellen.

Beginnen würde man beim ersten großen gelborangen Rechteck von links. Danach zeichnet man die kleinen Quadrate mit den roten kleinen Rechtecken dazwischen von oben bis nach unten. Dann das Orange Rechteck und dann wieder die kleinen Quadrate mit den roten kleinen Rechtecken. Jetzt folgt wieder das erste gelborange Rechteck. Danach wieder die kleinen Quadrate mit den kleinen roten kleinen Rechtecken. Jetzt folgt ein großes Rechteck und zum Schluss wieder die Quadrate mit den kleinen roten Rechtecken.

In einem Pseudocode könnte dies so aussehen:

''for: i=0; i<8; ++i'' 
''if: i mod 4 = 0'' 
''draw yellow-orange rectangle'' 
''if: i mod 4 = 1 or 3'' 
''draw little squares and a red rectangle between two of them <- from the top to the bottom'' 
''if: i = 2'' 
''draw orange rectangle'' 
''if: i = 6'' 
''draw big red rectangle'' 

===Sofastoff===
[[File:Couchclothpattern.jpg|400px]]
[[File:Couchclothpatternsketch.jpg|400px]]

Das Muster wird mit zwei ineinander greifenden for-Schleifen eingeleitet; eine für die horizontale und eine für die vertikale Wiederholung. Eine Variable wird bei jeder Ausführung der Schleife erhöht. Ist dieser Counter gerade, so werden vier parallele Linien von rechts nach links gezeichnet, deren Anfangs- und Endpunkte jeweils in Abhängigkeit zu den Schleifenvariablen stehen. Wenn der Counter ungerade ist, so werden in gleicher Weise fünf parallele Linien von oben nach unten gezeichnet.
Die parallelen Linien können auch in (zwei unterschiedliche) for-Schleifen gepackt werden, womit das Muster in insgesamt vier for-Schleifen aufgelöst wird.

int patternsize = 50;
int count = 0;

for (int ex = 0; ex <= width; ex = ex+patternsize)
{
count++;
for (int yp = 0; yp <= height; yp = yp+patternsize)
{
count++;
float test = pow(-1, count);
float linespacing = patternsize;
if (test==1)
{
for (int verti = 1; verti <= 4; verti++)
{
line(ex-(linespacing/20), (verti*linespacing/5)+yp, (linespacing+(linespacing/20))+ex, (verti*linespacing/5)+yp);
}
}
else
{
for (int hori = 1; hori <= 5; hori++)
{
line((hori*linespacing/6)+ex, yp-(linespacing/20), (hori*linespacing/6)+ex, (linespacing+(linespacing/20))+yp);
}
}
}
}

- Tristan Weis

=== Spider ===
[[File:Spider0.jpg‎]]

Most part of spider consists of symmetrical patterns. The definition of size (width, height, P3D) can let the patterns move around the y-axis and present as the mirror effects. Looking closely to the spider, it can be divided into 4 parts, antenna, head, body, and leg, which are mostly made up by circles and lines.

1) The antenna is not a regular pattern,use the shape() to draw on of this and then move it around the Y-axis for (PI).
 '''Function''': ''beginShape();endShape();rotateY ();'' 
2)The head of spider is very simple, only a ellipse.
 '''Function''': ''ellipse(), fill()'' 
3) body can also be seen as collection of ellipse. Two big ellipse are surrounded by 6 small ellipses.
 '''Function''': ''ellipse ();fill();for(){};rotate();'' 
4) The spider has 8 legs, 3 long and 5 short feet. Use for(){} to copy the lines and make it turns in the certain angle.
 '''Function''': '' for(){};line();strokeWeight();rotate ();pushMatrix();popMateix();'' 
——Lu

=== Julia Putscher ===

==== Growing Ivy ====

[[File:tree_all_elements_changed.jpg|800px]]

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side.
The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

==== Processing Codes For Similar Patterns ====

===== First Sketch =====
[[File:green_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(600,300);
background(255);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

for(int i=0; i<10; i++)
{
fill(0,255,0,t);
t = t+10;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Second Sketch =====
[[File:black_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0;

void setup()
{
size(600,300);
background(0);
smooth();
}

void draw()
{
strokeWeight(2);
stroke(255);

for(int i=0; i<10; i++)
{
fill(255,255,255,t);
t = t+20;
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x+40, y);
vertex(x+40, y+30);
vertex(x, y+30);
endShape();
y += 40;
}
y = 0;
x += 30;
}
}

===== Third Sketch =====
[[File:layered_pattern.jpg]]

int x = 0;

int y = 0;

int t = 0; //color transparency

void setup()
{
size(400,300);
background(100);
smooth();
}

void draw()
{
strokeWeight(0.25);
stroke(0,255,0);

pushMatrix();
scale(0.5);
translate(10,300);
rotate(150);
for(int i=0; i<10; i++)
{
fill(0,255,0,50);
for(int j=0; j<10; j++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-77,249);
scale(0.5);
rotate(150);
for(int k=0; k<10; k++)
{
fill(0,255,255,50);
for(int l=0; l<10; l++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();

pushMatrix();
translate(-137,327);
scale(0.5);
rotate(150);
for(int h=0; h<10; h++)
{
fill(255,255,0,50);
for(int g=0; g<10; g++)
{
beginShape(QUAD_STRIP);
vertex(x, y);
vertex(x, y+40);
vertex(x+30, y+40);
vertex(x+30, y);
endShape();
y += 40;
}
y = 0;
x += 30;
}
popMatrix();
}

=== Andreas Dietrich ===
Sketches for the practice homework:
===== First Sketch =====
[[File:Homework_AD_1.png]]
int dia=50; 
int innerDia=150; 
int steps=30; 
int steps2=30; 
int steps3=30; 

int offset1=0; 
int offset2=10; 
int offset3=20; 

size(900, 600);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);
smooth();
noStroke();
fill(255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(150);
beginShape();
for (int i=0; i<360/steps2;i++) {
vertex(sin(radians(i*steps2+offset2))*dia, cos(radians(i*steps2+offset2))*dia);
vertex(sin(radians(i*steps2+steps2/2.0+offset2))*innerDia, cos(radians(i*steps2+steps2/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0);
beginShape();
for (int i=0; i<360/steps3;i++) {
vertex(sin(radians(i*steps3+offset3))*dia, cos(radians(i*steps3+offset3))*dia);
vertex(sin(radians(i*steps3+steps3/2.0+offset3))*innerDia, cos(radians(i*steps3+steps3/2.0+offset3))*innerDia);
}

endShape(CLOSE);
popMatrix();
}
}

===== Second Sketch =====
[[File:Homework_AD_2.png]]
int dia=50; 
int innerDia=150; 
int steps=60; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

void setup() {
size(900, 600);
smooth();
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

===== Third Sketch =====
[[File:Homework_AD_3.png]]

int dia=50; 
int innerDia=150; 
int steps=30; 

float offset1=0; 
float offset2=10; 
float offset3=20; 

float CONST_OFFSET1=0; 
float CONST_OFFSET2=10; 
float CONST_OFFSET3=20; 

float speed1=1; 
float speed2=0.5; 
float speed3=0.7; 

float scaleVal=0.1; 
float currentScale=1; 
float toScaleVal=1; 

void setup() {
size(900, 600);
smooth();
frameRate(12);
noStroke();
}

void draw() {
background(255);
for (int k=0;k<3; k++) {
for (int l=0;l<2; l++) {
pushMatrix();
translate(k*innerDia*2+innerDia, 2*innerDia*l+innerDia);

if (scaleVal>0) {
if (currentScale>=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.1;
}
else {
scaleVal=-0.1;
}
}
}

if (scaleVal<0) {
if (currentScale<=toScaleVal) {
toScaleVal=random(2.0)-1.0;
if (toScaleVal>currentScale) {
scaleVal=+0.01;
}
else {
scaleVal=-0.01;
}
}
}
currentScale+=scaleVal;
scale(currentScale);
fill(255, 0, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset1))*dia, cos(radians(i*steps+offset1))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset1))*innerDia, cos(radians(i*steps+steps/2.0+offset1))*innerDia);
}
endShape(CLOSE);

fill(0, 255, 0);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset2))*dia, cos(radians(i*steps+offset2))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset2))*innerDia, cos(radians(i*steps+steps/2.0+offset2))*innerDia);
}
endShape(CLOSE);

fill(0, 0, 255);
beginShape();
for (int i=0; i<360/steps;i++) {
vertex(sin(radians(i*steps+offset3))*dia, cos(radians(i*steps+offset3))*dia);
vertex(sin(radians(i*steps+steps/2.0+offset3))*innerDia, cos(radians(i*steps+steps/2.0+offset3))*innerDia);
}
endShape(CLOSE);
offset1+=speed1;
offset2+=speed2;
offset3+=speed3;
if (offset1> steps+CONST_OFFSET1) {
offset1=CONST_OFFSET1;
}
if (offset2> steps+CONST_OFFSET2) {
offset2=CONST_OFFSET2;
}
if (offset3> steps+CONST_OFFSET3) {
offset3=CONST_OFFSET3;
}
popMatrix();
}
}
}

= 13/11 =

== Homework ==

=== Florian Meyer ===

<videoflash type=vimeo>31395235|549|309</videoflash>

description will be added later

=== crossroads with traffic lights ===

Crossroads with traffic lights show interesting motion patterns. While cars are approaching the crossroads all the time, it is determined by the state of the traffic lights whether they are allowed to pass through or not.

(md)

=== Telepresent Water ===

<videoflash type=vimeo>25781176|549|309</videoflash>

This remote, mechanical simulation of a wave is a plane composed of connected lines that mesh together into a larger quadrant. Although the movement changes in real time, we can see that, in general, the movement begins in one of the corners and follows a trigonometric pattern – much like a sine wave. The quadrant continues to follow this wave, although the frequency of the wave changes.

--Dianna Mertz

===CrimeWave ===

Crimewave is the music made by Cystal Castles. There are many fancy cluster of music loops in this song. In addition, the more song is progressing, the more music assets are added to each loop overlaply. Furthermore, they apply a synthesized filter to vocal. Deep bass rhythm runs in the background.

Sound samples: 

Crimewave-Cystal Castles<flashmp3 id="Frosty the snowman">crimewave.mp3</flashmp3> 

--Patawat P.

=== Julia Putscher ===

'''Description of Music'''

-soft, high, fading single tones ->from beginning till 4th seconds

+

-louder, deeper, fading single tones -> from 4th second till 16th seconds

+

-lasting note with higher sequence -> from 16th second

+

-another lasting note with deeper sequence -> from 19th second

--> changing with higher sequence note by turn every 3rd second -> till 59th second

+

-deep lasting note - instead of changing tones -> from 59th second till 121st second

+

-very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop

-two high notes: first = clear and second = bit higher + fading; changing by turn-> from 121st second

+

-unregularly short cut and deep tones -> from 121st second
-singing voice of a woman, fading -> from 143rd second

+

-singing voice of a woman, clear and louder -> from 204th second

+

-kind of irregular beat -> from 204th second

===House Of Cards===

<videoflash type=youtube>8nTFjVm9sTQ</videoflash>

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Origin by RADIOHEAD

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T21:06:29Z

Mago8031: /* Johannes Konrad Altmann */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T21:05:44Z

Mago8031: /* Johannes Konrad Altmann */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T21:05:16Z

Mago8031: /* Johannes Konrad Altmann */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T21:04:55Z

Mago8031: /* Johannes Konrad Altmann */

File:Asymmetrie 2.jpg

2011-11-10T21:03:10Z

Mago8031:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Asymmetrie 1.jpg

2011-11-10T20:58:41Z

Mago8031:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T20:40:05Z

Mago8031: /* Johannes Konrad Altmann */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T20:31:07Z

Mago8031: /* Johannes Konrad Altmann */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T20:29:32Z

Mago8031: /* Johannes Konrad Altmann */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T20:29:00Z

Mago8031: /* Johannes Konrad Altmann */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-11-10T20:27:30Z

Mago8031: /* Homework */

GMU:Einführung ins Programmieren mit Processing/Seminar

2011-10-29T07:52:48Z

Mago8031: