SVG und grafisches Design, Kunst, Ornamentik Ästetik-Designer-App

Antoni Gaudí: Farbe in der Architektur muss intensiv und logisch sein.
Nach Antoni Gaudí, aber sehr frei übersetzt: Ursprünglichkeit besteht in der Hinwendung zur numinosen Quelle, aus der sich das Orginal in Einfachheit vervielfacht. Meine Ideen sind von einer indiskutablen Logik, aber es bleiben Zweifeln, dass diese verfügt waren.

Motivation Ideenfindung

Antoni Gaudí ( bedeutenster Architekt in Barcelona ) ist für einen eigenwilligen Stil von runden, organisch wirkenden Formen bekannt. Zu Gaudí gehören in Barcelona herausragende Bauten. 7 wurden zu Weltkulturerbe erklärt. Siehe Gaudí ( unesco.org ).

Gaudís ( Bau-) Werke erscheinen dem betrachtenden Menschen oft wie scheinbar chaotisch verschlungene Linien, wie organische Formen, geschwungene Fassaden und zeigen kein vordergündiges Konzept (Beispiele von l nach r:gaudi-krypta-der-colonia-geli-buntglasfenster, gaudi-casa-vicens-detai-des-turms, gaudi-escuelas-de-la-sagrada-familia).

gaudi-krypta-der-colonia-geli-buntglasfenster gaudi-casa-vicens-detai-des-turms gaudi-escuelas-de-la-sagrada-familia

Beispiele mit Websuche von "bilder+gaudi+weltkulturerbe": Artikel und Bilder von de/en.wikipedia: Park Güell , Bildfolge Park Güell , Category Mosaics in Park Güell , Park Güell Zoom

List of Gaudí bbuildings und Bildfolge Sagrada Família Schools


Bilder zur freien Verwendung: Hier einige Testbilder .

Beispiele: Tätowierungen, Arabesken, Rosetteen-Ornamente, Maori Holzarbeiten

Ein sich in gewisser Weise selbstähnlich wiederholendes, geometrisches Muster wird in der dekorativen Kunst Ornament (lat. schmücken, zieren, ordnen, rüsten ) genannt. Ein Ornament besteht aus einzelnen Teilen, deren Gesamtheit eine symbolisch-mythisch-ästetischer Ausdruckskraft innewohnt. Beispiele:

Stuckdecke; Aboriginal-art, 3200–2500 v.Chr; Tattoo Papua-New-Guinea im heiratsfähigen Alter

Gitterwerk,Stuckdecke Aboriginal-art, 3200–2500 v.Chr Tattoo Papua-New-Guinea im heiratsfähigen Alter

Höhle von Lascaux ( 16000 Jahre altes Bild ), Aboriginal-art ( Traumzeit ):

Höhle von Lascaux, 16000 Jahre altes Bild
Höhle von Lascaux, 16000 Jahre altes Bild
Aboriginal-art, Traumzeit
Aboriginal-art, Traumzeit
Aboriginal_Art_Australia.jpg
Aboriginal Art Australia


Maori Holzarbeiten , Aboriginal Art: Bilder vom Bradshaw-Gebirge , Aboriginal Rock Art .


SVG/Canvas - Hinweise Grafische Bibliotheken

3D-Abbildungen: Grafik Quickstart

Beispiele für dieses App-Projekt sind z.B. 2 1/2 D Präsentationsgrafiken, Mediengestaltungen, Balkendiagramme, Tortendiagramme, Geo-Algebra, geometrische Formen ( de.wikipedia: Dreieck , Sierpinski-Dreieck , mathworld: Perfektes Rechteck , usw. ), 3D digitales Geländemodelle siehe de.wikipedia Polygonfläche und Schwerpunkt ( Gauß-Ellington ), usw.


Weblinks OpenGL, WebGL, SVG, Canvas Grafik-Grundkenntnisse auffrischen

Für eine erfolgreiche Toolchen-Entwicklung ist es für die Erstellung von "self-made" Bibliotheken wohl nicht hinreichend, wenn bei Grafische Elementen Events und Geräteeigenschaften benötigt werden. Für Entwickleraufgabenist das Wissen um die Bedienung von proprietären Grafik-Programmen nich hinreichend.

