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.
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.
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 ).
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.
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.
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
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; }
Hinweise in der Veranstaltung.
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)
Hinweise in der Veranstaltung.
Hinweise in der Veranstaltung.
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