Robert und einige andere benötigen eine Zeitleiste, die sich mit der Maus o.ä. scrollen lässt und in die man herein-zoomen kann. Dabei soll beim Zoomen der Zeitpunkt in der Fenstermitte fix bleiben, also die Zeitleiste gewissermassen um den aktuellen Punkt zentriert werden. (weiterlesen…)
Archiv für Januar 2011
Zeitleisten – Scroll & Zoom
Sonntag, 09. Januar 2011…in der scrollbar
Freitag, 07. Januar 2011hola.
hab die zeitleiste weitergebastelt und dabei noch paar sachen erledigen können, nur noch nicht so wirklich den plan, ob ich das alles so übertragen bekomme, dass es am ende funktioniert… 
die nächste hürde heißt automatisches zentrieren einer angeklickten zahl auf dem bildschirm. dannach die übertragung in mein scrollbar-script und schließlich das synchronisieren der einzelnen leisten…
gut… das les ich mir jetzt täglich zehn mal durch und hoffe irgendwann den mut zu finden mich wieder dran zu setzen und beende diesen post mit drei punkten …
void setup() {
addMouseWheelListener(new java.awt.event.MouseWheelListener() {
public void mouseWheelMoved(java.awt.event.MouseWheelEvent evt) {
mouseWheel(evt.getWheelRotation());
}
}
);
size (800,200);
colorMode(HSB, 100);
smooth();
}
float tscale; // skalierung
float tsclx; // position für h-zahlen
float position;
float mklick = 0; // mouseX bei klick
int sclfac = 15; // scale faktor
void mousePressed() {
mklick = mouseX;
}
void mouseDragged() {
position = position + (mouseX-mklick)/tscale; // DAS WARS... hier musste der tscale dividiert werden
mklick = mouseX ;
}
// SKALIERUNG mit Mausrad
void mouseWheel(int direction) {
sclfac = sclfac - 1*direction;
if(sclfac < 1) {
sclfac = 1;
}
if(sclfac > 40) {
sclfac = 40;
}
}
// SKALIERUNG mit Tasten
void keyPressed() {
if (key == CODED) {
if (keyCode == UP) {
sclfac = sclfac + 1;
}
else if (keyCode == DOWN) {
sclfac = sclfac - 1;
}
if(sclfac < 1) {
sclfac = 1;
}
if(sclfac > 40) {
sclfac = 40;
}
}
}
void draw() {
background(30);
tscale = width/365*sclfac;
// if(tscale
// }
if(tscale<0.5) {
tscale = 0.5;
}
// ZAHLEN
int yearwidth;
yearwidth = 24*int(tscale);
for(int y=1; y < 366; y = y+1) {
for(int h=1; h<25; h=h+1) {
fill(35-h,75,100);
textSize(15);
float versposi;
float verskor;
float verschieb;
versposi = (position - width/2); // Verschiebeposition
verskor = versposi * tscale; // Verschiebekorrektur für Mittelpunkt
verschieb = versposi - verskor; // Verschiebung
tsclx = position + (h * tscale + y*yearwidth) - verschieb;
// xpos = position + zähler - Verschiebung
text(h, tsclx, height/1.5);
if(h==1) {
textSize(30);
text(y, tsclx, height/2);
}
}
}
// println(sclfac);
println(tscale);
textSize(10);
text("drag to scroll. ", 5, 15);
text("use mouse wheel or key up/down to scale. ", 5, 25);
}
10 Processing – Objekte und Arrays
Freitag, 07. Januar 2011Arrays lassen sich auch aus benutzerdefinierten Objekten erstellen. Damit können wir beispielsweise die Arrays positions[] und colors[] aus dem letzten Beispiel elegant zusammenfassen:
class Marker {
float position;
float color;
}
Marker items = new Marker[30];
for( int i = 0; i < items.length; i++ ) {
items[i] = new Marker();
items[i].position =random( 0, width );
items[i].color = random( 0, 1 )
}
Wichtig ist, dass wir jedes Element mit “new Marker()” erzeugen müssen, bevor wir es benutzen.
09 Processing – Arrays
Freitag, 07. Januar 2011Arrays sind durchnummerierte Listen von Objekten. Damit könnnen wir z.B. eine Liste von Zahlen oder Terminen verwalten (Arrays enthalten immer Objekte des gleichen Typs).
(weiterlesen…)
08 Processing – Objekte definieren
Freitag, 07. Januar 2011Objekte und Klassen hatten wir ja schon eingeführt und einige kennengelernt:
String, PVector, Phape, PFont etc.
Interessant wird es, wenn wir eigene Klassen definieren und damit eigene Objekte erzeugen. (weiterlesen…)
07 Processing – Text
Freitag, 07. Januar 2011Fast alle Programme müssen mit Text umgehen. Text wird in Processing durch den Datentyp String dargestellt. (weiterlesen…)
Zeitschichten 2.0
Donnerstag, 06. Januar 2011Christian und ich hatten mehrere Gespräche und auch unsere Herangehensweise dabei überdacht.
Wir kamen zu dem Schluss dass Negativ/Positiv als Informationen nicht ausreichen oder auf Dauer kein Ansporn darstellen, zuviel Reduktion tat der Sache also nicht gut, zustopfen wollen wir unsere Anwendung aber auch nicht und dem Benutzer zuviel abverlangen erstrecht nicht.
Die Bedienfreundlichkeit haben wir also beibehalten.
Unsere 2 Elemente : Farbe und Kurve auch,
bei den 24h Balken bleibt es auch, ein Balken beginnt bei 06:00 und endet 05:00 früh am Folgetag. Auf diese Weise spielt sich der eigentliche Tag grafisch in der Mitte ab.
Statt eine Bedeutung der Stunde durch die Mittel Amplitude sowie Farbe auszudrücken, was doppeltgemoppelt wäre, haben wir Christians und meine Idee klug vereint!
Man legt sich also nun beim ersten Start des Programms Kategorien fest mit denen man das Programm füttern möchte.
Tennis, Hobby, Beruf, Party….. kann man editieren wie man möchte, auch neue Kategorien erstellen oder löschen(natürlich schade, hab auch noch kein Plan wie man verhindern soll dass sich jemand zuviele Kategorien erstellt)
Natürlich werden ein Paar von anfang an da sein. So eine Art Grundkategorien wie Schlaf, Arbeit, Gammeln, puh…. das ist eben das Problem bei der Sache. Aber auch da werden wir noch was adäquates finden.
Stündlich wird man dann abgefragt was man von den Sachen grade macht. Erfolgt 15 min keine Eingabe wird grau gewählt. (im Nachhinnein änderbar)
Dadurch erfolgt aber noch keine Bewertung, es handelt sich eher um eine Art Termintagebuch.
Zusätzlich zur Auswahl der Tätigkeit kommt also ein Schieberegler(vielleicht besser hochrunter statt links-rechts egal) Man schiebt also auf “Verplempert – Genutzt”
Der Balken biegt sich also hoch oder runter. Dadurch kommt die Wertung, unabhängig von der gewählten Tätigkeit. So lassen wir genug Freiheit.
Durch die dünnen Balken versperrt einem Nichts die Sicht auf hintere, vielleicht tiefliegende Parts.
Ob man den Raum per Klick drehen können soll oder es bei einer festen Perspektive(mit der Möglichkeit nach hinten zu scrollen) bleibt muss man noch abwägen.
Genauso ob es möglich ist alles auf eine 3d Fläche zu bringen, also auch das Benutzerinterface, oder ob das immer grade oben bleibt.
Stellt man sich von oben betrachtet ein Raster aus Punkten vor die man stündlich festlegt kann man die Punkte in die eine Achse (X) verbinden, dadurch ergibt sich ein Tag, so wir ihr es auf dem ersten Bild sehen könnt.
Es tut sich aber gleichzeitig auch die Möglichkeit auf die Punkte nach hinten (Y) zu verbinden wodurch sich mögliche Fragen ergeben wie “Was mache ich eigentlich jeden Tag um 15 Uhr??”
oder “was mache ich eigentlich jeden Mitwoch, öhhm 13 Uhr so”
Hoffentlich bekommt man das einigermaßen programmiert.
In Tabellen vorm (Open Officedatei)
Tabelletabelle_zeit_christian / übersicht_bewertung
Earthclock-Konzept
Donnerstag, 06. Januar 2011Auch von mir ein erfolgreiches, gesundes, glückliches neues Jahr
Zu meiner Konzeptausarbeitung:
Es soll wie folgt aussehen:
Fenster für Datenauswahl ist zu.
Menue LINKS:
Auswahl der Länder, die man hervorheben möchte. Diese werden durch Farben erkenntlich gemacht, sodass man die Entwicklung dieser besser nachvollziehen kann.
Menue OBEN:
- Auswahl bestimmter Daten über die Erde, welche man aus- und zuklappen kann.
- Scrollbalken für die Einstellung der Zeit
Fenster für Datenauswahl ist auf.
Da es zu aufwendig wäre, die 3-Dimensionalen Flächen der Kontinente mit Echtzeitdaten zu verknüpfen diese je nach Ausmaß der Daten im Relief wachsen zu lassen und sie dann auch noch per Augmented Reality als Erdkugel zu visualisieren, werde ich versuchen, die Entwicklung innerhalb eines eingeschränkten Zeitraumes zu simmulieren.
Der Zeitraum ist auch eingrenzt (1960-2010). Daten dazu ziehe ich aus folgender Quelle: http://data.worldbank.org/indicator
FÜR ANREGUNGEN UND TIPPS, KONSTRUKTIVE KRITIK BIN ICH SEHR DANKBAR!
…denn irgendwie scheint mir die Umsetzung, selbst die Simmulation, so unerreichbar weit weg, außerhalb meines Potentials, zu sein. Zumindest in solch einen kurzen Zeitraum…Weiß irgendwie nicht, wo oder wie ich anfangen soll.
Minh
Prost!
Dienstag, 04. Januar 2011Hallo, euch allen ein spannendes neues Jahr!
aber seid ihr auch motiviert …?
dann kaufen sie jetzt … äh naja nee, is ja noch ni fertich
die Arbeit an meinem Programm geht voran, mit nicht zu kleinen Schritten, muss ich feststellen.
Deshalb mal ein update zum Motivationskalender 2011:
Das Programm ist in seinen Grundzügen anwendbar, aber nur wenn man die Daten vorher umständlich in eine Excel-Tabelle einträgt und dann exportiert – das wird sich noch ändern. Der Quelltext ist auch jetzt schon eine ‘wall of text’ im wallsten Sinne des Walles, selbst bei 4 Tabs …
___
Bisher kann ich die Daten aus ihren Positionen auf den entsprechenden Zeilen in der .csv-Datei auslesen, sie als Gesamtes zu verschiedensten Formen umwandeln und darstellen: siehe unten
Darüber hinaus hab ich Kontrollmöglichkeit per UP und DOWN über die einzelnen Ziele, die dann in ihrer Reihenfolge (wie in der Datei) hervorgehoben werden; RIGHT und LEFT verschieben den Ausschnitt auf der Zeitleiste; STRG zappt die 3 Visualisierungen durch; + und – zoomen den Ausschnitt rein bzw. raus UND als kleines extra: SHIFT blendet jederzeit die Uhr ein (letztes Bild).
Zum weiteren Verlauf bei mir, also ich bin von dem Gedanken weg was mit 3D zu machen, weil ich glaube ich komme auch so zu interessanten Ansätzen. Nicht dass ich dem abgeneigt wäre, aber ich weiß nicht ob das zu der Optik passt, die bis jetzt vorherrscht – also eine Design Entscheidung – aber ich werd auf jeden Fall mal damit experimentieren, vielleicht gehts ja doch, bin mir nicht sicher.
Ok, das wars bis jetze, bis Freitag dann!
… wieso heißt der erste Schultag im Jahr eigentlich FREItag …? 
meine aktuelle Datei zum download.
und die screens:
visualisierung eins: kontinuierlich ansteigende treppe - verbildlichung des "wertes einer anstrengung" ... oder so
visualisierung zwei: wellenartige darstellung, die überschneidungen sorgen für recht hübsche abstufungen, fand ich
visualisierung drei und uhr: auch wellen- oder seetang-ähnliche elemente, die sich umso mehr richtung ziel neigen, je mehr mühe man in sie investiert hat ... und die eingeblendete uhr natürlich
Idee: etwas abstrakte Zeitkompression
Dienstag, 04. Januar 2011Hatte die Idee während der Arbeit an meinem Spiel. Also hier meine ersten Versuche in Processing.
Einfach Programm anwerfen und in den Hintergrund schicken, dort zeichnet es dann alles auf was ihr mit dem Cursor so treibt wenn ihr arbeitet/surft/zockt. Natürlich bin ich nicht der erste der solch eine Idee hatte…
was ich bisher gecodet habe:
Download Sketches
Das erste Programm zeichnet im Hintergrund einfach nur mit Rechtecken die Mausbewegung abgerundet nach.
Das Zweite Programm fügt bei jedem Klick ein zusätzliches Element hinzu.
Das dritte fügt alle 4 frames ein neues element hinzu, und löscht ab einem limit von 50 die ältesten Elemente
Das ganze kann man noch auf alle möglichen Eingaben( keyboard, webcam) und vielleicht auch Sachen wie aktuelle Farbe des Pixels unter dem Cursor ausdehnen.
Im Endeffekt kann man hier eine sehr interessante Variante der Konvertierung von zeitlichen Veränderungen in ein statisches visuelles Medium erzeugen.
Ich würde gerne hieran weiterarbeiten, aber ich bin mir noch unschlüssig, immerhin hab ich in das andere Projekt schon viel Zeit reingesteckt.