Falls erforderlich, können/sollen Grafik-Kenntnissen aufgefrischt werden. Hierzu bitte die internen Weblinks zu dem notwendiges Grafik-Grundwissen und Canvas nachlesen.

Beispiele für "kleine" SVG-Bibliotheken: SVG.js, Snap.svg, Bonsai.js, Paper.js, Raphaël, Two.js, Velocity.js, Vivus.js und mehr


OpenGL / WebGL / Canvas 3D-Grafik, BREP

Zu einer dreidimensionalen realen Welt gehören 6 Freiheitsgrade , d.h. 6 frei wählbare Bewegungsmöglichkeiten ( 3 Translationsfreiheitsgrade und 3 Rotationsfreiheitsgrade ). Eine quasi realitätstreue 3D-Darstellung/Abbildung der Wirklichkeit wird 3D-Darstellung genannt.

Bei einer Simulation dient ein mathematisch-physikalisches Modell als Ersatz für die Untersuchungen eines reales ( kompexen ) Systems. Die Simulationsergebnisse hängen von den Modell-Parametern und dem gewählten Modell ab. Simulationen sind z.B. weltweite Klima-Wetter-Simulationen, Untersuchungen von Verkehrsaufkommen, Prognosen für die Finanzwelt.

Weblinks zu geometrischen Modellierung:


Visual Processing Unit (Hardware) VPU, GPU

Wie können digital-analog-Transformationen auf Ausgabegeräten innere Bilder erzeugen?

Eine GPU/VPU (Visual/Graphics Processing Unit) ist ein "single-chip processor", der bei dynamischen Videos und bewegten Grafiken den zentralen Prozessor entlastet und die Performance von Renderprozessen befördert. GPU/VPU übernehmen spezielle Grafikberechnungen und Augaben von massiv parallelisierbare Render-Prozessen. Ab 1990er Jahre gab es 3D-Beschleuniger-Karten für Z-Puffern, Texture Mapping, Skinning und Antialiasing. Siehe z.B.
Grafikprozessor , Grafik-Hardware (Datenbak, Übersicht über Grafik-Karten),


Sensoren, Aktoren (Hardware) Hardware

Sensoren, Aktoren, Geometrien, Datenflüsse, ... 

 2-D or 3-D Graphiken
 Rendern von ("gefüllten") Polygonen
 Texture mapping, Skinning
 PC mit Video-Card auf dem Motherboard
 Graphik Software ( CAD, rechnergestützte Konstruieren )
 Spielkonsolen mit Sensoren, Aktoren, Geometrien, Datenflüsse, ...
    MPEG decoding
    Wii ( Nintendo ) 
    PlayStation 3 ( Sony ) 
    Xbox 360 ( Microsoft )

Beispiel: DirectX (Hardware) Hardware

DirectX ist eine Sammlung von multimediaintensive Anwendungen, die per COM-basiertes API ( Application Programming Interface ) unterstützt werden, Spiele, Spielkonsole und mehr. 

  
DirectX, 
  Graphics Device Interface (GDI) und 
  Display Device Interface (DDI) und 
  Direct2D/3D-Grafik.
DirectX Media Objects, 
  Audio- und Video-Ströme direkt ändern 
Direct3DX setzt auf Direct3D auf, kann mit 
  Hardware Emulation Layer (HEL) Bildern mit GDI-Funktionen manipulieren,
  Seitenumschaltung (Flipping, Doppelpufferung), Blitting, Clipping, 
  3D-Z-Puffer, Overlays und direkte Steuerung des Datenflusses durch die 
  Video-Port Hardware (Video-Port Manager)
DirectSound,Wiedergabe und Aufnahme von Soundeffekten, 
  Raumklangunterstützung
DirectMusic, Wiedergabe von Musik, 
  MIDI-Musik, kein MP3,Software-Synthesizer-Service
XAudio 2, programmierbaren DSP-Programme 
Direct Input, XInput, 
  Eingabegeräte, wie Tastatur, Maus, Joysticks, 
  absolutes Koordinatensystem,  Bewegungsachsen, bis 32 Knöpfe,
  Vibrieren eines Gamepads, Widerstand beim Bewegen
