(C) Wie Algorithmus für Grafikeffekt finden?

[*Markus]

Hallo,

endlich fand ich mal ein kleines Tutorial, das die Erstellung von Grafikeffekten mit SDL halbwegs gut beschreibt. Ich würde aber gerne wissen, wie man es angehen kann, sich einen Algorithmus so zu überlegen, dass im Endeffekt ein bestimmter gewünschter Effekt herauskommt. Ich schätze mal, dass es eher eine mathematische Frage ist, als eine Frage zur Programmierung.
Wenn man sich beispielsweise http://sol.gfxile.net/gp/ch02.html@diesen (simplen) Effekt ansieht, kann man mit der Zeile

  
((unsigned int*)screen->pixels)[ofs] = i * i + j * j + tick;  

den Effekt so ändern, dass etwas ganz anderes, zum Teil auch Blödsinn rauskommt. Mich interessiert aber, wie man beispielsweise darauf kommt, dass i * i + j * j genau diese pulsierenden Kreise erzeugt. (Durch tick entsteht erst die Animation. Nimmt man tick weg, bewegt sich nichts).

Markus.

[Der Martin]

Hallo Markus,

Wenn man sich beispielsweise diesen (simplen) Effekt ansieht, kann man mit der Zeile
((unsigned int*)screen->pixels)[ofs] = i * i + j * j + tick;
den Effekt so ändern, dass etwas ganz anderes, zum Teil auch Blödsinn rauskommt.

Richtig - an der Stelle ist, so wie es aussieht, pure Mathematik gefragt.

Mich interessiert aber, wie man beispielsweise darauf kommt, dass i * i + j * j genau diese pulsierenden Kreise erzeugt.

Dann erinnere dich bitte nochmal an den Mathe-Unterricht. Was ist durch die Gleichung
  x² + y² = r²
beschrieben? Genau, ein Kreis um den Koordinatenursprung mit dem Radius r. Wenn also in deinem Beispiel i und j die Bildschirmkoordinaten sind, dann kann man diese Beziehung auch andersrum interpretieren: Für alle Punkte, die den gleichen Abstand vom Ursprung haben [also einen Kreis bilden], ergibt sich der gleiche Wert, d.h. die gleiche Farbe. Es entstehen also "unendlich" viele Kreise, deren Farbe sich mit ihrem Radius ändert.

So long,
 Martin

[*Markus]

Hallo,

Dann erinnere dich bitte nochmal an den Mathe-Unterricht. Was ist durch die Gleichung
  x² + y² = r²
beschrieben? Genau, ein Kreis um den Koordinatenursprung mit dem Radius r.

Ja, das leuchtet mir eigentlich ein. An diese Formel kann ich mich eigentlich gar nicht erinnern. Nur an die üblichen Kreisformeln. Jetzt ist mir dieses Beispiel aber fast klar.
Trotzdem würde mich aber noch interessieren, wie ich eben auf Algorithmen komme, die so etwas darstellen:

Ich schätze allerdings, dass mein Problem darin begründet ist, dass ich noch nicht wirklich die vielen Möglichkeiten kenne, die ich benutzen kann. Ein gutes Beispiel ist auch dieses in dem ein "Bledeffekt" verwendet wird.

Markus.

[Gunnar Bittersmann]

Hello out there!

x² + y² = r²
ein Kreis um den Koordinatenursprung mit dem Radius r.

An diese Formel kann ich mich eigentlich gar nicht erinnern.

Den Satz des Pythagoras sollte man eigentlich nicht vergessen.

See ya up the road,
Gunnar

[*Markus]

Hallo,

Den Satz des Pythagoras sollte man eigentlich nicht vergessen.

Hab ich auch nicht. Mir war nur den Bezug des Kreises zum Koordinatensystem jetzt nicht klar.

Markus.

[Der Martin]

Hi,

An diese Formel kann ich mich eigentlich gar nicht erinnern. Nur an die üblichen Kreisformeln.

was meinst du mit "den üblichen Kreisformeln"? In welcher Form wäre dir die Gleichung eines Kreises (oder einer Kugel) geläufiger gewesen? Etwa in der Vektorschreibweise? Die führt aber, wenn man die Vektoren in ihre Komponenten zerlegt, auf dieselbe Gleichung.

Trotzdem würde mich aber noch interessieren, wie ich eben auf Algorithmen komme, die so etwas darstellen:

Ich glaube nicht, dass es einen eindeutigen Weg gibt, von der Darstellung auf den zugrundeliegenden Algorithmus zu kommen. Aufgrund bestimmter, charakteristischer Figuren kann man vielleicht eine Ahnung haben, aber ich denke, da gehört trotzdem noch viel Gespür und Erfahrung dazu - oder man probiert einfach verschiedene Formeln aus und schaut sich an, was dabei rauskommt.

