Web-App "Regressionsanalyse" Titel: "Regression mit Canvas"

George S. Trimble: Das größte Hindernis für den wissenschaftlichen Fortschritt ist die Weigerung einiger Leute, Wissenschaftler mit eingeschlossen, zu glauben, dass unbegreiflich scheinende Dinge wirklich geschehen können.


Web-App-Projekt "Regressionsanalyse" Wissenschaft, Mathe, Regression, DC, Canvas, ...

Zu dem Web-App-Projekt "Regressionsanalyse" gehören Mathematik, Forschung, Präsentation, Statistik,usw. und Grundkenntnisse der Computergrafik. Kenntnisse auffrischen: Siehe z.B. Wikipedia: Lineare Regression , Statistik und Regressionsanalyse ( grafische Darstellung der Regressionsanalyse, Statistik ), Methode der kleinsten Fehler-Quadrate , Regressionsanalyse ( allgemein ). Methode der kleinsten Fehler-Quadrat-Summe, Curve fitting gehören zu den robusten Regressionsverfahren.


Eigene Bibliotheken Wie geht das?

Zu jeder Software ( bis auf sehr sehr einfache Programmen ) gehören stets mögliche Fehler-Zustände, Ausführungslücken, Laufzeitdifferenzen, Diskrepanzen zwischen Ist und Soll-Zuständen, Kompexitätsgap's, usw. Der technologische Wandel bedingt Software-Anpassungen und Restrukturierungen. Es gibt Refactoring, Update-Lawinen, Kompexitäts-Chaos, usw.

Bibliotheken schaffen Möglichkeiten der Wiederverwendbarkeit aber auch ( proprietäre ) strukturelle Abhängigkeiten. Für Webentwicklungen gibt es zahlreiche ( JavaScript ) Bibliotheken und Frameworks .

Hier können (auf der Basis von ECMAScript und DOM ) eigene Bibliotheken entwickelt werden, die sich leicht an neuen Anforderungen anpassen lassen. Beispiele: Die Datei dom.js mit dem selbst entwickelten ECMAScript-Quelltext einer DOM-Bib für DOM-Manipulationen In dieser Datei dom.js sollen die DOM-Zugriffsfunktion möglichst auch mit .querySelectorAll() organisiert werden können. Die Datei visu.js mit dem ECMAScript-Quelltext ist für VISU-Bib zum Anzeigen und Präsentieren von Informationen Ebenso store.js und browser.js ( später kommt crypt.js ajax.js, usw. hinzu ) Canvas-Bib ( Rendering im Context2D ), usw. Siehe Eigene Bibliothek ( Schnellkurs zum selbst erstellen ) und ECMAScript-Namespaces .

Bei Web-Dokumenten kann für dieses Projekt die Erstellung der DOM-Bibliothek sind hilfreich sein ( siehe z.B. DOM-Einführung , DOM-Selectoren , document-Fragmente , doc-querySelectorAll , Ecmascript-Namespaces ).

Es können "self made" ( DOM-Canvas- ) Bibliotheken erstellt, getestet, verwendet werden. Gesichtspunkte sind Einfachheit, Robustheit, prägnante Klarheit, Paxisnähe. Die Canvas-App ( Name z.B. "cf2d" = Canvas für 2D Geometrie ) soll praktisch, robust und ästetisch ansprechend sein. Eingabewerte für geometrische Daten, Simulationen, Agenta, Styles, usw. werden mit Hilfe einer Textarea TA0 gemacht. Animationsmöglichkeiten ( .resize, .setInterval, usw. ) der Canvas-Grafiken sind optional. Beispiele: Draw-Mathe-Functionen ( mit Welt-Viewport und Canvas).

Verwende auch z.B. JSLint.com ( ECMAScript-Qualitätstool ).


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

Ein Wissen um die Bedienung von Grafik-Programmen ist für eine erfolgreiche Toolchen-Entwicklung, der Erstellung einer "self-made" Canvas-Bibliothek wohl nicht hinreichend, wenn Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen benötigt werden. "Plagiate sind out".

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


Grafischer Device-Context DC und Canvas

Wird in der Veranstaltung behandelt.

Gesichtspunkte für die zu entwickelnde App sind Einfachheit, Robustheit, prägnant Klarheit, Paxisnähe. Die eigenen App-Ideen ( mit Alleinstellungsmerkmal ) können z.B. hin gerichtet sein auf

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.


Canvas ( Funktionsnamen ) 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

Canvas Kontext ( ctx und ctx.canvas ) debug-Beispiele

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

Grafik: Welt-Viewport-Abbildung Pflicht!

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.

    y-Achse
     | 
yMax | . . . . . . . . . . . . . . . . . 
     |                                 .       Welt-Ebene
     |                                 .
     |      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

      iMin=0                    iMax = cxt.canvas.width;
jMin=0 |-------------------------|------- i-Achse 
       |    jMin <= j <= jMax    .                      Geräte-Ebene ( Canvas)
       |                         .
       |    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; 
}

Beispiel: Berechnung der Berechnung der Regressionsgeraden Lineare Regression

Hinweise in der Veranstaltung.


Beispiel: Polynomiale Ausgleichskurven y(x) = a0 + a1x + a2x^2 +...+ anx^n
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 ) ..  ).

Für gegebene P1(x1,y1) und P2(x2,y2) geht die Gerade P( x(t), y(t) )  durch P1 und P2:

x(t) = (1-t) x1  + t x2
y(t) = (1-t) y1  + t y2

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

Ellipse:
x(t) = x0 + a cos(t)
y(t) = y0 + b sin(t)

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

Hinweise in der Veranstaltung.


ECMAScript: Funktionen dynamisch erzeugen new Function()

Hinweise in der Veranstaltung.

Toolchen entwickeln   App-Start  

Hinweise in der Veranstaltung. Hier ein Anfang app-start ( Regression und Canvas )

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Mo 12.00 Uhr