DirectPlay, Kommunikation von Multiplayerspielen, Netzwerkspielen, 
  Online-Spielen, OSI-Modell, DirectPlay Session
DirectSetup, Installationsroutine, automatisch Prüfungen

WebGL und Kontexte Games, Simulationen,

In allen Wissenschaften und im Alltag sind Render-Funktionalitäten für ein dreidimensional gestaltetes Weltbild grundlegend. WebGL wird in zahlreichen Wissenschaften und Kontexten verwendet. Beispiele:
Optical flow ( en.wikipedia )


Khronos Industriekonsortium Arbeitsgruppen

Khronos Group ( wikipedia ), Khronos.org
WebGL Specs latest/2.0/ Developers reference-cards opengl43-quick-reference-card.pdf OpenGL specs GLSLangSpec.4.60.pdf


WebGL-Tutorials Mozilla

Einführung ( developer, mozilla.org )
WebGL2 ( fundamentals.org ),
WebGL2 Lessons ( fundamentals.org ),
jsfiddle.net/api/mdn/


WebGL-Referenzen ( Datenaustauschformate ) Cheat_Sheet

Reference Guides/Reference Cards ( Khronos, Download all latest )
3D Asset Exchange Schema ( austauschbare Speicherformate ) COLLADA 1.5.0 Schema (includes B-rep, geolocation, and OpenGL ES 2.0 Profile) Kategorie: CAD-Datenformat
Grafische Primitiv
3D Dateiformate
DXF ( Autocad )

WebGL-Frameworks: 

WebGL-Frameworks:
https://threejs.org/examples/
https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

https://de.wikipedia.org/w/index.php?title=A-Frame_(Framework)&printable=yes
WebGL2.0 ( OpenCL ) Programmierschnittstelle

OpenCL ( royalty-free ), khronos.org: OpenCL , OpenCL 2.2 Reference-Guide

GLSL (GL Shader Language) entspricht einer "strictly typed C/C++ like language" von einer OpenGL-Basis. 2017 aktuell GLSLangSpec.4.60; Siehe z.B. Wikipedia OpenGL Shading Language , Khronos.org GLSLangSpec.4.60.pdf 

 attribute    const     uniform   varying    buffer    
 shared       coherent  volatile  restrict   readonly    writeonly
 atomic_uint  layout    centroid  flat       smooth      noperspective  
 patch        sample    break     continue   
 do           for       while     switch     case        default     
 if           else      subroutine   in      out         inout    
 float        double    int       void       bool        true  false    
 invariant    precise   discard   return    

 mat2     mat3     mat4                  
 mat2x2   mat2x3   mat2x4    
 mat3x2   mat3x3   mat3x4    
 mat4x2   mat4x3   mat4x4    

 dmat2     dmat3     dmat4    
 dmat2x2   dmat2x3   dmat2x4    
 dmat3x2   dmat3x3   dmat3x4    
 dmat4x2   dmat4x3   dmat4x4    

 vec2    vec3    vec4    
ivec2   ivec3   ivec4    
bvec2   bvec3   bvec4    
dvec2   dvec3   dvec4    
uint    uvec2   uvec3   uvec4    

lowp    mediump    highp    precision    

samplerCube       
samplerCubeShadow    
sampler1D            sampler2D         sampler3D   
sampler1DShadow      sampler2DShadow    
sampler1DArray       sampler2DArray    
sampler1DArrayShadow sampler2DArrayShadow    

 isampler1D   isampler2D   isampler3D   isamplerCube    
 isampler1DArray   isampler2DArray    
 usampler1D   usampler2D   usampler3D   
 usamplerCube    usampler1DArray   usampler2DArray    
 sampler2DRect    sampler2DRectShadow    
 isampler2DRect    usampler2DRect    samplerBuffer    
 isamplerBuffer    usamplerBuffer    sampler2DMS    
 isampler2DMS    usampler2DMS    sampler2DMSArray    
 isampler2DMSArray    usampler2DMSArray    
 samplerCubeArray  samplerCubeArrayShadow   
 isamplerCubeArray   usamplerCubeArray    
 image1D    iimage1D    uimage1D    image2D    iimage2D    uimage2D

  image3D    iimage3D    uimage3D    image2DRect    
  iimage2DRect    uimage2DRect    
  imageCube    iimageCube    uimageCube    
  imageBuffer    iimageBuffer    uimageBuffer    
  image1DArray    iimage1DArray    uimage1DArray    
  image2DArray    iimage2DArray    uimage2DArray    
  imageCubeArray    iimageCubeArray    uimageCubeArray    
  image2DMS    iimage2DMS    uimage2DMS    
  image2DMSArray    iimage2DMSArray    
  uimage2DMSArray

