XProfan

- Seite 42 -

HofK

Die Grafik ist nun integriert. [...]

Das 8*8 = 64 Maxipixel Display ist funktionsfähig. Es ist wie der RAM und weitere Komponenten mittels THREE.InstancedMesh realisiert.

Die Farbumschaltung weiß/schwarz erfolgt mittels
iMeshMGA.setColorAt( i * 8 + j, colorBlack ); und zurück mit
iMeshMGA.setColorAt( i * 8 + j, colorWhite );

i ist Zeile, j Spalte

Klickt man auf ein Maxipixel, wird die RAM Adresse F7 = 247 entsprechend kodiert gefüllt.

Die letzten 8 Zeilen des RAM sind der Grafikspeicher, klassischer Shared Memory.

Möchte man nun interaktiv auf das Display zugreifen, benötigt man ein passendes Assemblerprogramm.

Z.B. Malprogramm.txt dort zu finden [...]

HC680 Assembler    ;Malprogramm klick
00: ST             ; Startadr.
Adr Mnm _Op_ _Op_  ;  - Kommentar -
00: LDC .D0.       ;Maske für Klick-Bit im Pixelbyte
01: ##  0000 1000  ;
02: SSR .D0.       ;Maske für Klick-Bit nach SD0 für Test
03: LDC .D1.       ;Maske Pixel-Bit im Pixelbyte
04: ##  1000 0000  ;
05: LDC .A1.       ;Adresse Pixelbyte = Maske klick-Bit 0 setzen
06: ##  1111 0111  ;
07: MOV [A1] .A0.  ;Pixelbyte initialisieren (Null setzen)
08: LDC .A0.       ;Sprungadresse für Klick
09: ##  0001 0010  ;
0A: SSR .A0.       ;Sprungadresse für Klick merken
0B: GSR .A0.       ;<-- Sprungziel Haupt- und Klickschleife; Sprungadr. für Klick holen
0C: MOV .D0. [A1]  ;Pixelbyte nach D0
0D: BTS .D0.       ;Test gegen SD0 ob Klick Bit gesetzt ist
0E: JIZ .A0.       ;Sprung aus Schleife wenn Klick-Bit 1
0F: LDC .A0.       ;Adresse Rücksprung Klickschleife
10: ##  0000 1011  ;
11: JMP .A0.       ;Rücksprung Klickschleife
12: LDC .A0.       ;<-- Sprungziel bei Klick-Bit, lade Sprungziel Pixel setzen
13: ##  0001 1100  ;
14: NOT .D0.       ;Negativ Flag zur Unterscheidung: Pixel ist 1=schwarz/0=weiss
15: JIN .A0.       ;Sprung zu Pixel setzen
16: NOT .D0.       ;--- Pixel löschen:  NOT rückgängig machen
17: SHL .D0.       ;Bit schwarz rausschieben
18: SHR .D0.       ;Bit 0=weiss wieder reinschieben
19: LDC .A0.       ;Adresse Sprungziel: Überspringen von Pixel setzen
1A: ##  0001 1110  ;
1B: JMP .A0.       ;Überspringen von Pixel setzen
1C: NOT .D0.       ;<-- Sprungziel Pixel setzen, NOT rückgängig machen
1D: OR  .D0. .D1.  ;Pixel-Bit mit Maske setzen
1E: AND .D0. .A1.  ;<-- Sprungziel: (Überspringen Pixel setzen),  Klick Bit zurücksetzen
1F: MOV [A1] .D0.  ;Pixelbyte aus D0 neu setzen
20: LDC .A0.       ;Rücksprungadresse Haupt-Schleife
21: ##  0000 1011  ;
22: JMP .A0.       ;Rücksprung Haupt-Schleife

Das Programm laden, starten und den Schieber für clock speed nach rechts mindestens bis zur Mitte schieben. Dann "gemütlich" auf ein Pixel klicken und warten, bis es sich schwarz färbt. Keine Hektik dabei, es braucht seine Zeit!

