Stilübungen

A digital interpretation of Raymond Queneau's Book "Stilübungen" by Gerrit Hoffschulte.

Sorry, you need a really big screen, because this was designed for iPad's portrait resolution (768x1024px) …

Your browser does not support the canvas tag.

Regenbogen (S.17)


// ###################################

String story;

story = "Eines Tages befand ich mich auf der Plattform eines violetten Autobusses. Ein recht lächerlicher junger Mann stand dort: indigofarbener Hals, Kordel am Hut. Plötzlich verwahrte er sich gegen einen blauen Herrn. Vor allem wirft er ihm mit grüner Stimme vor, ihn jedes Mal, wenn Leute austeigen, anzustoßen. Nachdem er das gesagt hat, stürzt er sich auf einen gelben Platz, um sich dort hinzusetzen. Zwei Stunden später begegne ich ihm vor einem orangenen Bahnhof. Er ist in Begleitung eines Freundes, der ihm rät, sich noch einen Knopf an seinem roten Überzieher anbringen zu lassen."


// ###################################
// Algorithmus:

/*
Der Ursprungstext wird bogenartig angeordnet und vom ersten zum letzten Zeichen findet ein Regenbogen-Farbverlauf statt. Eigentlich sollte der Bogenverlauf strenger sein, aber in der Testphase führte dieser Code, welcher ein gelegentliches Ausbrechen vom Bogen zum Kreis erlaubt zu spannenderen visuellen Ergebnissen :-) Durch Wischen von links nach rechts ist die Bogenanordnung veränderbar. Nach einer Weile "verblasst" die Grafik fortschreitend, kann jedoch durch Berührung jederzeit wieder sichtbar gemacht werden.
*/

String pageNumber;
String title;
String story;
int storyLength;
float opacity;
int opacityChange = 1;

void setup() {

size(768, 768);
fill(0);
smooth();
storyLength = story.length();
textFont(createFont("Georgia", 24));
opacity = 100;

}

void draw() {

translate(width/2, height/2);
background(230);

char currentChar;

float counter = 0;
float radius = 360;
float spacer = 3;
float red = 255;
float green = 0;
float blue = 255;
float colorStep = 2;
float startAngle = 90-30;
float maxAngle = 270+30;
float factor = map(mouseX, 0, width, 0.1, 1.5);
float spacerStep = factor;
float radiusDecrease = 20;

for (int i=0;i<storyLength;i++) {

currentChar = story.charAt(i);
fill(red,green,blue,opacity); // fill(255,0,255,100); // violet

if(red > 0 && green == 0 && blue == 255) {
red = red-colorStep; // fill(64,0,255,100); // indigo // fill(0,0,255,100); // blue
}

if(red <= 0 && green < 255 && blue > 0) {
green = green+colorStep;
blue = blue-colorStep; // fill(0,127,127,100); // fill(0,255,0,100); // green
}

if(red < 255 && green >= 255 && blue <= 0) {
red = red+colorStep; // fill(127,255,0,100); // fill(255,255,0,100); // yellow
}

if(red >= 255 && green > 0 && blue <= 0) {
green = green-colorStep; // fill(255,127,0,100); // orange // fill(255,0,0,100); // red
}

if((counter % (maxAngle-startAngle)) < 5) {
counter = 0;
radius = radius-radiusDecrease;
spacer = spacer+spacerStep;
}

float angle = radians(startAngle+counter);
float x = -sin(angle) * radius;
float y = cos(angle) * radius;

text(currentChar, x, y);
counter = counter+spacer;

}

opacity = opacity-(0.1*opacityChange);

if(opacity < 0) {opacity = 0;}
if(opacity > 100) {opacity = 100;}

}

void mousePressed() {
opacityChange = -1;
}

void mouseReleased() {
opacityChange = 1;
}

// ###################################