Keywords reserved for future: 

 common    partition    active    asm    class    union    
 enum    typedef    template   this        resource         
 goto        inline    noinline        public    
 static    extern    external    interface    
 long    short    half    fixed    unsigned    
 superp    input    output    
 hvec2    hvec3    hvec4    
 fvec2    fvec3    fvec4    sampler3DRect                                 
 filter    sizeof    cast    namespace     using

Zu diesem Projekt gehören Teile von Mathematik, wie das Darstellen von parametrisierten Kurven, Ortskurven, grafische Darstellungen und dem Canvas-Device-Kontext. In diesem Zusammenhang stehen auch Gebiete, wie z.B. Lineare Regression , Methode der kleinsten Fehler-Quadrate , Curve fitting, Regressionsanalyse ( allgemein ), Statistik und Regressionsanalyse ( grafische Darstellung der Regressionsanalyse, Statistik ) und Data-Driven Documents ( D3 ).
Zu diesem Projekt gehören Grundkenntnisse der Computergrafik, die grafische Web-Präsentation von (Statistik-) Daten, Canvas2d-Web-Grafik mit DC und mehr.


OpenGL for (E)mbedded (S)ystems Was meint OpenGL ES? 
 - OpenGL ES steht für "OpenGL for (E)mbedded (S)ystems"

 - OpenGL ES ist eine Teilmenge von 
   OpenGL 3D Graphik-Interface (API).

 - OpenGL ES wird ( 2017 ) verwendet für 
   video game consolen 
   mobile Phones, Smartphones
   PDA (personal digital assistants) 

 - OpenGL ES arbeitet zwischen den 
   Software Anwendungen, 
   Software Graphics Engines 
   und der Hardware

 - OpenGL ES 3.0 entspricht WebGL 2.0  

 - OpenGL ES und WebGL sind "royalty-free"

Reference-cards, Cheat_Sheet Weblinks

WebGL-Referenzen ( Reference-cards, Cheat_Sheet ):
Khronos:
OpenGL-Refpages es2.0 WebGL Specs 1.0;
WebGL-Reference-card.pdf 2.0 1.0 von khronos
WebGL-Cheat-Sheet ( webglacademy.com )
Courses ( webglacademy.com ) 

 Exemplarisches:
https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html
http://svgjs.com
https://www.youtube.com/watch?v=IM8eTD01UE8
https://www.youtube.com/watch?v=af4ZQJ14yu8

wie drahtgitter: http://svg.tutorial.aptico.de/start.php

https://de.wikipedia.org/w/index.php?title=Technisches_Zeichnen&printable=yes
https://de.wikipedia.org/w/index.php?title=Liste_der_Schaltzeichen_(Elektrik/Elektronik)&printable=yes

Beispiele für SVG-Code:
https://commons.wikimedia.org/wiki/Category:Electrical_symbols?uselang=de

https://www.flaticon.com/search?word=svg

SVG-Grafik-Programme: https://inkscape.org/de/

Seit den Anfängen der elektronischen Datenverarbeitung gibt es zahlreiche, kommerzielle, umfangreiche Grafik-Programme, siehe z.B. de.wikipedia Grafiksoftware.


Canvas ( Canvas Kontext, Funktionsnamen, cnv.dataset ) Weblinks

HTML5 ermöglicht die eingebettete Verwendung von Canvas-Tags, die als Grafik-Flächen dienen. Eine "elektronische Zeichenfläche" wird engl. auch Canvas ( Leinwand, Gewebe ) genannt. Die Canvas-Unterstützung erfordert ECMAScript. Canvas bietet eine infache "nativ"-Schnittstelle.