Dann kann man per Klick auch wieder auf weiß wechseln.

Geht man im RAM ganz nach unten, kann man die gespeicherten Bits sehen.

Es klappt im Browser sogar besser als in der Originalversion. Dort sind die verschachtelten Ereignisschleifen ein Problem. Auch hält dort das Programm an, wenn man im RAM nach unten geht um zu schauen. Die Ereignisbehandlung durch Windows ist eben anders als im Browser.

Man kann auch ein Assembler-Programm schreiben, das ein gewünschtes Bild erstellt. Auch Laufbilder sind kein Problem. Man muss nur die RAM Adressen F8 bis FF entsprechend füllen.

11.05.2021 ▲

p.specht

[OFFTOPIC]Tolle Sachen machst du da! Beim Mitlesen bekommte ich allerdings den Eindruck, daß es sich um zwei verschiedene Großprojekte handelt, denen inzwischen jeweils ein eigner Themenbereich gebühren würde - oder sehe ich da was falsch?[/OFFTOPIC]

XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...

12.05.2021 ▲

HofK

[OFFTOPIC]
Das "Großprojekt"- besser "Langzeitprojekt" ist die Portierung der 8 Bit CPU Simulation von Windows/XProfan/Deutsch zu Browser(Firefox)/Deutsch/Englisch unter Nutzung von three.js.

Curved2Geometry entstand aus einer Frage auf discourse [...]

und ist abgeschlossen.

Wie bisher werde ich solche kleinen Sachen nebenher machen. Sonst wird es zu langweilig. Die Portierung erfordert noch viel fleißige Kleinarbeit, dann die Hilfen, Deutsch zu Englisch usw.

Demnächst werde ich das noch unvollständige Anfängerbeispiel [...]

weiter ergänzen. Da gibt es noch eine to do Liste.

Aber es dreht sich immer um three.js 3D Grafik im Browser.

[/OFFTOPIC]

13.05.2021 ▲

p.specht

[OFFTOPIC]Geklärt, danke![/OFFTOPIC]

XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...

13.05.2021 ▲

HofK

Nach der Grafik waren die Tastatureingaben dran.

Dabei gilt es zwei unterschiedliche Fälle zu behandeln.

Während das binäre Maschinenprogramm läuft, muss auf jeden Tastendruck reagiert werden. Handelt es sich um ein Tastaturzeichen und keine Steuertaste, ist der binäre Wert in das Tastaturbyte des RAM einzutragen. Dazu das Zeichen und der hexadezimale Wert.

Drückt man mit Shift das Ä, sieht das so aus.

Kommt im Binärcode bei der Abarbeitung der Assemblerbefehl INP
muss auch die Eingabe mehrerer Ziffern möglich sein, um den Zahlenraum abzudecken.

Die Programmierung unterscheidet sich grundlegend von der Lösung mit XProfan.

Bei der laufenden Eingabe erscheint das Zeichen in einem span Element, beim INP Befehl gibt man in ein input, text Element ein. Bei XProfan reicht ein Edit-Feld, in das auch ausgegeben wird. Beim Browser macht da das "Eigenleben" einen Strich durch die Rechnung, man erhält doppelte Anzeigen. Mag sein, dass ich den richtigen Trick nicht gefunden habe.

Die zwei Elemente liegen übereinander und werden bei Bedarf sichtbar gemacht.

Beim Testen der laufenden Tastatureingabe stoppte plötzlich das Binärprogramm, obwohl ich nicht auf den Startbutton geklickt hatte.

Da ich "wild" auf der Tastatur herumgehämmert hatte, wusste ich nicht, ob es irgendeine Taste war. Die Steuertasten hatte ich vorher bereits aussortiert.