Schönen Abend noch,
 Martin

[*Markus]

Hallo,

was meinst du mit "den üblichen Kreisformeln"?

Du weißt schon, r * pi und diese Dinge eben.

Ich glaube nicht, dass es einen eindeutigen Weg gibt, von der Darstellung auf den zugrundeliegenden Algorithmus zu kommen. Aufgrund bestimmter, charakteristischer Figuren kann man vielleicht eine Ahnung haben, aber ich denke, da gehört trotzdem noch viel Gespür und Erfahrung dazu - oder man probiert einfach verschiedene Formeln aus und schaut sich an, was dabei rauskommt.

Ja, so ungefähr denke ich mir das auch, aber wie gesagt, natürlich wäre es fein gewesen irgend wenn es bestimmte Ansätz gibt, so etwas zu bewerkstelligen.

Markus.

[*Markus]

Du weißt schon, r * pi und diese Dinge eben.

r² sollte es natürlich heißen.

[*Markus]

Jetzt ist mir dieses Beispiel aber fast klar.

Naja, eigentlich doch noch nicht. Die Formel gibt ja nur die Farbe an, so weit ich das erkennen kann, aber ich verstehe trotzdem nicht, warum die inneren Kreise blau bis schwarz sind. Es wäre vielleicht leichter, wenn ich wüsste, wann welche Farben errechnet werden, damit ich mir ungefähr ein Bild davon machen könnte, wie sich die Animation zusammensetzt.

Markus.

[Der Martin]

Hallo Markus,

Die Formel gibt ja nur die Farbe an, so weit ich das erkennen kann, aber ich verstehe trotzdem nicht, warum die inneren Kreise blau bis schwarz sind.

so schließt sich der Kreis. Vor einigen Wochen hast du doch mit einem Beispiel angefangen, wo es um das Setzen einzelner Pixel und die zugehörigen Farben ging, bzw. wie man sie bestimmt.

Okay, du benutzt Linux, da habe ich nicht viel Ahnung von den Interna. Ich weiß aber, dass sich die Grundlagen nicht allzusehr von Windows unterscheiden, zumal sich manche Dinge direkt von der Hardware ableiten, die ja in beiden Fällen dieselbe ist.

Unter Windows werden Bildschirmfarben mit 32bit-Werten gespeichert, wobei die unteren 8 Bits für den Blauanteil stehen, die nächsten 8 Bits für den Grünanteil, die nächsten 8 für den Rotanteil, und die obersten 8 Bits werden nicht verwendet. Jedes Pixel sieht also in der Hexadezimaldarstellung so aus: 0x00RRGGBB. Abgesehen von den führenden Nullen für das höchste Byte siehst du bestimmt die Ähnlichkeit zu RGB-Farbangaben in HTML/CSS. Das ist kein Zufall. ;-)
Wenn man sich diese Darstellung anschaut, wird schnell klar, dass kleine Zahlenwerte (bis 0xFF) reine Blautöne darstellen, weil die Bits für den Grün- und Rotanteil noch auf Null stehen. Mit größer werdenden Zahlen kommt dann allmählich ein Grün- und später ein Rotanteil dazu.

Wie gesagt: Am besten kann man die Farbe erkennen, wenn man sich den Zahlenwert in Hex darstellen lässt - dann hat man die Anteile für Rot, Grün und Blau fast im Klartext vor sich.

So long,
 Martin

[*Markus]

Hallo,

danke, aber das Grundlagenwissen mit dem Hexzahlen ist mir natürlich klar. Ich habe eigentlich gemeint, dass es schwierig ist, aus dieser Zeile ((unsigned int*)screen->pixels)[ofs] = i * i + j * j + tick;  die Farbe herauszulesen, da man erst die Dezimalzahlen aus dieser Multiplikation wieder umwandeln müsste, und das Pixel für Pixel, wodurch man sich so das Bild zusammensetzen könnte, aber würde ich so vorgehen, würde ich dabei alt werden.
Ich verstehe nämlich nicht, warum im Hintergrund kleine Kreise pulsieren, wobei im Vordergrund dieser grün-blaue Kreis entsteht, und das alles nur aus den Farbzusammensetzungen?
Wie auch immer. Im nächsten Beispiel der Webseite mit dem Sprite ist alles klar. Hier kann man nachvollziehen, was wirklich geschieht. Bei diesem Beispiel aber kann ich das gewiss nicht, da sich die Muster irgendwie "zufällig" ergeben.

Markus.