Selfmade Design-App mit Canvas Wie wird das Bild, das bildhafte?

 Moderne bildgebende Verfahren führen zu massenhaften 
 Verbildlichungen, wie z.B. Fotos, grafischen Darstellungen, 
 bildhaften Nachrichten, anschaulichen Kurzfilmen, modifizierten 
 Abbildungen, gemachten Visualisierung und Simulationen, 
 vereinfachten Demonstrationen, ausgewählten Illustrationen, 
 siehe z.B.  Fotographie 

Projekt-Kurzfassung Device-unabhängige Grafik

Zu Entwicklungen ( Code-Mutationen, Programme, Canvas, Evolution ) gehören vielfältige Variationen und geeignet Selektionen. Ausgewählte Neuerungen ( Innovationen ) werden zur modifizierenden Normalität. Mit Variation und Selektion können sich Code-Eigenschaften entwickeln, die "Menschen" von Vorteil sind. Bei "Geräteunabhängig" können physikalisch-technische Gesichtspunkte nachrangig zu den den Bedürfnis von pluralistischen Gesellschaften werden.

Es ist eine Software-Bibliothek zu schreiben/ergänzen, die ohne das direkte Programmieren auf der Pixel-Divice-Ebene auskommt. Anstelle der gerätespezifischen Bezeichner i1,j1, i2,j1, canvas.width, canvas.height, usw. werden "geräteunabhängige 2D-Welt-Systeme" x1,y1, x2,y2, usw. eingeführt. Hier ist ein Anfang mit App-Start


Selfmade Design-App ( Einführendes ) Massenhafte Verbildlichung

Moderne Bildgebende Verfahren führen zu einer massenhafte Verbildlichung. Die Moderne ( lat. modernus, neu, neuzeitlich, gegenwärtig, heutig ) und Postmoderne bezeichnen Umbrüche in zahlreichen Lebensbereichen. Grafische Technologien ermöglichen vielschichtige Gestaltungsmöglichkeiten. Dennoch haben alle kommunikativen Fähigkeiten ( in den Deutungsmöglichkeiten und auffächernden Vernüpfungsmustern ) vielfältige Begrenzungen. Johann Wolfgang Goethe sagt es so:

  Johann Wolfgang Goethe (1749-1832 ) Von hier und heute geht eine neue Epoche der Weltgeschichte aus, und ihr könnt sagen, ihr seid dabei gewesen.

Zwischen Vergangenheit und Zukunft ist im gewissen Sinn eine aktuelle Gegenwart. Dieser "gegenwärtige Augenblick wandert" hin zur Zukunft. Die Bewusstheit vom derzeitigen Dasein erscheint ( in zahlreichen Wiederholungserfahrungen ) als individuelle Realität. Messinstrumente für "die Zeit" verwenden physikalische Effekten ( z.B. atomare Sub-Niveau-Übergänge ), um mit Hilfe von ( "fixen" ) periodischen Vorgängen das zu messen, wofür sie konstruiert wurden.

Immanuel Kant sagt es so:
Könnte man die Zeit anhalten, für wie lange "stünde" dann die Zeit?


CA-Technologien und "Industrie 4.0" Kannst du Heute?

Es gibt zahlreiche ( "kleinere" ) Grafikprogramme, die der Erstellung oder Bearbeitung von Bildern dienen, wie z.B. Bildeditor, Zeichnungseditoren, Malprogramme und Vektorgrafikprogramme. Es gibt zahlreiche ( "große" ) Grafik-Systeme, 3D-Programme, BREP, CIM ( Computer integrated Manufacturing ), CA-Technologien, CAD, "Industrie 4.0", rechnergestützte Produktion und Fertigung. Zu CIM gehören:

 CAD ( rechnergestützte Konstruktion, Entwurf)
 CAP ( rechnergestützte Arbeitsplanung )
 CNC ( Fertigung )
 CAQ ( rechnergestützte Qualitätssicherung )
 CAM ( rechnergestützte Fertigung )
 PPS ( Produktionsplanung und -steuerung )
 BDE ( Betriebsdatenerfassung )
...

Eine Illustration entspricht einem beigegebene Bild, das den Text bildhaft erläutern kann. Eine Zeichnung Technische Zeichnungen ( früher von Hand gezeichnet ) verwenden oft gerade Linien und dienen der Anfertigung von Produkten ( Maschinenbau, Bauwesen, Architektur ). Siehe de.wikipedia Technisches Zeichnen


Ideenfindung für die Selfmade Design-App Kannst du Idee?