Obwohl Canvas2DContext leichtgewichtig gegnüber WebGL, OpenGL, Silverlight ist, so gibt es doch nützliche Funktionen und Properties, wie z.B. ctx.translate(), ctx.translate(), ctx.scale(), ctx.createLinearGradient(), ctx.createRadialGradient() und shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor . Es gibt: 

Canvas2DContext hat u.a. Funktionen für 
'arc','arcTo','beginPath','bezierCurveTo','clearRect','clip',  
'closePath','drawImage','fill','fillRect','fillText','lineTo','moveTo',  
'quadraticCurveTo','rect','restore','rotate','save','scale','setTransform',  
'stroke','strokeRect','strokeText','transform','translate'
Properties, wie z.B.
'canvas','fillStyle','font','globalAlpha','globalCompositeOperation',  
'lineCap','lineJoin','lineWidth','miterLimit',
'shadowOffsetX','shadowOffsetY', 'shadowBlur','shadowColor',
'strokeStyle','textAlign','textBaseline'

Einige Canvas-Weblinks: 

whatwg  
the-canvas-element

whatwg  
beginPath()

en.wikipedia 
Canvas_element


de.wikipedia Canvas-HTML-Element,
whatwg.org the-canvas-element 2012,
simon Canva-Referenz-Karte, alles auf einen Blick
w3schools Canvas-Referenz, alles auf einen Blick
w3schools Canvas, Einführung
html5canvastutorials HTML5 Canvas-Tutorial,
opera  html-5-canvas-the-basics ,
opera  html-5-canvas-painting ,
mozilla  Canvas tutorial ,
mozilla DOM/EventTarget.addEventListener ,
apple Safari HTML5 Canvas Guide

Die Canvas-Browser-Unterstützung zeigt en.wikipedia: en.wikipedia: Comparison_of_layout_engines_&HTML5_Canvas

Was enthält der Canvas-Kontext ctx? Etwa ... 

canvas:[object HTMLCanvasElement]      fillStyle:#000000
font:10px sans-serif                   globalAlpha:1
globalCompositeOperation:source-over   lineCap:butt
lineJoin:miter                         lineWidth:1
miterLimit:10                          shadowBlur:0
shadowColor:rgba(0, 0, 0, 0.0)         shadowOffsetX:0
shadowOffsetY:0                        strokeStyle:#000000
textAlign:start                        textBaseline:alphabetic

Was enthält das HTMLCanvasElement ctx.canvas? Etwa ... 

ctx=accessKey:                       all:[object HTMLCollection]
attributes:[object NamedNodeMap]     baseURI: ...dat.htm
childElementCount:0                  childNodes:[object NodeList]
children:[object HTMLCollection]     classList:
className:                           clientHeight:220
clientLeft:6                         clientTop:6
clientWidth:320                      contentEditable:inherit
currentPage:0                        currentStyle:[object CSSStyleDeclaration]
dataset:[object DOMStringMap]        dir:
draggable:false                      dropzone:
firstChild:[object Text]             firstElementChild:null
height:200                           hidden:false
id:POLYGON_FLAECHE                   innerHTML:Browser kann kein Canvas
innerText:Browser kann kein Canvas   isContentEditable:false
itemId:                              itemProp:
itemRef:                             itemScope:false
itemType:                            itemValue:null
lang:                                lastChild:[object Text]
lastElementChild:null                localName:canvas
namespaceURI:http://www.w3.org/1999/xhtml 
nextElementSibling:[object HTMLScriptElement]
nextSibling:[object Text]            nodeName:CANVAS
nodeType:1                           nodeValue:null
offsetHeight:232                     offsetLeft:14
offsetParent:[object HTMLBodyElement] offsetTop:2535
offsetWidth:332
outerHTML:<canvas id="MYID" width="300" height="200" style="...">Browser braucht Canvas</canvas>
outerText:Browser kann kein Canvas   ownerDocument:[object HTMLDocument]
pageCount:1                          parentElement:[object HTMLElement]
parentNode:[object HTMLElement]      prefix:null
previousElementSibling:[object HTMLParagraphElement]
previousSibling:[object Text]        properties:[object HTMLPropertiesCollection]
scrollHeight:232                     scrollLeft:0
scrollTop:0                          scrollWidth:332
spellcheck:true                      style:[object CSSStyleDeclaration]
tabIndex:-1                          tagName:CANVAS
textContent:Browser kann kein Canvas title:
unselectable:      width:300         onscroll:null          onfocusin:null
onfocusout:null    onclick:null      onmousedown:null       onmouseup:null
onmouseover:null   onmouseenter:null onmousemove:null       onmouseout:null
onmouseleave:null  onmousewheel:null onkeypress:null        onkeydown:null
onkeyup:null       onload:null       onunload:null          onabort:null
onerror:null       onfocus:null      onblur:null            ondblclick:null
oncontextmenu:null oninvalid:null    onloadstart:null       onprogress:null
onsuspend:null     onstalled:null    onloadend:null         ontimeout:null
onemptied:null     onplay:null       onpause:null           onloadedmetadata:null
onloadeddata:null  onwaiting:null    onplaying:null         onseeking:null
onseeked:null      ontimeupdate:null onended:null           oncanplay:null
oncanplaythrough:null                onratechange:null      ondurationchange:null
onvolumechange:null                  oncuechange:null       onfullscreenerror:null
onfullscreenchange:null              onpagechange:null      ondragstart:null
ondrag:null                          ondragenter:null       ondragleave:null
ondragover:null                      ondrop:null            ondragend:null
oncopy:null                          oncut:null             onpaste:null
ontextinput:null

