Creative Coding lecture at Hochschule Trier in winter 2013. This material is mostly in german. Example code can be found on Github https://github.com/gwio/ccProcessingTrierWinter2013
This is an introduction to what creative coding is, and a review of projects in which artists use code as a medium.
More info about the workshop at
http://faltastico.tumblr.com/post/97959317872/last-week-i-did-a-two-day-creative-coding
StoryCode DIY Days Presentation - Creative Codingstorycode
Take a deep-dive into Creative Code with Mike Knowlton and Hal Siegel from StoryCode. As storytelling becomes more influenced by software development practices we all need to think, write, and design like creative technologists. Learn how this impacts the process of creating immersive media projects.
This workshop will explore new technologies, trends and projects using code creatively. We will explore off-the-shelf technologies as well as creative coding toolkits. We will also review examples of projects created with these new technologies and share successes and failures with each approach.
In addition to learning about new tools, expect to walk away with a new methodology for creating stories that are conceived and executed in the new model of “story as software”.
This is an introduction to what creative coding is, and a review of projects in which artists use code as a medium.
More info about the workshop at
http://faltastico.tumblr.com/post/97959317872/last-week-i-did-a-two-day-creative-coding
StoryCode DIY Days Presentation - Creative Codingstorycode
Take a deep-dive into Creative Code with Mike Knowlton and Hal Siegel from StoryCode. As storytelling becomes more influenced by software development practices we all need to think, write, and design like creative technologists. Learn how this impacts the process of creating immersive media projects.
This workshop will explore new technologies, trends and projects using code creatively. We will explore off-the-shelf technologies as well as creative coding toolkits. We will also review examples of projects created with these new technologies and share successes and failures with each approach.
In addition to learning about new tools, expect to walk away with a new methodology for creating stories that are conceived and executed in the new model of “story as software”.
Presented at HTML5 Developers Conference, April 2013 in San Francisco, CA.
Source available at:
https://github.com/jamesstoneco/canvas-only
Description from Conference:
Are you interested in creating cool games or interactions for web or mobile? Are you new to graphics programming and want to jump in and experiment. For many years artists and technologists have created amazing installations such as "Flight Patterns" by Aaron Koblin by using Processing (both a pre-processed language and api that sits on top of Java). Today the power and simplicity in syntax has been ported to the HTML5 Canvas in Processing.js.
Explore creating 2d and 3d graphics, data visualization, algorithmic art and image generation/alteration. Topics covered include: Processing.js, Paper.js, Three.js, Box2DJS and toxiclibs.js. Examples will be shown in Processing, JavaScript and CoffeeScript and benefits and drawbacks of each approach will be given. Creating User Interfaces in the Canvas with Zebra.js will be explained as well as strategies for coding for a game style loop.
Bio from Conference:
James is a media artist specializing in digital technology and fabrication. His work involves creating interventions with the biological to augment and expand the notion of what is cyborg. His work has been exhibited in the ZERO1 Art + Technology Biennial and the International Symposium on Electronic Art (ISEA) in Istanbul, Turkey. He is a past resident of the Institute for the Arts and Humanities, served as Faculty for Eyebeam, and was recognized as a University Fellow at the Pennsylvania State University, where he also taught game and creative coding techniques using Processing.
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...Till Nagel
Presentation at AVI 2014 (Conference of Advanced Visual Interfaces) of Touching Transport, an application that allows a diverse group of users to visually explore public transit data on a multitouch tabletop.
Find more information at http://senseable.mit.edu/visual-explorations-urban-mobility/touching-bus-rides.html
slide realtive al prossimo workshop di Limulo presso la Sala Dogana a Genova il 26/10/2013 in occassione del festival Electropark 2013 organizzato dai ragazzi del collettivo Forevergreen.fm.
Workshop "Prototipo 3, ovvero il diario di bordo per la realizzazione di una superficie interattiva". Un racconto delle idee, delle sfide, del percorso che da una proposta semiseria ha portato alla costruzione di un vero strumento polifunzionale, interattivo, divertente, colorato, rumoroso. A cura di Limulo Lab
qui il link per l'articolo completo sul sito: http://www.limulo.net/limulo-electropark-2013 .
Le web et ses standards évolue rapidement, très rapidement, trop rapidement...
Les navigateurs n'arrivent pas forcément à suivre le mouvement et les utilisateurs bloqués sans mise à jour encore moins. Il devient frustrant pour les développeurs de sans cesse entendre parler de nouveautés qu'il ne pourra pas utiliser avant des années.
Heureusement des outils comme Babel et PostCSS nous permettent d'enfin utiliser les dernières normes et de les laisser se préoccuper de la compatibilité ! Venez découvrir ces super outils qui vous permettront de développer dans le futur dès aujourd'hui !
Version courte pour le live coding
cf. city flows - A comparative visualization of bike sharing systemsTill Nagel
cf. city flows is a comparative visualization environment of urban bike mobility designed to help citizens casually analyze three bike-sharing systems in the context of a public exhibition space.
By Till Nagel and Christopher Pietsch.
Urban Complexity Lab, FH Potsdam
<a>http://uclab.fh-potsdam.de/</a>
This talk introduces the project and some of its goals and visualizations, and shows our design process in analyzing the data and designing the visualizations.
cf. city flows was exhibited at the Streams and Traces in November 2015 in Berlin. Find more information at http://streamsandtraces.com/
More information coming soon.
Teaching and Learning Experience Design – der Ruf nach besserer Lehre: aber wie?Isa Jahnke
Der Ruf danach, dass es bessere Lehre geben muss oder das Lehre verbessert werden sollte, ist nicht neu. Es gibt auch schon seit längerer Zeit Rufe danach, dass Lehre der Forschung in Universitäten gleichgestellt werden soll. (Und in den letzten Jahren ist in Deutschland auch einiges an positiven Entwicklungen geschehen, z.B. durch die Aktivitäten des Stifterverbands). Wie kann die Verbesserung der Lehre weitergehen? Fehlt etwas in dieser Entwicklung? Ja, sagt dieser Beitrag, der zum Nachdenken und Diskutieren anregen soll. In diesem Beitrag wird ein forschungsbasierter Ansatz zur Diskussion gestellt. Es wird argumentiert, dass Lehre nur dann besser wird, wenn es mit den Prinzipen der Wissenschaft und Forschung angegangen wird (d.h. gestalten, Daten erheben, auswerten, verbessern). Es benötigt neue Verhaltensregeln oder -prinzipien bei der Gestaltung von Lehrveranstaltungen. Das bedeutet zum Beispiel das Prinzipien der Evidenzbasierung und wissenschaftliche Herangehensweisen im Lehr-Lerndesign als zentrales Fundament etabliert werden sollte. Evidenzbasierung hier meint, folgt man der Logik der Forschung, dass Lehrveranstaltungen als Intervention verstanden werden. Mit dieser Intervention werden Studierende befähigt, bestimmte vorab festgelegte Kompetenzen zu entwickeln. Und die Frage, die sich bei jeder Lehr-Lernveranstaltung dann stellt, ist, ob diese Objectives bzw. Learning Outcomes auch erreicht wurden. Klar ist, dass die subjektive Lehrevaluation der Studierenden oder auch die Notengebnung nicht ausreichen, um diese Frage zu beantworten. Hierfür gibt es eine Reihe von Methoden, die genutzt werden können, z.B. aus dem Bereich des User- / Learning Experience Design. Diese Methoden umfassen unter anderem Usability-Tests, Learner Experience Studies, Pre-/Post-Tests, und Follow-up Interviews. Diese können zur Gestaltung und Erfassung von effektiven, effizienten und ansprechenden digitalen Lerndesigns verwendet (Reigeluth 1983, Honebein & Reigeluth, 2022).
Der Beitrag will die Entwicklung zur Verbesserung von Lehre weiter pushen. Neue Ideen in die Bewegung bringen. Als Gründungsvizepräsidentin der UTN hab ich die Chance, hier ein neues Fundament für eine gesamte Uni zu legen. Wird das Gelingen? Ist dieser Ansatz, den ich hier vorstelle, eine erfolgsversprechende Option dafür? Hier können sich die TeilnehmerInnen an dieser Entwicklung beteiligen.
Presented at HTML5 Developers Conference, April 2013 in San Francisco, CA.
Source available at:
https://github.com/jamesstoneco/canvas-only
Description from Conference:
Are you interested in creating cool games or interactions for web or mobile? Are you new to graphics programming and want to jump in and experiment. For many years artists and technologists have created amazing installations such as "Flight Patterns" by Aaron Koblin by using Processing (both a pre-processed language and api that sits on top of Java). Today the power and simplicity in syntax has been ported to the HTML5 Canvas in Processing.js.
Explore creating 2d and 3d graphics, data visualization, algorithmic art and image generation/alteration. Topics covered include: Processing.js, Paper.js, Three.js, Box2DJS and toxiclibs.js. Examples will be shown in Processing, JavaScript and CoffeeScript and benefits and drawbacks of each approach will be given. Creating User Interfaces in the Canvas with Zebra.js will be explained as well as strategies for coding for a game style loop.
Bio from Conference:
James is a media artist specializing in digital technology and fabrication. His work involves creating interventions with the biological to augment and expand the notion of what is cyborg. His work has been exhibited in the ZERO1 Art + Technology Biennial and the International Symposium on Electronic Art (ISEA) in Istanbul, Turkey. He is a past resident of the Institute for the Arts and Humanities, served as Faculty for Eyebeam, and was recognized as a University Fellow at the Pennsylvania State University, where he also taught game and creative coding techniques using Processing.
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...Till Nagel
Presentation at AVI 2014 (Conference of Advanced Visual Interfaces) of Touching Transport, an application that allows a diverse group of users to visually explore public transit data on a multitouch tabletop.
Find more information at http://senseable.mit.edu/visual-explorations-urban-mobility/touching-bus-rides.html
slide realtive al prossimo workshop di Limulo presso la Sala Dogana a Genova il 26/10/2013 in occassione del festival Electropark 2013 organizzato dai ragazzi del collettivo Forevergreen.fm.
Workshop "Prototipo 3, ovvero il diario di bordo per la realizzazione di una superficie interattiva". Un racconto delle idee, delle sfide, del percorso che da una proposta semiseria ha portato alla costruzione di un vero strumento polifunzionale, interattivo, divertente, colorato, rumoroso. A cura di Limulo Lab
qui il link per l'articolo completo sul sito: http://www.limulo.net/limulo-electropark-2013 .
Le web et ses standards évolue rapidement, très rapidement, trop rapidement...
Les navigateurs n'arrivent pas forcément à suivre le mouvement et les utilisateurs bloqués sans mise à jour encore moins. Il devient frustrant pour les développeurs de sans cesse entendre parler de nouveautés qu'il ne pourra pas utiliser avant des années.
Heureusement des outils comme Babel et PostCSS nous permettent d'enfin utiliser les dernières normes et de les laisser se préoccuper de la compatibilité ! Venez découvrir ces super outils qui vous permettront de développer dans le futur dès aujourd'hui !
Version courte pour le live coding
cf. city flows - A comparative visualization of bike sharing systemsTill Nagel
cf. city flows is a comparative visualization environment of urban bike mobility designed to help citizens casually analyze three bike-sharing systems in the context of a public exhibition space.
By Till Nagel and Christopher Pietsch.
Urban Complexity Lab, FH Potsdam
<a>http://uclab.fh-potsdam.de/</a>
This talk introduces the project and some of its goals and visualizations, and shows our design process in analyzing the data and designing the visualizations.
cf. city flows was exhibited at the Streams and Traces in November 2015 in Berlin. Find more information at http://streamsandtraces.com/
More information coming soon.
Teaching and Learning Experience Design – der Ruf nach besserer Lehre: aber wie?Isa Jahnke
Der Ruf danach, dass es bessere Lehre geben muss oder das Lehre verbessert werden sollte, ist nicht neu. Es gibt auch schon seit längerer Zeit Rufe danach, dass Lehre der Forschung in Universitäten gleichgestellt werden soll. (Und in den letzten Jahren ist in Deutschland auch einiges an positiven Entwicklungen geschehen, z.B. durch die Aktivitäten des Stifterverbands). Wie kann die Verbesserung der Lehre weitergehen? Fehlt etwas in dieser Entwicklung? Ja, sagt dieser Beitrag, der zum Nachdenken und Diskutieren anregen soll. In diesem Beitrag wird ein forschungsbasierter Ansatz zur Diskussion gestellt. Es wird argumentiert, dass Lehre nur dann besser wird, wenn es mit den Prinzipen der Wissenschaft und Forschung angegangen wird (d.h. gestalten, Daten erheben, auswerten, verbessern). Es benötigt neue Verhaltensregeln oder -prinzipien bei der Gestaltung von Lehrveranstaltungen. Das bedeutet zum Beispiel das Prinzipien der Evidenzbasierung und wissenschaftliche Herangehensweisen im Lehr-Lerndesign als zentrales Fundament etabliert werden sollte. Evidenzbasierung hier meint, folgt man der Logik der Forschung, dass Lehrveranstaltungen als Intervention verstanden werden. Mit dieser Intervention werden Studierende befähigt, bestimmte vorab festgelegte Kompetenzen zu entwickeln. Und die Frage, die sich bei jeder Lehr-Lernveranstaltung dann stellt, ist, ob diese Objectives bzw. Learning Outcomes auch erreicht wurden. Klar ist, dass die subjektive Lehrevaluation der Studierenden oder auch die Notengebnung nicht ausreichen, um diese Frage zu beantworten. Hierfür gibt es eine Reihe von Methoden, die genutzt werden können, z.B. aus dem Bereich des User- / Learning Experience Design. Diese Methoden umfassen unter anderem Usability-Tests, Learner Experience Studies, Pre-/Post-Tests, und Follow-up Interviews. Diese können zur Gestaltung und Erfassung von effektiven, effizienten und ansprechenden digitalen Lerndesigns verwendet (Reigeluth 1983, Honebein & Reigeluth, 2022).
Der Beitrag will die Entwicklung zur Verbesserung von Lehre weiter pushen. Neue Ideen in die Bewegung bringen. Als Gründungsvizepräsidentin der UTN hab ich die Chance, hier ein neues Fundament für eine gesamte Uni zu legen. Wird das Gelingen? Ist dieser Ansatz, den ich hier vorstelle, eine erfolgsversprechende Option dafür? Hier können sich die TeilnehmerInnen an dieser Entwicklung beteiligen.
3. Unabhängigkeit von anderen Programmen... (wenn nötig)
Keine Limitierung...
Computer als Universalwerkzeug
Man kann schneller viele Variationen einer Idee testen
Verschiedene Medien: Bild, Ton, Animation, Print, Physical...
Modularität
Es macht manchmal Spass ;)
Warum Code?
7. Was ist Processing?
Programmiersprache -> Eine Variante von Java
Entwickelt 2001 am MIT in der Aesthetics & Computation Group
Zielgruppe sind Designer und Künstler
OpenSource!
Für fast alles gibt es schon fertigen Code in Libraries
8. Processing Mission Statement:
„Processing seeks to ruin the careers of talented
designers by tempting them away from their usual
tools and into the world of programming and
computation. Similarly, the project is designed to turn
engineers and computer scientists to less gainful
employment as artists and designers.“
9. Anleitung:
1. Zeichne 10 Linien.
2. Die erste Line startet in der Mitte.
3. Sie geht ein “Kästchen” nach oben.
4. Jede weitere Linie beginnt am Ende der
letzten Line.
5. Jede neue Linie ist ein Kästchen länger als die
vorherige.
6. Jede neue Linie dreht sich um 90° im
Uhrzeigersinn.
7. Zwei Farben müssen sich immer abwechseln.
10. Code = Präzise Auflistung von Befehlen die der Computer ausführen soll.
0010001010110
0100100101010
draw(“bild.jpg”, 10,10)
11. background(255, 255, 255);
size(1000, 1000);
smooth();
strokeWeight(12);
int step = 10;
float abstand = 120;
float plus = abstand/2;
translate(width/2, height/2);
for (int i = 1; i < step+1; i++) {
if (i%2==0) {
stroke(33, 232, 230);
}
else {
stroke(118, 10, 108);
}
line(0, 0, 0, -abstand);
translate(0, -abstand);
rotate((TWO_PI/4));
abstand += plus;
}
Die gleiche Anleitung in
Processing “Sprache”
sketch_1_1
40. size(800,800);
colorMode(HSB, 360, 100, 100);
background(0,0,100);
noStroke();
rectMode(CENTER);
fill(55, 255, 120);
rect(400,400, 200, 200);
Dieser Code läuft, von oben nach
unten, genau einmal durch!
Animationen und Interaktion in
diesem Code nicht möglich.
sketch_1_4
41. Processing Syntax
code(){ ... }
Abschnitt Inhalt
code(){
size(800,800);
colorMode(HSB, 360, 100, 100);
background(0,0,100);
noStroke();
rectMode(CENTER);
fill(55, 255, 120);
rect(400,400, 200, 200);
}
Abschnitte sind meistens eingerückt.
Mit cmd/strg + T kann man im Editor den
Code automatisch formatieren.
42. Code in Processing hat zwei grundlegende Abschnitte:
void setup() {
...
...
...
}
void draw() {
...
...
...
}
Dieser Block wird einemal!!! von oben nach unten durchlaufen.
z.b. size() oder colorMode() machen Sinn in void setup()
void draw() läuft durch und fängt wieder oben an.
43. void setup() {
size(800, 800);
colorMode(HSB, 360, 100, 100);
background(0, 0, 100);
}
void draw() {
noStroke();
rectMode(CENTER);
fill(55, 255, 120);
rect(400, 400, 200, 200);
}
Der gleiche Code aufgeteil in setup()
und draw().
Das Programm läuft jetzt in Echtzeit.
Aber weil die Werte in draw() nicht
varieren, sieht es immer gleich aus.
sketch_1_5
44. mouseX und mouseY sind dynamische
Variablen die immer die aktuelle
Mausposition speichern.
mouseX ist 6
mouseY ist 2
45. void setup() {
size(800, 800);
colorMode(HSB, 360, 100, 100);
background(0, 0, 100);
}
void draw() {
noStroke();
rectMode(CENTER);
fill(55, 255, 120);
rect(mouseX, mouseY, 200, 200);
}
Weil die Werte für mouseX und
mouseY sich immer ändern, und
void draw() sich wiederholt, läuft das
Programm jetzt dynamisch.
Variante: background() in void draw()
verschieben...
sketch_1_6
49. Variablen sind Behälter die einen bestimmten Werte, z.b. Zahlen, enthalten.
Sie haben einen Namen und verlinken an eine Position im Arbeitsspeicher,
wo dieser Wert abgelegt ist.
mouseX , mouseY -> Variablen für die Position der Maus
width und height -> Variablen mit der Breite und Höhe des Fensters
int
12,
276
-231
1
float
0.3
0.322
12.377
-0.5
50. Processing Syntax
typ name;
float green;
void setup() {
green = 20.3;
background(0,green,0);
}
name = wert;
int oder float irgendein Name, z.b. blub
//es geht auch so...
float green = 20.5;
void setup() {
background(0,green,0);
}
10 für int, 1.0 für float
59. Code in Processing hat zwei grundlegende Abschnitte:
void setup() {
...
...
...
}
void draw() {
...
...
...
}
Dieser Block wird einemal!!! von oben nach unten durchlaufen.
z.b. size() oder colorMode() machen Sinn in void setup()
void draw() läuft durch und fängt wieder oben an.
62. Variablen
int: Ganze Zahlen
int positionX;
int breite;
int tempo;
positionX = 10;
breite = 200;
tempo = -40;
float: Komma Zahlen
float positionX;
float breite;
float tempo;
positionX = 10.13;
breite = 200.99;
tempo = -40.5;
Allgemeine Variablen:
mouseX;
mouseY;
width;
height;
zb int position = mouseX;
63. mouseX und mouseY sind dynamische
Variablen die immer die aktuelle
Mausposition speichern.
mouseX ist 6
mouseY ist 2
64. Variablen Operationen
+,-,*,/,++,--,
+=,-=,*=,/=
int tempo;
tempo = 10;
tempo = 10 + 10; //20
tempo = 10 - 5; //5
tempo = 10 * 3; //30
tempo = 10 / 2; //5
tempo++; //11 tempo = tempo + 1;
tempo--; //9 tempo = tempo - 1;
tempo *= 2 //20 tempo = tempo * 2;
tempo /= 2 //5 tempo = tempo/2;
78. Array
int b1 = 1;
int b2 = 21;
int b3 = 13;
int b4 = -9;
int b5 = 100;
...
Eine Liste von Variablen.
Z.b. für die Größe oder Position von
verschiedenen Elementen
79. Array
int b1 = 1;
int b2 = 21;
int b3 = 13;
int b4 = -9;
int b5 = 100;
int[] liste = {1, 21, 13, -9, 100};
82. Array
typ[] name = {x, x, x, x, x};
int[] liste = {12, 32, 12, 0, 1};
typ[] name = new int[x];
int[] liste = new int[5];
Alle 5 int’s wäre so erstmal 0
83. Array
int[] liste = {12, 32, 12, 0, 1};
liste[0]; // 12
liste[1]; // 32
liste[2]; // 12
liste[3]; // 0
liste[4]; // 1
5 Positionen und fängt immer bei 0 an!
85. Array und Loops
float[] liste = new float[10];
for (int i = 0; i < liste.length; i++) {
liste[i] = random(100);
}
for (int i = 0; i < 10; i++) {
println(liste[i]);
}