Woher kommen "brandneue" Ideen für eine praxistaugliche, robuste, brauchbare Selfmade Design-App? Wie finde ich eine völlig neue, noch nicht realisierte Lösung, die den Weltmarkt "aufmischt"? Wie geht das mit Ideenfindungs-Methoden und regionalen/weltweiten Innovationen?

Ideenfindungs-Methoden eignen sich primär für Probleme, bei denen der Lösungsweg noch unbekannt ist (sogenannte "schlechtstrukturierte Probleme"). Für (sogenannte "wohlstrukturierte Probleme" ) sind Lösungsansätze und Lösungswege bekannt. Siehe Kreativitätstechniken .

Woher kommen "brandneue" Ideen für eine
praxistaugliche, robuste, brauchbare Selfmade
Design-App? Wie kommt man zu einer perfekten Idee?
Wie macht man eine weltweite Innovation?

 Ludwig Wittgenstein  ( 1889 - 1951, 
 Beiträge zur Philosophie der Logik, 
 der Sprache und des Bewusstseins)  
 Die Arbeit an der Philosophie ist - 
 wie vielfach die Arbeit in der Architektur - 
 eigentlich mehr die Arbeit an einem selbst.
 An der eigenen Auffassung. Daran, wie man 
 die Dinge sieht ( und was man von ihnen verlangt ). 

Das Neue ist verborgen und kann nicht "von der Stange weg" gekauft werden. Der Ideenfindungsprozeß hängt mit dem menschlichen Bewusstsein zusammen und ist wie ein unbekannter Weg durch pfadloses Neuland. Rainer Maria Rilke spricht von "Grenzbildern" und einem "Weltinnenraum" als Ort der "Daseinssphäre". Der Ideenfindungsprozeß hängt mit dem menschlichen Bewusstsein zusammen. Es gibt z.B. Inspiration, Spürsinn, Einfälle, Gespür, Instinkt, gefühltes Wissen, Eingebung, Erkenntnis, Funke, Riecher, Bauchgefühl und sog. "Gedankenblitze", "Geistesblitze", "innere Stimme", usw.

 Rainer Maria Rilke ( 1875-1926, grob zitiert:)
 Das Außen schwindet, indem es ins Innen aufgehoben und 
 verwandelt wird. Was der Vernichtung verfällt, ist nicht 
 das Außen, sondern die Grenze zwischen Innen und Außen

 Der "Weltinnenraum" ist weder ein bestimmter, 
 noch ein statischer Ort, sondern er ist ein Raum 
 der Bewegung, der durch Innen und Außen "reicht". 
 Der Weltinnenraum ist der bewegliche Raum der Allbezogenheit, 
 wo sich der Vogelflug "durch uns hindurch" und das Wachstum 
 des Baumes "in mir" ergeben.


Kunst, Ästetik mit Canvas Kannst du Idee?

Zeichnung (Kunst), Bauzeichnung , Zeichnung , (Architektur)

Es gibt "digitalisierter Zierrat", Comic-Stil, Cartoon-Stil, Kalligraphie, universellen Metadaten-Schemas für Cliparts, Scheren- und Papierschnitte, Faden-um-Nägel, Seil-nägel-bilder , Emoticon , Open_Clip_Art_Library ( gemeinfrei ) Kunst, Auca, Linien, Line-Art, Berandungen, Logogramme, Emoticons




Hinweise: Mathematischen Funktionen Kannst du Mathe?

Darstellung von mathematischen Funktionen:

x := 0.9 * Math.cos(3*t); y := 1.2 * Math.cos(2*t)
 
 Paramterdarstellung: 

    x(t) = xFunc(t);  
    y(t) = yFunc(t); 
     
 konkret: 

    xFunc = 0.9 * Math.cos(3*t);  
    yFunc = 1.2 * Math.cos(2*t);

    mit den Paramtergrenzen

        t_min =   0; 
        t_man = 300;  und der 
    Schrittweite:
        dt = Math.PI/2 + 0.1;


Hinweise: Linien-Beispiele Kannst du Vektor-Grafik

   Linien-Beispiele:

In der Grafik sind Punkte, Linien und deren Topologien fundamental. Category Lines .

faden-um-naegel-bild bild-puste-blume nagelbild-herz nagel-bild.gif nagelbild-segelboot nagelbild-buchstaben nagelbild-ziffern

hyperboloide knoten-theorie kreis-bogen-stuecke bilder/kreis-mit-linien linien-haus linien-horizontal moire_lines stripes stripes2


Hinweise: Welt-Viewport-Abbildung Kannst du Grafik

Grundkenntnisse der Computergrafik ( Informatik ) und dem Canvas-Device-Kontext dienen z.B. der grafische Web-Präsentation von (Statistik-) Daten, dem Rendern von mathemaischen Funktionen, Canvas2d-Web-Grafik mit DC und mehr.