Wie können zahlreiche Parameter im Canvas-Tag gespeichert werden? Die Speicherung von numerischen Werten erfolgt als String. Beispiel: Die Objekt-Properties von var o = {id:"ID_CANVAS" mod:"isotrop", xmin:0, ymin:0, xmax:300, ymax:300, ... } werden als Strings cnv.dataset.myParameters in "ID_CANVAS" hinterlegt. 


function get_cnv(id) { return document.getElemenById(id).getContext('2d'); }

function set_cnv_data(o) { var i, k, keys = Object.keys(o), cnv = get_cnv(o.id);
   if (!o.imin) { cnv.dataset.imin = 0; }
   if (!o.imax) { cnv.dataset.imax = cnv.width; }
   if (!o.jmin) { cnv.dataset.jmin = cnv.height; }
   if (!o.jmax) { cnv.dataset.jmax = 0; }
   for (i = 0; i < keys.length; i += 1) { k = keys[i]; cnv.dataset[k] = o[k]; }
 }

// global: 
var MY_CANVAS_NUM_KEYS = ["imin", "imax", "jmin", "jmax", "xmin", "xmax", "ymin", "ymax", "xTi", "xSi", "yTj", "ySj", "xMou", "yMou"]; 

function get_cnv_data(id) { var i, k, r = Object.create(null), 
 cnv = get_cnv(id), keys = Object.keys( cnv.dataset ); // keys.length === MY_CANVAS_NUM_KEYS.length ?

 for (i = 0; i < MY_CANVAS_NUM_KEYS.length; i += 1) { 
   k = MY_CANVAS_NUM_KEYS[i];  
   r[k] = parseFloat(cnv.dataset[k]); 
 } return Object.create(r);
 }

Grafik: Welt-Viewport-Abbildung

Hinweise in der Veranstaltung. 

// 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)

Grafik: Paramterdarstellung von Kurven x(t), y(t)

Eine interpolierende Kurve geht durch die vorgegebenen Punkten. Eine approximierende Kurve geht durch/und/oder "angenähert" zu den vorgegebenen Punkten (polynomiale Ausgleichskurven, 2D-parametrische Ausgleichskurven ( curve fit ) .. ).

Wie lauten die x(t)-, y(t) - Formeln (Paramterdarstellung) der Geraden, wenn die beiden Geraden-Punkte P1(x1,y1) und P2(x2,y2) gegeben sind? 

 // Gerade:
 x(t) = (1-t)·x1  + t·x2     // Gegebene Punkte 
 y(t) = (1-t)·y1  + t·y2     // P1(x1,y1)  und P2(x2,y2)

Für <= t < 1; 0 <= x < 1; ergeben sich Geraden-Punkte P(x,y) die zwischen P1(x1,y1) und P2(x2,y2) liegen.