const noChars = ['Shift', 'Control', 'Alt', 'AltGraph', 'Enter', 'Backspace', 'Insert', 'Delete', 'Home', 'End', 'PageUp', 'PageDown', 'Escape', 'Tab',  'CapsLock', 'Pause', 'ScrollLock', 'NumLock', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'OS', 'ContextMenu', 'Dead' ];

function onWindowKeyDown( event ) {

    if( progRuns && !paused && !onInput ) {

        let key = event.key;
        let noChr = false;

        for ( let i = 0; i < noChars.length; i ++ ) {

            noChr = noChr || ( key === noChars[ i ] );

            if ( noChr ) break;

            }

            if ( !noChr ) {

                key = key[0];// wichtig bei toten Tasten 'Dead'
                settext( inpKey_, key );// ... Zeichen in key Eingabe
                console.log('key ', key, '  key.ord( ) ', key.ord( ) ) //////////////////////////////////////////////////////////////////////////////////
                btmp = d255_to_bin8( key.ord( ) );
                settext( altinp_, key.ord( ) > 127 ? bin8_to_dez( btmp ).str( ) :'' );	// Wert des Zeichens darstellen
                settext( binp_, btmp );// binär anzeigen
                settext( hinp_, "h" + bin8_to_hex2( btmp ) );// hexadezimal anzeigen
                settext( ans_, key );// ANSI anzeigen
                RAM[ 246 ][2] = btmp;// RAM Adr 246 = hF6 binär eintragen ...
                rf_binRAM( 246 );
                RAM[ 246 ][3] = key + "    h" + bin8_to_hex2( btmp );// ... Zeichen und Wert hexadezimal eintragen
                rf_assFlagsRAM( 246 );

            }

        }

    }

Es stellte sich heraus, dass es beim drücken der Leertaste passiert. Mit console.log das event ausgegeben zeigte es sich, dass tatsächlich die Leertaste Schuld ist. Jedenfalls in Firefox!!! - siehe Bemerkungen weiter oben.

Da ich mich nie intensiv mit den Events beschäftigt hatte, musste ich erst einmal schauen und stellte fest, dass das 'click' nicht mehr genutzt werden sollte. Wegen der mobilen Geräte ist neuerdings das Pointer-Event zu wählen.

Also umgestellt. Damit funktioniert es nun und das Leerzeichen funkt nicht mehr dazwischen.

Ausprobieren - auch Konsole öffnen [...]

Hinweis: onPointerDown ist mittlerweile onStartbinPointerDown

20.05.2021 ▲

HofK

Zwischendurch mal wieder eine kleinere Sache.

Da waren Fragen auf discourse
Animation. Move object along complex paths [...]

Struggling with paths [...]

Daraufhin habe ich verschiedene Lösungsansätze ausprobiert. Aber ohne wirklichen Erfolg. Mit Quaternionen bin ich nicht zum Ziel gekommen, aber mit Matrizen hat es nach einem blöden Fehler von mir dann geklappt. Der Fehler verursachte eine Spiegelung mit flackern. Da ich es mir nicht erklären konnte, habe ich eine Frage auf discourse formuliert. [...]

Bevor eine Antwort kam , habe ich den Fehler aber selbst gefunden. Ein Minus vor einem Vektor fehlte, in three.js mit .negate( ) zu notieren.

Nun bewegt sich die Biene exakt zur Raumkurve. Siehe [...]

03.06.2021 ▲

HofK

Im Anfängerbeispiel [...]

gab es bisher zwei Bienen an fester Position. Eine Biene bleibt im Schritt 3 fixiert, die andere bewegt sich nun im Schritt 15 auf ihrer Flugbahn mit Start an der Wabe.

Dazu gibt es vorher im Schritt 14 noch die Darstellung einer Raumkurve mittels THREE.LineLoop (oder nur Line für nicht geschlossene Kurven).

05.06.2021 ▲

HofK

Nach dem Bienenflug habe ich jetzt noch das Autorennen [...]

auf einen neuen Stand gebracht. In der alten Version wurde das Objekt nur um die y Achse gedreht. Ist die Straße nicht waagerecht entspricht das natürlich nicht der Realität.