// Prinzip geg.:  xMax, xMin, yMax, yMin, CTX, w, h;
var w = CTX.canvas.width, h = CTX.canvas.height;
dx = xMax - xMin;  
dy = yMax - yMin;
für alle Punkte (x,y) berechne (i,j) {
i = (x - o.xMin)·w/dx;
j = (y - o.yMin)·h/dy;
// x = xmin + i·dx/w; falls i,j von Maus, ges. Weltpunkt x,y
// y = ymin + j·dy/h; 
}

Zu den 2D-Weltkoordinaten (x,y) gehören die Bereiche xMin <= x <=; xMax und yMin <= y <= yMax Reine grafische Transformationen ( Matrizen ) scheiden aus, weil in der 2D-Welt i.a. Berechnungen, wie z.B. tatsächliche Polygon-Fläche, erforderlich sind.

Welt-Viewport-Abbildung, isotrop / anisotrop, (x,y) --> (i,j)
Achtung! Anstelle des yMax-Wertes ist yMin zu verwenden und Anstelle des yMiny-Wertes ist yMax zu verwenden.

           Welt-Ebene 
    y-Achse
     | 
yMax | . . . . . . . . . . . . . . . . . 
     |                                .       
     |                                .
     |      yMin <= y <= yMax          . 
     |                                .
     |      xMin <= x <= xMax          .
     |                                .
     |                                .
yMin |----------------------------------|---  x-Achse 
   xMin                              xMax

Beispiel: Zu y = sin(x) gehört

    *xMin_yMin_xMax_yMax: -10 10 -2 2 anisotop

Eine Welt-Viewport-Abbildung macht aus (x, y) ein (i, j). Zu einer Welt gehört "isotrop" bzw. "anisotrop".

    *iMin_jMin_iMax_jMax: 0 0 600 400 

Zu den 2D-Gerätekoordinaten (i, j) gehören die Bereiche iMin <= i <= iMax und jMin <= j <= jMax

           Geräte-Ebene ( Canvas) 

      iMin=0                 iMax = cxt.canvas.width;  
jMin=0 |-------------------------|------- i-Achse 
       |    jMin <= j <= jMax    .                
       |                        .
       |    iMin <= i <= iMax    .
       |                        .
  jMax |  . . . . . . . . . . .. .  jMax = cxt.canvas.height;
       |                             
       |                             
      j-Achse

Welt-Viewport-Abbildung, isotrop / anisotrop, (x,y) --> (i,j)
Achtung! Sind y-Richtung und j-Richtung entgegengesetzt, so ist anstelle des yMax-Wertes yMin zu verwenden und anstelle des yMin-Wertes ist yMax zu verwenden.

// Prinzip geg.:  xMax, xMin, yMax, yMin, CTX, w, h;
var w = CTX.canvas.width, h = CTX.canvas.height;
dx = xMax - xMin;  
dy = yMax - yMin;
für alle Punkte (x,y) berechne (i,j) {
i = (x - o.xMin)·w/dx;
j = (y - o.yMin)·h/dy;
// x = xmin + i·dx/w; falls i,j von Maus, ges. Weltpunkt x,y
// y = ymin + j·dy/h; 
}

Welche Mathematik verbirgt sich in den grundlegenden 2D-Transformation? Transform-Matrix ( Hinweis: Alles ohne Gewähr! )

  ⎡  d  -c  c·f - d·e ⎤   ⎡ a  c  e ⎤     ⎡ 1  0  0 ⎤
  ⎢ -b   a  b·e - a·f ⎥   ⎢ b  d  f ⎥   - ⎢ 0  1  0 ⎥ · (a·d-b·c)
  ⎣  0   0  a·d - b·c ⎦   ⎣ 0  0  1 ⎦     ⎣ 0  0  1 ⎦  


 ⎡ i ⎤     ⎡  a   c  e ⎤   ⎡ x ⎤
 ⎢ j ⎥  =  ⎢  b   d  f ⎥ · ⎢ y ⎥
 ⎣ 1 ⎦     ⎣  0   0  1 ⎦   ⎣ 1 ⎦ 

 ⎡ x ⎤            -1  ⎡  d  -c   c·f-d·e ⎤   ⎡ i ⎤
 ⎢ y ⎥  = (a·d-b·c)    ⎢ -b   a   b·e-a·f ⎥ · ⎢ j ⎥
 ⎣ 1 ⎦                ⎣  0   0   a·d-b·c ⎦   ⎣ 1 ⎦ 

 Initialisierung: Koeffizenten  a = 1, d = 1 sonst 0

 i = x ·(imax-imin)/(xmax-xmin) + (imin·xmax-imax·xmin)/(xmax-xmin)
                          
 j = y ·(jmax-jmin)/(ymax-ymin) + (jmin·ymax-jmax·ymin)/(ymax-ymin)
   
 imin = 0;  jmin =  h;
 imax = w;  jmax =  0;

 i = x · imax/(xmax-xmin) - imax·xmin/(xmax-xmin)
                          
 j = -y · jmin/(ymax-ymin) + jmin·ymax/(ymax-ymin)
   