Für eine Ellipse: 

  // Ellipse:
  x(t) = x0 + a·cos(2·π·t)      // Ellipsen-Mittelpunkt (x0, y0) 
  y(t) = y0 + b·sin(2·π·t)      // Ellipsen-Halbachsen  ( a, b )

Für 0.00 <= t < 1.00 ergeben sich Ellipsen-Punkte P(x,y) auf der Ellipse-Linie.
Für 0.50 <= t < 1.00 ergeben sich Ellipsen-Punkte P(x,y) auf der "unteren" Ellipse^n-Linie.
Mit k = 0.,1.,2.,3 ergeben sich für 0.25·k <= t < 0.25·(k+1) Ellipsen-Punkte P(x,y) auf der Ellipse im "k-ten Quadranten".

Grafik: Regelflächen

Mit Hilfe von Parametern x(t),y(t),z(t) können zahlreiche Flächenkurven, Raumkurven, Raumflächen, usw. mathematisch beschrieben werden. Mathematische Beschreibungen werden für Projetionen und Transformationen benötigt. Siehe z.B. Projektionen , Transformationen mit Abbildungsmatrizen.

Infolge der Bewegung eine 3D-Vektos im 3D-Raum entstehen (gekrümmte) Regelflächen . Regeflächen kommen in der Technik vor, wie z.B. bei Werkzeugdatenbank, 3D-Drucker, Stanzen/Nibbeln, CNC-Systeme, 2.5D-Achsen Drehen, 2.5D und 3D-Fräsen, Mehr-Achsen simultan Fräsen, Drahterodieren 3D-Solid-Electrode 3D, Solid-Cut CAD, usw.

Gekrümmte Regeflächen kommen ( mit gewisser Passung ) in der Natur vor.


Beispiel: 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 P(n+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

ECMAScript: Funktionen dynamisch erzeugen new Function()

Wie können zum Zeichnen von mathematischen Funktionen y(x) die ECMAScript-Funktionen per Textarea-Text dynamisch erzeugt werden? Siehe z.B. im Quelltext dieser Seite die Funktion parse_tilde_key_val_strings_in_GLOB_VAR(s). Anstelle von einfachen Funktionen y(x) sind Ortskurven x(t),y(t) universeller, denn wenn x := t gesetzt wird, ergibt sich y(t) = y(x).


test_anzeige()
Beispiel: SVG-Symbol-Generator entwickeln Wie?

Mehr in der Vorlesung.

Wie können SVG-Symbole gemacht werden? Wie können SVG-Symbole in a-Tags verwendet werden? Wie kann ein Kunst-Designer-Toolchen gemacht werden? Hier einige Beispiele für a-Tags mit SVG-Symbolen ( <path d="..."></path> ):

SVG-Elemente draggable Einführendes

Das folgende Beispiel kann als motivierender Einstieg dienen. Mit Hilfe von ECMAScript können SVG-Elemente erzeugt werden. Mit Hilfe von "Drag and Drop" können Elemente mit der Maus positioniert werden. Plagiate und fremde Bibliotheken sind out. Als Basis für das zu erstellende selfmade-Toolchen dienen W3C-SVG, W3C-HTML und von ECMAScript ( non-poprietär ).

Das ECMAScript-Objekt vg ( vg = [V]ektor-[G]rafik, siehe Quelltext ) nimmt als Bibliothek die selbst erstellten Funktionen auf. Z.B. zeigt vg.el2top(el) das ausgewählte Objekt im Vordergrund an. Jedes SVG-Element, das mit der Maus positioniert werden kann, erhält die Attribute transform="matrix(a b c d e f) und onmousedown="vg.draggable(evt)" und mit dem Style .draggable {cursor: move;} bekommt der Maus-Cursor das "moveing-Icon".

Bitte Kreis oder ein Rechteck an einen anderen Ort ziehen und auch mal shiftKey/ctrlKey halten.

http://www.w3.org/wiki/SVG_Links

Anzeige: SVG-Quelltext SVG-Vorschau

Bertolt Brecht: Ich rate, lieber mehr zu können als man macht, als mehr zu machen als man kann.

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine gemäß Besprechung