Außerdem hatte ich statt Autos nur Quader benutzt. Jetzt ist es realistischer. [...]

12.06.2021 ▲

p.specht

... faszinierend!

XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...

12.06.2021 ▲

HofK

Auf discourse gab es mal wieder eine interessante Frage.

Wie extrudiert man einen Pfad? [...]

Mir fiel dann ein, dass ein kürzlich zu einer anderen Frage erstelltes Beispiel nur leicht abgeändert eine mögliche Variante ist. Siehe [...]

Dort zu finden [...]

17.06.2021 ▲

HofK

Beim Autorennen ist die Berechnung mit den Matrizen M3 und M4 etwas aufwändig. Ich habe weiter nach einer Möglichkeit gesucht, um aus dem System Tangente, Normale, Binormale unmittelbar die Quaternation zu bestimmen.

Eine Anfrage auf stackoverflow [...]

blieb erfolglos.

Nach einigen Versuchen habe ich dann selbst die Lösung gefunden.

Die Lösung basiert darauf, dass man die neue Basis als Rotation der Ausgangsbasis auffasst. Daraus erhält man eine Rotationsmatrix, in diesem Fall ist es einfach die Transponierte.

Verbindet man dies nun mit der bekannten Transformation Rotationsmatrix zu Quaternion [...]

erhält man den richtigen Algorithmus.

Auf den ersten Blick gibt es kaum einen Unterschied, da die Transponierte benutzt wird. Man beachte aber die Vorzeichen.

Man kann die neue Methode .setFromBasis zur three.js class Quaternion hinzufügen

class Quaternion {

    constructor( x = 0, y = 0, z = 0, w = 1 ) {

        this._x = x;
        this._y = y;
        this._z = z;
        this._w = w;

    }

    setFromBasis( e1, e2, e3 ) {

        const	m11 = e1.x, m12 = e1.y, m13 = e1.z,
        m21 = e2.x, m22 = e2.y, m23 = e2.z,
        m31 = e3.x, m32 = e3.y, m33 = e3.z,
        trace = m11 + m22 + m33;

        if ( trace > 0 ) {

            const s = 0.5 / Math.sqrt( trace + 1.0 );
            this._w = 0.25 / s;
            this._x = -( m32 - m23 ) * s;
            this._y = -( m13 - m31 ) * s;
            this._z = -( m21 - m12 ) * s;

        } else if ( m11 > m22 && m11 > m33 ) {

            const s = 2.0 * Math.sqrt( 1.0 + m11 - m22 - m33 );
            this._w = ( m32 - m23 ) / s;
            this._x = -0.25 * s;
            this._y = -( m12 + m21 ) / s;
            this._z = -( m13 + m31 ) / s;

        } else if ( m22 > m33 ) {

            const s = 2.0 * Math.sqrt( 1.0 + m22 - m11 - m33 );
            this._w = ( m13 - m31 ) / s;
            this._x = -( m12 + m21 ) / s;
            this._y = -0.25 * s;
            this._z = -( m23 + m32 ) / s;

        } else {

            const s = 2.0 * Math.sqrt( 1.0 + m33 - m11 - m22 );
            this._w = ( m21 - m12 ) / s;
            this._x = -( m13 + m31 ) / s;
            this._y = -( m23 + m32 ) / s;
            this._z = -0.25 * s;

        }

        this._onChangeCallback();
        return this;

    }

}

oder mit

THREE.Quaternion.prototype.setFromBasis = function( e1, e2, e3 ) { ... }

in seinen Code integrieren.

Lösung dort benutzt: [...]

[...]

24.06.2021 ▲

p.specht

Ich würde gerne im roten Auto mitfahren - oder mit einer mitlaufenden Kamera dahinter zuschauen... (Ein Depp kann sich mehr wünschen als 10 Baumeister bauen)

XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...

24.06.2021 ▲