Hinweise: Polynomiale Ausgleichskurven y(x) = a0 + a1·x + a2·x^2 +...+ an·x^n

Zu diesem Projekt gehören Teile von Mathematik, wie Die Ermittlung und Darstellen von parametrisierten Kurven, Ortskurven, grafische Darstellungen sind Bestandteil der Mathematik.

In diesem Zusammenhang stehen auch Gebiete, wie z.B. Regressionsanalyse ( allgemein ), Ausgleichungsrechnung , Einfache_lineare_Regression , Lineare Regression , Methode der kleinsten Fehler-Quadrate , Curve fitting, Statistik und Regressionsanalyse ( grafische Darstellung der Regressionsanalyse, Statistik ) und Data-Driven Documents ( D3 ).



Hinweise: Interpolation mit trigonometrischen Funktionen Prinzip

Trigonometrische Funktionen stehen im engen Zusammenhang mit dem Einheitskreis und sind neben NURBS ( nicht-uniforme rationale B-Splines ) für Kurven, Flächen im Computergrafik-Bereich, CGI, CAD und zur Modellierung beliebiger geometrischer Formen geeignet.

Wegen der günstigeren Kontinuumbedingungen werden die Polynom-Gewichtsfunktionen durch trigonometrische Gewichtsfunktionen ersetzt siehe Einführung zu Splines . Zur einfachen Einführung gebe es zunächst lediglich eine Folge von 4 Punkte ( P0, P1 --- P2, P3 ). Bei mehr 4 Punkten werden die Indizes der 4 Punkte jeweils um 1 erhöht. Gezeichnet wird der Bereich zwischen P0 --- P1, indem t = 0 ... 1 durchläuft. P(t) = g0(t)·P0 + g1(t)·P1 + g2(t)·P2 + g3(t)·P3, wobei S0, S1 "Tangenten-Steigungen" entsprechen. Als Gewichte für die Interpolation ( Bild ) werden gewählt:

 Interpolation ( siehe Bild )
 co = cos(π·t/2); 
 si = sin(π·t/2);

 g0(t) = co·(co - 1)/2     rosa 
 g1(t) = si·(si + 1)/2     rot 
 g2(t) = co·(co + 1)/2     blau 
 g3(t) = si·(si - 1)/2     schwarz 

 Folgen von je 4 Punkten:  P0, P1 --- P2, P3  
 Zeichenbereich lediglich:     P1 --- P2  für t = 0...1 

  P(t) = g3(t)·P0 + g2(t)·P1 + g1(t)·P2 + g0(t)·P3  

  
  Gegeben seien  
  a) die Punkte P1, P2, ..., Pn 
  a) der Vorgänger-Punkt P0 = P[0] und 
  b) der Nachfolge-Punkt Pn+1 = P[n+1] , dann
  d) Berechne jeweils für t = 0...1 step=(ca. 1/25)

  co = cos(π·t/2); si = sin(π·t/2);
  P(t, P0,P1...P2,P3 ) = (co*(co*(P1+P3)+P1-P3) + si*(si*(P0+P2)+P2-P0))/2
  ...
  Allg. mit i = 1 ... n step 1
  P(t, P[i]...P[i+1] ) = 
       0.5*( co*(co*(P[i  ]+P[i+2])+P[i  ]-P[i+2] ) 
     +       si*(si*(P[i-1]+P[i+1])+P[i+1]-P[i-1] ) );


  Für P(t, P[i-1], P[i]..t..P[i+1], P[i+2] ): 
  berechne für t = 0...1 step=(ca. 1/25) mit 

  co = cos(π·t/2); 
  si = sin(π·t/2); 

  die Path-Punkte

  x(t) = 0.5*(co*(co*(x[i]+x[i+2])+x[i]-x[i+2]) 
            + si*(si*(x[i-1]+x[i+1])+x[i+1]-x[i-1]));

  y(t) = 0.5*(co*(co*(y[i]+y[i+2])+y[i]-y[i+2]) 
            + si*(si*(y[i-1]+y[i+1])+y[i+1]-y[i-1]));
t-spline.png

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 29.4. um 12.00 Uhr