c0ntroller/c0ntroller.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inital commit of Astro Website

Browse Source
This commit is contained in:
Daniel Kluge
2026-03-21 16:26:58 +01:00
commit bea1f0741d
60 changed files with 10838 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/content/book/chapters.json
+7
View File
@@ -0,0 +1,7 @@
{
"grundlagen": {
"name": "Grundlagen",
"order": 0,
"subtitle": "Hier geht's los"
}
}
src/content/book/grundlagen/0-0_der_anfang.mdx
+84
View File
@@ -0,0 +1,84 @@
---
title: Einleitung
chapter: grundlagen
part: 0
subtitle: Hallo Welt!
---
Jeder, der schonmal eine Programmiersprache lernen wollte, kennt diese zwei Worte.
> "Hallo Welt!"
Die Ausgabe dieser Zeichenfolge oder des englischen Äquivalents wird meist das Minimalbeispiel für eine Programmiesprache gezeigt.
Aber was braucht es eigentlich dafür, diesen simplen Satz anzuzeigen?
Auf Papier wäre das ganze trivial, es braucht einen Stift und ein paar gekonnte Handbewegungen.
Doch ein Prozessor kennt keine Handbewegungen. Und unsere Digitaltechnik kennt auch keine Buchstaben oder das Konzept davon.
Das einzige, was es gibt, ist "an" (1), "aus" (0) und Logik, die diese Zustände verknüpft.
Gehen wir also durch, was alles überhaupt passieren muss, damit diese zwei Wörter auf dem Bildschirm erscheinen können:
1. Wir müssen einen Programmcode schreiben, welcher aussagt, diese beiden Worte auszugeben.
2. Der Programmcode muss in ein Format kodiert werden, welches unsere Maschine lesen kann.
3. Der Maschine muss der Befehl gegeben werden, als nächstes unser kodiertes Programm auszuführen.
4. Die Ausgabe des Programmcode wird visuell auf dem Monitor angezeigt.
Das klingt erstmal ganz einfach.
Aber sobald man etwas tiefer geht, stellen sich viele Fragen:
- Wie kann ein Programm überhaupt beschreiben, dass Buchstaben ausgegeben werden, wenn nur Einsen und Nullen existieren?
- Wie kodieren wir denn etwas für eine CPU? Und in welchem Format?
- Wie und woher wird unser Programm den aufgerufen?
- Wie entscheidet sich, wann unser Programm ausgeführt wird? Unser Prozessor muss ja auch einen Desktop anzeigen und vieles mehr.
- Wie landen unsere Buchstaben auf dem Display? Und wie redet der Prozessor mit dem Display?
- ...
Mich selbst fasziniert die Welt der Digitaltechnik und daher habe ich mich entschlossen, einfach mal meinen Abstieg ins Hasenloch schriftlich festzuhalten, für alle die folgen wollen.
## Über den Autor
Vielleicht sollte ich mich erst einmal vorstellen.
Hallo, ich bin Daniel.
Ich habe Informationssystemtechnik studiert und habe Programmieren auch schon vorher als Hobby genannt.
Was habe ich für Qualifikationen, dass du ausgrechnet diese Seiten lesen solltest?
Nun – keine besonderen.
Ich habe keine Zertifikate, keine Lehrberechtigung und habe auch keine öffentlichen großen Projekte vorzuweisen, die man kennt.
Was ich allerdings habe, ist eine langjährige Leidenschaft für die verschiedensten Themen im Bereich Informatik.
Auf meiner [Startseite](/) hab ich auch mal versucht aufzulisten, in welchen Themengebieten ich mich schon verloren habe.
Einzig und allein das ist letzlich meine Motivation, dies hier anzugehen.
Zum Programmieren lernen gibt es schon viele Ressourcen in jeder Sprache.
Warum noch eine schaffen?
Aus persönlichem Anreiz.
Und das Folgende ist auch eine rein persönliche Sichtweise.
Gerade im Bereich der Informatik ist mir schon häufig aufgefallen, dass Lernressourcen gerne zeigen, wie man etwas _macht_, aber viel zu selten, wie es _funktioniert_.
Machen wir das mal an einem Beispiel, das greifbarer ist:
Ein Lied auf einem Klavier lernen und spielen kann prinzipiell jeder nach kurzer Zeit.
Um eigene Melodien zu kreieren, die gut klingen, braucht es aber Hintergrundwissen.
Tonalitäten, Taktarten, Akkorde – nur um mal die wenigen Begriffe in den Raum zu werfen, die ich kenne.
In einer Band muss man dann sogar Rücksicht auf andere Leute nehmen.
Und je mehr man sich mit dem Thema Musik und allem drumherum beschäftigt, desto besser wird man.
Sehr ähnlich verhält sich damit dem Programmieren:
Ein Programm für sich zu schreiben, um bspw. eine Aufgabe zu automatisieren, geht super schnell und ist überhaupt nicht schwer, wenn man etwas Zeit reinsteckt.
Und selbst ohne Zeit ist die Wahrscheinlichkeit heuzutage hoch, dass man mit nettem Fragen eine KI dazu bekommt, den erforderlichen Code nebst Anwendungsdokumentation auszuspucken.
Wenn das eine einmalige Sache bleiben soll, kann man in diesem Moment auch aufhören.
Aber um programmieren zu lernen, muss das gewonnene Wissen auch verstanden und verinnerlicht werden.
Und dazu gehört auch zu verstehen, was der Code eigentlich an welcher Stelle macht.
Häufig ist es sogar wichtig zu wissen, was man explizit nicht machen sollte, besonders für sicherheitskritische Anwendungen.
Nur so kann man am Ende Code schreiben, der lesbar und wartbar ist und natürlich funktioniert.
Das ist besonders wichtig, wenn man nicht die einzige Person ist, die jemals mit diesem Code arbeitet.
Wenn man dann noch die Hintergründe versteht, wie so ein Prozessor oder ein Betriebssystem überhaupt funktionieren, hat man den praktischen Teil der Informatik eigentlich auch schon durchgespielt.
Dafür lohnt sich dann aber vielleicht doch schon das Studium.
Mein Ziel für diesen Blog ist es, die Leser auf ihrem Wissensstand abzuholen.
Wenn kein Wissen da ist, kein Problem; dann fängt man einfach ganz vorn an.
Dich langweilt Gerede über Kontrollfluss und objektorientierte Programmierung? Vielleicht gibt's ja am Ende ein paar Themen, die dich interessieren.
Vor allem aber möchte ich, dass auch das Niveau des Textes auf einem greifbaren Level bleibt.
Alles perfekt präzise auszudrücken ist vielleicht akademisch besser, aber ich möchte hier praktische Informatik zeigen, keine Paper schreiben.
## Bereit loszulegen?
Während ich diesen ersten Eintrag schreibe, ist die ganze Seite noch im Aufbau.
Aber ich bin mir sicher, jemand baut hier eine schöne Navigation hin...
src/content/book/grundlagen/0-1_einsen_und_nullen.mdx
+224
View File
@@ -0,0 +1,224 @@
---
title: Einsen und Nullen
chapter: grundlagen
part: 1
---
import { Image } from "astro:assets";
import transistor from "./assets/01-transistor.svg";
import cmos from "./assets/02-cmos.svg";
Jap, wir fangen ganz von vorn an.
Die meisten Computer-Produkte heutzutage sind Digitaltechnik.
Digital bedeutet in diesem Fall, dass alle Signale in unserem Gerät zwei Zustände haben können: an oder aus, 1 oder 0, _high_ oder _low_.
Letzteres kommt dabei aus der Elektrotechnik und bezieht sich auf die Spannung.
Denn auch das Spannungssignal kann bei unserer Digitaltechnik nur zwei Werte haben.
Wie können denn solche einfachen Signale so komplexe Routinen bilden?
> [!info]
> Der eben gelesene Abschnitt ist in der modernen Technik natürlich stark vereinfacht.
> Für die grundlegende Vorstellung ist es aber komplett ausreichend und wahr genug.
## Zahlen
Normalerweise benutzen wir für unsere Zahlen die Ziffern 0-9.
Und weil das insgesamt zehn Ziffern ergibt und Wissenschaft sich gerne bei Griechisch und Latein borgt, nennen wir das ganze Dezimalsystem.
Bei unseren Einsen und Nullen können wir natürlich aber nur die Ziffern 0-1 benutzen.
Das nennt man dann Binärsystem.
Grundsätzlich bleiben die Rechenregeln gleich:
Wir zählen von 0 bis 9 aufwärts und wenn wir 9 + 1 rechnen wollen, gibt es einen Überlauf.
Wir schreiben dann eine 1 vorn hin und fangen hinten wieder mit der 0 an - eine 10 ergibt sich.
Analog dazu das Binärsystem.
Wir zählen 0, 1 und 1+1 ergibt dann einen Überlauf und wir kommen auf 10.
> [!warning]
> Wir reden hier erstmal nur von positiven Ganzzahlen.
> Wie negative Zahlen gehandhabt werden, kommt später.
> Gleitkommazahlen sind nochmal ein ganz anderes Kaliber.
Wie wir jetzt schon sehen, ist 2 im Dezimalsystem (folgend $2_{dez}$) äquivalent zu 10 im Binärsystem (folgend $10_{bin}$).
Jede Zahl des Dezimalsystems können wir als Binärzahl darstellen und andersrum.
## Logik
Wenn wir in der Informatik von Logik reden, ist dies deutlich elementarer gemeint, als die im Alltag benutze Logik.
Logik ist hier ein stumpfer Teil der Mathematik.
Anfangs soll uns die sogenannte _boolsche_ Logik interessieren.
Diese legt Rechenregeln für das Rechnen mit _wahr_ und _falsch_ fest.
Klingt komisch, aber sobald wir wahr mit 1 und falsch mit 0 ersetzen, sieht es plötzlich wieder nach Mathe aus.
Wie sehen diese Regeln nun aus?
Nutzen wir wieder mal eine Analogie für die Vorstellung.
Wir wollen für unser morgiges Frühstück einkaufen.
1. "Bring bitte Eier **und** Milch mit." - Unsere Aufgabe ist nur erledigt, wenn wir beides mitbringen. Bringen wir nur eins oder keins mit, müssen wir nochmal los einkaufen.
2. "Bring bitte Gouda **oder** Edamer mit." - Wir können eins von beidem mitbringen oder beides, in jedem Fall ist der Auftrag erfüllt.
3. "Wir brauchen noch **entweder** Vollkornbrot **oder** Toast." - Beides wäre zu viel. Nur genau eins von beiden wollen wir haben.
4. "Bring **nicht** schon wieder Süßigkeiten mit!" - Hier ist unsere Aufgabe erfüllt, wenn wir etwas nicht tun.
5. "Könntest du noch Orangensaft oder Apfelsaft mitbringen? Nur wenn du willst, Hauptsache **nicht beides**." - Der einzige Weg hier den Auftrag nicht zu erfüllen, ist beides mitzubringen.
6. "Ich möchte **weder** Müsli, **noch** Joghurt auf dem Tisch sehen!" - Keines der beiden Sachen darf eingekauft werden, sonst schlägt unser Einkaufsauftrag fehl.
Klingt dich erstmal nach einer soliden Einkaufsliste.
Und ohne es zu wollen, benutzen wir hier boolsche Mathematik.
Schauen wir uns das doch mal am ersten Beispiel an:
| Eier mitgebracht | Milch mitgebracht | Einkauf erfolgreich (Eier **und** Milch) |
|------------------|-------------------|---------------------|
| nein/falsch | nein/falsch | nein/falsch |
| nein/falsch | ja/wahr | nein/falsch |
| ja/wahr | nein/falsch | nein/falsch |
| ja/wahr | ja/wahr | ja/wahr |
Was wir hier genutzt haben, ist eine Wahrheitstabelle.
Sie gibt alle Kombinationen unserer Eingangswerte und die zugehörigen Ausgangswerte wieder.
In der Tabelle sehen wir ganz gut, wie die Und-Verknüpfung funktioniert.
Zurück zur Mathematik.
Statt unseres konkreten Beispiels, nutzen wir doch etwas akademischeres:
- $a$ und $b$ als Eingangswerte
- $\land$ statt immer "und" zu schreiben
- $1$ für ja/wahr
- $0$ für nein/falsch
| $a$ | $b$ | $a \land b$ |
|-----|-----|-------------|
| $0$ | $0$ | $0$ |
| $0$ | $1$ | $0$ |
| $1$ | $0$ | $0$ |
| $1$ | $1$ | $1$ |
Wow, sieht direkt viel krasser aus, ist aber noch genau das gleiche wie vorher!
Im Englischen heißt die Operation übrigens auch einfach "and".
Kommen wir doch zu den anderen Beispielen.
Als nächstes steht "Gouda **oder** Edamer" an.
Ob wir eins oder beides mitbringen führt immer zu einem erfolgreichen Einkauf, nichts mitzubringen nicht.
Für "oder" (engl. "or") wollen wir das Symbol $\lor$ benutzen.
Somit ergibt sich auch gleich folgende Wahrheitstabelle.
| $a$ | $b$ | $a \lor b$ |
|-----|-----|------------|
| $0$ | $0$ | $0$ |
| $0$ | $1$ | $1$ |
| $1$ | $0$ | $1$ |
| $1$ | $1$ | $1$ |
Oh übrigens, lustige Sache – die Spalten $a$ und $b$ sehen immer gleich aus.
Schließlich sind das alle möglichen Kombinationen der Werte und damit müssen wir sie nicht ändern.
Jetzt der Fall "**entweder** Vollkornbrot **oder** Toast", wo nur genau eine Sache mitgebracht werden darf.
Das ganze nennt man auch "**exklusives oder**" (engl. "exclusive or" → "xor").
Als Symbol dafür wollen wir $\veebar$ benutzen.
| $a$ | $b$ | $a \veebar b$ |
|-----|-----|---------------|
| $0$ | $0$ | $0$ |
| $0$ | $1$ | $1$ |
| $1$ | $0$ | $1$ |
| $1$ | $1$ | $0$ |
Langsam wird klar, wie dieser ganze Logik-Kram funktioniert, oder?
Sieht aus wie Magie, mit genug Erklärung kann das aber jeder.
Für das nächste Beispiel müssen wir aus dem gewohnten Umfeld ausbrechen.
Warum?
Weil wir nur eine Bedingung haben: "**nicht** Süßigkeiten mitbringen".
Wenn wir etwas nicht machen, sind wir erfolgreich.
Effektiv drehen wir unsere Bedingung des Mitbringens einfach um.
Dies hat viele Namen, normalerweise wird es im deutschen mit "**nicht**" oder "**invertiert**" bezeichnet, im Englischen ist es dann "not" und "inverted".
Es gibt auch mehrere Varianten zur Kennzeichnung: $\lnot$, $\sim$ und auch $!$ bezeichnen alle dasselbe.
Eine weitere Variante ist ein vertikaler Strich über dem Term, um ihn zu negieren (also $\overline{(\text{Term})}$).
Im Folgenden nutzen wir immer die letzte Variante.
Eine Wahrheitstabelle gib es natürlich auch, wenn auch kleiner:
| $a$ | $\lnot a$ |
|-----|-----------|
| $0$ | $1$ |
| $1$ | $0$ |
Weiter geht's mit "Orangensaft oder Apfelsaft, **nicht beides**".
Interessant, wir kennen sowohl ein Symbol für "beides" (und) und "nicht".
Und an diesem Punkt lernen wir die ersten Kombinationen.
Diese hier nennen wir "**nicht und**" (engl. "not and" → "nand") und wie schon beschrieben ist es die Kombination der Zeichen $\overline{(\text{Term})}$ und $\land$.
| $a$ | $b$ | $\overline{a \land b}$ |
|-----|-----|---------------|
| $0$ | $0$ | $1$ |
| $0$ | $1$ | $1$ |
| $1$ | $0$ | $1$ |
| $1$ | $1$ | $0$ |
Und als allerletztes betrachten wir das "**weder** Müsli, **noch** Joghurt".
Das ist etwas tricky formuliert, aber auch hier ist es eine Kombination aus nur zwei Symbolen.
Zum Spaß machen wir es doch andersrum, wir stellen zuerst die Wahrheitstabelle auf und schauen dann mal, was es sein könnte.
Wir wissen , dass wir nichts von beidem mitbringen sollen, ist auch nur eine Sache mitgebracht, war der Einkauf nicht ohne Fehler.
Tragen wir das doch mal genau so ein:
| $a$ | $b$ | ? |
|-----|-----|-----|
| $0$ | $0$ | $1$ |
| $0$ | $1$ | $0$ |
| $1$ | $0$ | $0$ |
| $1$ | $1$ | $0$ |
Probier doch mal, wie wir die Zeichen von Oben kombinieren können, um auf dasselbe Ergebnis zu kommen.
Bist du auch auf $\overline{a \lor b}$ gekommen?
Oder hast du $\overline{a} \land \overline{b}$ rausbekommen?
Oha, es gibt also mehrere Lösungen!
Genauer gesagt kann man sogar logische Terme ineinander umwandeln, die wichtigste Umformungen hierfür sind die sogenannten [De-morgansche Gesetze](https://de.wikipedia.org/wiki/De-morgansche_Gesetze).
Aber das geht jetzt zu weit.
Schweifen lieber kurz ab und danach geht es im nächsten Kapitel darum, wie wir mit Logik rechnen können.
<details>
<summary>Abschweifung: Wie bekommen wir Logik in Strom?</summary>
Wir reden die ganze Zeit über "einfache" Logik, aber man fragt sich nun, wie wir Strom dazu bekommen, dieser Logik zu folgen.
Das ist gar nicht so schwer: Mithilfe von Transistoren.
Okay, vielleicht muss ich doch etwas mehr erzählen.
Ein Transistor ist ein aktives elektrisches Bauelement.
Es gibt verschiedene Arten, aber zu Beginn schauen wir uns einen n-Kanal MOSFET an.
Im Normalfall hat dieser drei nutzbare Konnektoren und macht richtig interessante Sachen in Analogschaltungen, wie Verstärkung von Signalen wie Ton.
Aber analoge Sachen interessieren uns hier nicht.
Und dann wird es plötzlich viel einfacher.
Betrachten wir den folgenden Schaltkreis:
<Image src={transistor} alt="Ein n-Kanal MOSFET Transistor mit Eingang In an Source, a am Gate und Ausgang Out am Drain" height="200" />
Gehen wir davon aus, dass wir am Eingang $In$ eine Spannung von 5V anlegen.
Solange an $a$ keine Spannung anliegt, ist der Transistor "aus" und es fließt kein Strom zum Ausgang $Out$.
An $Out$ liegt also 0V an.
Also das behaupte ich jetzt einfach mal, in Wirklichkeit ist der Knoten gerade in "Schwebe", also undefiniert.
Sobald wir aber am Gate $a$ auch eine Spannung von 5V anlegen, "schaltet" der Transistor durch und es fließt Strom von $In$ zu $Out$.
Wenn wir den Transistor und unsere Spannungen gut wählen, liegt an $Out$ dann auch fast genau 5V an.
Wenn wir nur damit jetzt ein Und-Gatter bauen wollen, brauchen wir nur noch einen zweiten Transistor.
Um den Ausgang nicht in Schwebe zu lassen, können wir bei der sogenannten CMOS-Technik (Complementary Metal-Oxide-Semiconductor) noch einen p-Kanal MOSFET hinzufügen.
Dieser funktioniert genau andersrum: Wenn am Gate eine Spannung anliegt, ist der Transistor aus, wenn keine Spannung anliegt, ist er an.
Dadurch ist dann unser Ausgang immer definiert.
Hier nochmal als Schaubild:
<Image src={cmos} alt="Eine CMOS-Schaltung mit a und b als Eingänge, die ein Und-Gatter bilden." height="500" />
Statt je nachdem, ob bei $a$ und $b$ Spannung anliegt, fließt der Strom von "oben" oder "unten" durch die Transistoren und unser $Out$ nimmt die Spannung von $High$ oder $Low$ an.
$High$ und $Low$ sind dabei die Spannungen, die für 1 und 0 stehen.
Was genau die zugehörigen Spannung ist, hängt vom jeweiligen System ab.
Die Spannungen sind so zu wählen, dass sie von den Transistoren sicher erkannt werden können.
Aber gut, jetzt haben wir schon ein Und-Gatter.
Man kann sich nun selbst überlegen, wie die anderen Gatter mit Transistoren aufgebaut werden können.
Dazu noch der Hinweis: Wir können auch Signale in CMOS sehr einfach invertieren.
Einfach den p-Kanal Transistor an High und den n-Kanal Transistor an Low anschließen.
</details>
src/content/book/grundlagen/0-2_einmal_zahlen_bitte.mdx
+151
View File
@@ -0,0 +1,151 @@
---
title: Einmal Zahlen bitte!
chapter: grundlagen
part: 2
---
Bevor wir jetzt anfangen können zu rechnen, brauchen wir natürlich Zahlen.
Und zwar mehr als nur 0 und 1.
Also schauen wir uns mal an, wie wir Zahlen im Binärsystem darstellen können.
## Positive Zahlen
Im Dezimalsystem, also dem Zahlensystem, das wir im Alltag benutzen, haben wir zehn Ziffern: 0 bis 9.
Im Binärsystem gibt's aber nur zwei Ziffern: 0 und 1.
Interessanterweise kann man alle Prinzipien unseres Dezimalsystems auch im Binärsystem anwenden.
Was bedeuted das?
Zählen wir erstmal hoch. 0, 1, 2, ..., 9, und jetzt?
Wir haben ja nur die Ziffern 0 bis 9.
Also zählen wir die Stelle vor der 9 einmal hoch und fangen neu an. 09 wird also zu 10.
Ok, ich schwöre wir sind nicht im Kindergarten und das ganze hat einen tieferen Sinn!
Machen wir doch das gleiche im Binärsystem
Wir zählen also: 0, 1, und jetzt?
Jetzt machen wir das gleiche: Wir zählen die Stelle vor der 1 hoch und fangen neu an. 01 wird also zu 10.
Was in unserem Dezimalsystem eine 2 ist, ist binär ausgedrückt also eine 10.
Und so können wir natürlich weiter zählen.
| Dezimal | Binär |
|---------|-------|
| 0 | 0 |
| 1 | 1 |
| 2 | 10 |
| 3 | 11 |
| 4 | 100 |
| 5 | 101 |
| 6 | 110 |
| 7 | 111 |
| 8 |1000 |
| ... | ... |
Das Prinzip sollte klar sein.
Aber zum Umrechnen wollen wir ja nicht immer hochzählen müssen bis wir zufällig die richtige zahl finden.
Natürlich gibt es aber Umrechnungsformeln, die wir benutzen können.
### Umrechnung Binär zu Dezimal
Um eine Binärzahl in eine Dezimalzahl umzuwandeln, können wir jede Stelle der Binärzahl mit der entsprechenden Potenz von 2 multiplizieren und die Ergebnisse addieren.
Ihh, das klingt nach Mathe.
Aber so schwierig ist es nicht.
Nehmen wir zum Beispiel die Binärzahl $1101$.
| Stelle | Wert der Stelle | Potenz von 2 | Berechnung |
|--------|-----------------|---------------|------------------|
| 3 | 1 | $2^3 = 8$ | $1 * 8 = 8$ |
| 2 | 1 | $2^2 = 4$ | $1 * 4 = 4$ |
| 1 | 0 | $2^1 = 2$ | $0 * 2 = 0$ |
| 0 | 1 | $2^0 = 1$ | $1 * 1 = 1$ |
| | | | $8 + 4 + 0 + 1 = 13$ |
Was hier schon auffällt, dass wir die Stellen von rechts nach links durchnummerieren, beginnend bei 0.
Das können wir übrigens auch im Dezimalsystem machen.
$42 = 4 * 10^1 + 2 * 10^0 = 4 * 10 + 2 * 1 = 40 + 2 = 42$
Die händische Umrechnung ist in der Theorie ganz einfach, praktisch ist es natürlich bei großen Zahlen etwas umständlich.
Daher lasst ihr am besten einen Computer die Umrechnung machen.
Der kennt das schon.
### Umrechnung Dezimal zu Binär
Um eine Dezimalzahl in eine Binärzahl umzuwandeln, können wir die Zahl durch 2 teilen und den Rest notieren.
Wir wiederholen diesen Vorgang mit dem Ergebnis der Division, bis das Ergebnis 0 ist.
Die Binärzahl ergibt sich dann aus den notierten Resten, gelesen von unten nach oben.
Das klingt doch schon wieder so kompliziert...
Ist es aber auch nicht, ebenfalls nur aufwendig.
Nehmen wir zum Beispiel die Dezimalzahl 13 von oben und rechnen wieder zurück:
| Division | Ergebnis | Rest |
|----------|----------|------|
| $13 / 2$ | 6 | 1 |
| $6 / 2$ | 3 | 0 |
| $3 / 2$ | 1 | 1 |
| $1 / 2$ | 0 | 1 |
Die Reste von unten nach oben gelesen ergeben die Binärzahl $1101$.
Auch hier gilt wieder: Probiert es gern mal aus, aber bei großen Zahlen lasst lieber den Computer die Arbeit machen.
### Wo hoch kann ich gehen?
In PCs arbeiten wir im Normalfall mit einer festen Anzahl an Bits für eine Ganzzahl.
Je nach Definition im Code kann das unterschiedlich lang sein, aber im Normalfall hat man die Auswahl aus 8, 16, 32, 64 und vielleicht sogar 128 Bit.
Die höchste Zahl in der jeweiligen "Feldbreite" ist dann natürlich die, wo alle Bits auf 1 gesetzt sind.
Also für z.B. 8 Bit: $11111111_2 = 255_{10}$
Zusammen mit der 0 sind das also $256$ verschiedene Zahlen, die man darstellen kann.
Man kann diese beiden Werte auch ganz einfach berechnen:
- Die Anzahl der darstellbaren Zahlen (inkl. 0) ist $2^n$, wobei $n$ die Anzahl der Bits ist.
- Die höchste Zahl ist $2^n - 1$, wobei $n$ die Anzahl der Bits ist.
> [!info] Anzeige des Zahlenraums
> Damit wir nicht durcheinanderkommen, wenn ich mal irgendwo eine Hundert schreibe (Ist es eine $100$? Oder doch $4$?) benutzen wir kleine Hinweise an den Zahlen.
> $10_{10}$ ist eine Zehn im "normalen" Dezimalsystem und wäre binär dargestellt eine $1010_2$.
> $10_2$ muss man wiederum binär lesen und kommt so auf eine Zwei.
> Diese Schreibweise wird ab jetzt häufiger vorkommen, um Missverständnisse zu vermeiden.
## Negative Zahlen
Bisher haben wir nur positive Zahlen betrachtet.
Wie sieht es aber mit negativen Zahlen aus?
Im Alltag im Dezimalsystem schreiben wir einfach ein Minuszeichen vor die Zahl.
Und das können wir natürlich auch vor unsere Binärzahlen schreiben - aber der PC kann nur 0 und 1, der kann kein Minus.
Um trotzdem negative Zahlen darstellen zu können, benutzen Computer das sogenannte Zweierkomplement.
Das haben sich ein paar schlaue Köpfe ausgedacht und es ist cool, weil unsere normalen Rechenregeln für Addition und Substraktion weiterhin funktionieren.
Eine Zahl im Zweierkomplement darzustellen funktioniert so:
1. Man nimmt die Binärdarstellung der positiven Zahl
2. Man invertiert alle Bits (0 wird zu 1 und 1 wird zu 0)
3. Man addiert 1 zur invertierten Zahl
Schritt 2 ist tricky, weil man etwas bedenken muss: Vor der Zahl gibt es eine feste Anzahl an Bits, die alle 0 sind.
Im Zweierkomplement muss unser Zahlenraum (in Bit angegeben) als begrenzt sein und berücksichtig werden.
Nehmen wir also an, wir arbeiten in einem 8-Bit-System.
Nehmen wir zum Beispiel die Zahl $-13$:
1. Die Binärdarstellung von $13_{10}$ ist $00001101_2$
2. Invertieren wir alle Bits: $11110010_2$
3. Addieren wir $1$: $11110010_2 + 1 = 11110011_2$
Also ist die Darstellung von $-13$ im Zweierkomplement $11110011_2$ (in einem 8-Bit-System).
Die Rechnung zurück ist übrigens exakt gleich.
Nehmen wir also die Zahl $11110011_2$ von eben:
1. Invertieren wir alle Bits: $00001100_2$
2. Addieren wir $1$: $00001100_2 + 1 = 00001101_2$
3. Die Binärdarstellung $00001101_2$ ist $13_{10}$ im Dezimalsystem, also ist die ursprüngliche Zahl $-13$.
Woher wissen wir nun, ob eine Zahl im Zweierkomplement positiv oder negativ ist?
Wir schauen uns einfach das höchstwertige Bit (das ganz links) an.
Wenn es eine $0$ ist, ist die Zahl positiv, wenn es eine $1$ ist, ist die Zahl negativ.
Damit haben wir quasi ein Minus vor die Zahl geschrieben.
Man spricht im englischen auch von "sign bit" und nennt Ganzzahlen mit Vorzeichen "signed integer".
Das Gegenteil ist dann "unsigned integer".
Jetzt haben wir aus einem 8-Bit-System nur noch 7 Bits für die Zahl selbst übrig, da die erste Stelle, ja das Vorzeichen angibt.
Durch das Nutzen von Vorzeichen, schränken wir die möglichen Zahlen ein.
Während wir mit 8 Bit noch 255 positive Zahlen und die 0 darstellen konnten, sind es nun nur noch 127 positive Zahlen (0 bis 127) und die 0, aber auch 128 negative Zahlen (-1 bis -128).
Wenn wir später rechnen, müssen wir hier eher aufpassen: $127 + 1$ ist im Zweierkomplement $10000000_2$, und damit $-128$!
src/content/book/grundlagen/0-3_addieren_mit_bits.mdx
+236
View File
@@ -0,0 +1,236 @@
---
title: Addieren mit Bits
chapter: grundlagen
part: 3
---
Nachdem wir zuletzt geklärt haben, wie wir Einsen und Nullen mit Logikgattern darstellen können, wollen wir uns jetzt anschauen, wie wir mit diesen Bits rechnen können.
Und das ist einfacher, als man vielleicht denkt.
## Addieren mit 1 Bits
Schauen wir uns zuerst an, wie eine simple Addition mit einer Stelle funktioniert.
| $a$ | $b$ | $a + b$ |
|-----|-----|---------|
| $0$ | $0$ | $0$ |
| $0$ | $1$ | $1$ |
| $1$ | $0$ | $1$ |
| $1$ | $1$ | $10$ |
Nun, bis jetzt haben wir nur mit einzelnen Bits gerechnet, aber das Ergebnis von 1 + 1 ist 10, also zwei Bits.
Darum machen wir uns gleich Gedanken.
Aber wenn man nur die hinteren Stellen betrachtet, fällt etwas auf:
**Die Addition von $a$ und $b$ entspricht genau der Funktion eines XOR-Gatters.**
Und wenn wir uns den Übertrag ansehen, der im Fall von 1 + 1 entsteht, sehen wir, dass dieser genau dann 1 ist, wenn sowohl $a$ als auch $b$ 1 sind.
**Der Übertrag entspricht genau der Funktion eines UND-Gatters.**
Am Ende können wir also sagen, dass eine Addition von zwei Bits $a$ und $b$ folgendes ergibt:
- Das Ergebnis-Bit ist $a$ XOR $b$.
- Der Übertrag ist $a$ UND $b$.
Wenn wir das nun als Schaubild darstellen, sieht das so aus:
```mermaid
%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%%
flowchart TD
A@{ shape: circle, label: "a" } --> XOR1[XOR]
B@{ shape: circle, label: "b" } --> XOR1
XOR1 --> S@{ shape: dbl-circ, label: "Summe\ns" }
A --> AND1[AND]
B --> AND1
AND1 --> C@{ shape: circle, label: "Übertrag\nc" }
```
Damit können wir schon die Binärzahlen mit einer Stelle addieren!
Nun haben wir aber vielleicht auch gigantische Zahlen, wie 4 oder 7!
Dafür brauchen wir mehr als ein Bit.
Aber das Prinzip bleibt das gleiche.
Nur, dass wir nun auch noch den Übertrag beachten müssen.
Aber halb so wild, denn was macht man mit einem Übertrag im normalen schriftlichen Addieren?
Man addiert ihn einfach zur nächsten Stelle dazu!
Machen wir das also auch hier.
Statt nur $a$ und $b$ zu addieren, addieren wir nun $a$, $b$ und den Übertrag $c_{in}$ der vorherigen Stelle:
| $a$ | $b$ | $c_{in}$ | $s$ | $c_{out}$ |
|-----|-----|----------|-------|-----------|
| $0$ | $0$ | $0$ | $0$ | $0$ |
| $0$ | $0$ | $1$ | $1$ | $0$ |
| $0$ | $1$ | $1$ | $0$ | $1$ |
| $0$ | $1$ | $1$ | $0$ | $1$ |
| $1$ | $0$ | $0$ | $1$ | $0$ |
| $1$ | $0$ | $1$ | $0$ | $1$ |
| $1$ | $1$ | $0$ | $0$ | $1$ |
| $1$ | $1$ | $1$ | $1$ | $1$ |
Unser Schaltplan, sieht dann wieder genauso aus, nur dass wir jetzt noch einen weiteren Eingang für den Übertrag haben:
```mermaid
%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%%
flowchart TD
A@{ shape: circle, label: "a" } --> XOR1
B@{ shape: circle, label: "b" } --> XOR1
XOR1[XOR] --> XOR2
Cin@{ shape: circle, label: "c_in" } --> XOR2
XOR2[XOR] --> S@{ shape: dbl-circ, label: "s" }
A --> AND1
B --> AND1
AND1[AND] --> OR1
XOR1 --> AND2
Cin --> AND2
AND2[AND] --> OR1
OR1[OR] --> Cout@{ shape: dbl-circ, label: "c" }
```
Das Ganze nennt man dann einen Volladdierer.
Das vorher (ohne Übertragseingang) ist ein Halbaddierer.
Wir sehen hier auch, dass unser Volladdierer (FA) aus zwei Halbaddierern (HA) und einem ODER-Gatter besteht:
```mermaid
%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%%
flowchart TD
A0@{ shape: circle, label: "a" } --> HA1
B0@{ shape: circle, label: "b" } --> HA1
HA1[HA] -- s --> HA2
Cin@{ shape: circle, label: "c_in" } --> HA2
HA2[HA] --> s_0@{ shape: dbl-circ, label: "s" }
HA1 -- c --> OR
HA2 -- c --> OR
OR[OR] --> Cout@{ shape: dbl-circ, label: "c" }
```
> [!Info]
> Das ist ein Vorgeschmack darauf, wie es weitergeht - wir erdenken uns Baublöcke und kombinieren sie, um komplexere Funktionen zu bauen.
> Hier wird eben aus einfachen Logikgattern erst ein Halbaddierer und daraus dann ein Volladdierer.
## Größere Zahlen addieren
Normalerweise kommt ein Rechner auch in die Verlegenheit, mehr als ein Bit addieren zu müssen.
Auch hier können wir uns aber anschauen, wie wir das mit Stift und Papier machen.
Bei mehrstelligen dezimalen Zahlen rechnen wir von hinten nach vorn die einzelnen Stellen zusammen, wobei wir den Übertrag der vorherigen Stelle mit einbeziehen.
Und genau so machen wir das auch im Binären.
Wenn wir nun also zwei 4-Bit-Zahlen addieren wollen, brauchen wir 4 Volladdierer, die hintereinander geschaltet und deren Überträge miteinander verbunden sind:
<div style="overflow-x: auto;width: 100%;">
```mermaid
%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%%
flowchart TD
subgraph FA3
A3@{ shape: circle, label: "a_3" } --> FA31
B3@{ shape: circle, label: "b_3" } --> FA31
FA31[FA] --> s_3@{ shape: dbl-circ, label: "s_3" }
FA31 -- c --> Cout0@{ shape: dbl-circ, label: "c_out" }
end
subgraph FA2
A2@{ shape: circle, label: "a_2" } --> FA21
B2@{ shape: circle, label: "b_2" } --> FA21
FA21[FA] --> s_2@{ shape: dbl-circ, label: "s_2" }
FA21 -- c --> FA31
end
subgraph FA1
A1@{ shape: circle, label: "a_1" } --> FA11
B1@{ shape: circle, label: "b_1" } --> FA11
FA11[FA] --> s_1@{ shape: dbl-circ, label: "s_1" }
FA11 -- c --> FA21
end
subgraph FA0
Cin0@{ shape: circle, label: "c_in" } --> FA01
A0@{ shape: circle, label: "a_0" } --> FA01
B0@{ shape: circle, label: "b_0" } --> FA01
FA01[FA] --> s_0@{ shape: dbl-circ, label: "s_0" }
FA01 -- c_0 --> FA11
end
```
</div>
> [!info] Nomenklatur
> Wie gerade schon gesehen, werden die Bits von rechts nach links durchnummeriert, beginnend mit 0.
> Das von hinten nach vorn zu machen hat gleichzeitig den Vorteil, dass die Nummerierung der Bits mit der Potenz von 2 übereinstimmt, die sie repräsentieren.
> Zu merken ist aber einfach nur: $a_0$ ist das niederwertigste Bit ganz rechts.
Heraus kommt eine Form, die ein wenig aussieht wie ein Wasserfall, würde man es direkt nebeneinander rendern, käme würde der Übertrag eine Art "Welle" darstellen.
Daher nennt man diese Form auch Ripple-Carry-Adder, da der Übertrag von einem Volladdierer zum nächsten "rippelt".
Aber was macht denn das c_in dort eigentlich noch?
Normalerweise hat man ja keinen Übertrag in der ersten Stelle, oder?
Prinzipiell richtig.
Beim Addieren ist dieser Eingang normalerweise auch 0, aber er hilft später noch richtig, wenn wir nicht nur addieren, sondern auch subtrahieren wollen.
## Die Andere Richtung
Subtrahieren müssen wir natürlich auch können.
Wie negative Zahlen dargestellt werden, haben wir im [vorherigen Kapitel](0-2_einmal_zahlen_bitte.mdx) schon geklärt, aber wie subtrahieren wir eigentlich?
Nun hilft uns das kompliziert aussehende Zweierkomplement, denn es stellt sich heraus, dass die Subtraktion von $b$ von $a$ genau der Addition von $a$ und dem Zweierkomplement von $b$ entspricht.
Das Zweierkomplement zu bilden ist nicht schwer und wird noch einfacher wenn, wir nun unseren Addierer mit $c_{in}$ haben.
Grundsätzlich sieht die Mathe so aus:
$$a - b = a + (-b) = a + (\overline{b} + 1)$$
Was jetzt auffällt ist das $+1$ am Ende.
Das ist genau das, was wir mit $c_{in}$ machen können, denn wenn wir $c_{in}$ auf 1 setzen, addieren wir genau die $1$, die wir brauchen.
An dem Punkt müssen wir gar nichts weiter tun, als unser $b$ nur zu invertieren und $c_{in}$ auf 1 zu setzen, um die Subtraktion durchzuführen.
Und jetzt wird es wild: Das wird noch einfacher!
Wir können nämlich einfach vor jeden Eingang von $b$ ein XOR-Gatter setzen, das mit $c_{in}$ verbunden ist.
Wenn $c_{in}$ 0 ist, passiert nichts, wir addieren also normal.
Wenn $c_{in}$ aber 1 ist, wird jedes Bit von $b$ invertiert, was genau das ist, was wir brauchen, um die Subtraktion durchzuführen.
Wer mag, kann sich das gern mal aufmalen, aber das Ergebnis ist ein Addierer, der sowohl addieren als auch subtrahieren kann, je nachdem, ob $c_{in}$ 0 oder 1 ist.
## Achtung, Vorzeichen!
Der letzt Satz des vorherigen Kapitels hat es schon angedeutet, aber hier müssen wir aufpassen, denn das Problem ist für eine ganze Menge Sicherheitslücken und Fehler verantwortlich:
Angenommen, ich rechne mit 8-Bit-Zahlen mit Vorzeichen und möchte $127 + 1$ rechnen?
Die Binärdarstellung von $127$ ist $01111111_2$.
Wenn ich nun 1 addiere, erhalte ich $10000000_2$, was im Zweierkomplement $-128$ entspricht.
Das ist natürlich nicht das, was wir erwartet haben, aber es ist das, was unser Addierer ausspuckt.
Das Ganze nennt man einen "Integer Overflow" und zusammen mit dem Underflow (wenn zwei negative Zahlen eine positive ergeben) ist er ein großes Problem, da es zu unvorhergesehenen Ergebnissen führen kann.
Daher sollten wir immer Folgendes prüfen:
- Wenn wir zwei positive Zahlen addieren, sollte das Ergebnis positiv sein, sonst haben wir einen Overflow.
- Wenn wir zwei negative Zahlen addieren, sollte das Ergebnis negativ sein, sonst haben wir einen Underflow.
Und die Behauptung ist: Wenn das Vorzeichen zweier Zahlen gleich ist, aber ungleich des Vorzeichens des Ergebnisses, dann ist ein Überlauf aufgetreten.
Nehmen wir wieder an, wir sind im Bereich 8bit signed und stellen einmal die Tabelle auf, um das zu überprüfen:
| $a_8$ | $b_8$ | $s_8$ | Overflow? ($o$) |
|-------|-------|-------|-----------|
| $0$ | $0$ | $0$ | Nein |
| $0$ | $0$ | $1$ | Ja |
| $0$ | $1$ | $0$ | Nein |
| $0$ | $1$ | $1$ | Nein |
| $1$ | $0$ | $0$ | Nein |
| $1$ | $0$ | $1$ | Nein |
| $1$ | $1$ | $0$ | Ja |
| $1$ | $1$ | $1$ | Nein |
Das ist sogar gleich mal eine Übung in Logik, wie wir aus der Tabelle jetzt eine Formel für die Überlaufbedingung ableiten können.
Die Formel lautet:
$$o = (a_8 \land b_8 \land \lnot s_8) \lor (\lnot a_8 \land \lnot b_8 \land s_8)$$
Nun können wir sicher sein, dass wir immer die richtigen Ergebnisse bekommen, wenn wir die Überlaufbedingung überprüfen und entsprechend handeln, wenn sie erfüllt ist.
Im nächsten Kapitel schauen wir uns an, wie wir aus diesem einfachen Rechner eine vollwertige Logikeinheit bauen können.
<details class="eof-details">
<summary>Zusatzaufgabe: Multiplikation</summary>
Etwas komplizierter, aber gar nicht so schwer, ist die Multiplikation.
Wer möchte kann sich an dieser Stelle gerne selbst mal überlegen, wie so etwas zumindest in der Theorie aufgebaut sein könnte.
Die simpelste Variante könnte so aussehen wie eine Treppe, wenn man es sich aufmalt.
Ein Dividierer wiederum ist hochkompliziert...
</details>
src/content/book/grundlagen/0-4_voll_logisch.mdx
+7
View File
@@ -0,0 +1,7 @@
---
title: Voll Logisch!
chapter: grundlagen
part: 4
---
Hier wird noch gebaut.
src/content/book/grundlagen/assets/01-transistor.json
+117
View File
@@ -0,0 +1,117 @@
{
"version": "0.1",
"components": [
{
"type": "node",
"position": {
"x": 377.953,
"y": -377.953
},
"id": "nfet"
},
{
"type": "rect",
"position": {
"x": 333.071,
"y": -377.953
},
"stroke": {
"opacity": 0
},
"size": {
"x": 23.622,
"y": 18.898
},
"text": {
"text": "a",
"showPlaceholderText": true
}
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -377.953
},
{
"x": 377.953,
"y": -407.055
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"-|"
]
},
{
"type": "rect",
"position": {
"x": 377.953,
"y": -415.748
},
"stroke": {
"opacity": 0
},
"size": {
"x": 28.346,
"y": 28.346
},
"text": {
"text": "In"
}
},
{
"type": "rect",
"position": {
"x": 377.953,
"y": -340.157
},
"stroke": {
"opacity": 0
},
"size": {
"x": 37.795,
"y": 28.346
},
"text": {
"text": "Out",
"showPlaceholderText": true
}
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -407.055
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -348.851
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 340.914,
"y": -377.953
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 377.931,
"y": -388.213
},
"id": "circ"
}
]
}
src/content/book/grundlagen/assets/01-transistor.svg
+201
View File
@@ -0,0 +1,201 @@
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="font-size: 10pt; overflow: visible;"
viewBox="319.9266662597656 -431.25433349609375 78.25717163085938 106.60366821289062"
>
<defs>
<symbol id="node_nfet">
<g stroke="currentStroke" stroke-miterlimit="10" stroke-width=".4">
<path
fill="none"
stroke-width=".53134"
d="M37.57039.26569v19.18203h-18.51952"
/>
<path
fill="none"
stroke-width="1.06267"
d="M19.05087 15.08254v8.0032m0 2.91021v7.27556m0 2.91019v8.0032"
/>
<path
fill="none"
stroke-width=".53134"
d="M19.05087 29.63372h18.78519m-18.78519 10.186h18.51952v19.18204"
/>
<path
fill="none"
stroke-width="1.06267"
d="M14.60638 19.18205v20.90335"
/>
<path
d="M29.03917 29.63372v3.04908l-6.81374-3.04908 6.81374-3.04907Z"
stroke="none"
fill="currentColor"
/>
<path
fill="none"
stroke-width=".53134"
d="M14.60638 29.63372h-14.34069"
/>
</g>
</symbol>
<symbol id="node_circ">
<g
stroke="currentStroke"
stroke-miterlimit="10"
stroke-width=".53134"
>
<path
d="M4.49803 2.38186c0-1.16874-.94744-2.11617-2.11617-2.11617s-2.11617.94743-2.11617 2.11617.94743 2.11617 2.11617 2.11617 2.11617-.94744 2.11617-2.11617Zm-2.11617 0"
fill="currentColor"
/>
</g>
</symbol>
</defs>
<g class="">
<use
xlink:href="#node_nfet"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,340.38261,-407.58671999999996)"
/>
</g>
<g class="">
<rect
width="22.288666666666668"
height="17.564666666666668"
style=""
x="0.6666666666666661"
y="0.6666666666666661"
transform="matrix(1,0,0,1,321.26000000000005,-387.402)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,329.26000000000005,-379.402)"
/>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,329.26000000000005,-379.402)"
>
<path
d="M0.56 4.73L0.56 4.73Q0.56 3.59 1.89 2.99L1.89 2.99Q2.70 2.61 4.35 2.51L4.35 2.51L4.35 2.02Q4.35 1.20 3.92 0.76Q3.48 0.32 2.94 0.32L2.94 0.32Q1.96 0.32 1.49 0.93L1.49 0.93Q1.89 0.94 2.03 1.14Q2.17 1.34 2.17 1.54L2.17 1.54Q2.17 1.81 2.01 1.98Q1.84 2.15 1.56 2.15L1.56 2.15Q1.30 2.15 1.12 1.99Q0.94 1.82 0.94 1.53L0.94 1.53Q0.94 0.88 1.53 0.45Q2.12 0.02 2.96 0.02L2.96 0.02Q4.06 0.02 4.79 0.75L4.79 0.75Q5.01 0.98 5.13 1.28Q5.24 1.57 5.25 1.76Q5.27 1.95 5.27 2.33L5.27 2.33L5.27 4.99Q5.27 5.07 5.29 5.20Q5.32 5.33 5.44 5.50Q5.56 5.66 5.76 5.66L5.76 5.66Q6.24 5.66 6.24 4.81L6.24 4.81L6.24 4.06L6.58 4.06L6.58 4.81Q6.58 5.52 6.20 5.80Q5.83 6.07 5.48 6.07L5.48 6.07Q5.04 6.07 4.76 5.75Q4.48 5.42 4.44 4.98L4.44 4.98Q4.24 5.49 3.78 5.82Q3.32 6.15 2.70 6.15L2.70 6.15Q2.21 6.15 1.76 6.03Q1.31 5.90 0.93 5.57Q0.56 5.23 0.56 4.73ZM1.59 4.71L1.59 4.71Q1.59 5.21 1.94 5.53Q2.29 5.85 2.79 5.85L2.79 5.85Q3.35 5.85 3.85 5.41Q4.35 4.98 4.35 4.13L4.35 4.13L4.35 2.79Q2.87 2.84 2.23 3.43Q1.59 4.02 1.59 4.71Z"
/>
</g>
</g>
</g>
<g class="">
<polyline
points="377.953,-377.953 377.953,-407.055"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<rect
width="27.012666666666668"
height="27.012666666666668"
style=""
x="0.6666666666666661"
y="0.6666666666666661"
transform="matrix(1,0,0,1,363.78,-429.921)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,371.78,-421.921)" />
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,371.78,-421.921)">
<path
d="M0.37 9.14L0.37 9.14L0.37 8.73L0.72 8.73Q1.47 8.73 1.64 8.61Q1.82 8.49 1.82 8.10L1.82 8.10L1.82 1.07Q1.82 0.69 1.64 0.57Q1.46 0.45 0.72 0.45L0.72 0.45L0.37 0.45L0.37 0.03Q0.84 0.07 2.42 0.07L2.42 0.07Q3.98 0.07 4.44 0.03L4.44 0.03L4.44 0.45L4.10 0.45Q3.35 0.45 3.17 0.57Q3.00 0.69 3.00 1.07L3.00 1.07L3.00 8.10Q3.00 8.48 3.17 8.61Q3.35 8.73 4.10 8.73L4.10 8.73L4.44 8.73L4.44 9.14Q3.97 9.10 2.40 9.10L2.40 9.10Q0.84 9.10 0.37 9.14ZM5.24 9.14L5.24 9.14L5.24 8.73Q5.95 8.73 6.11 8.64Q6.28 8.55 6.28 8.13L6.28 8.13L6.28 4.55Q6.28 4.06 6.10 3.93Q5.93 3.81 5.24 3.81L5.24 3.81L5.24 3.39L7.12 3.25L7.12 4.65Q7.74 3.25 9.09 3.25L9.09 3.25Q10.09 3.25 10.49 3.74L10.49 3.74Q10.78 4.08 10.84 4.45Q10.90 4.82 10.90 5.78L10.90 5.78L10.90 8.33Q10.92 8.61 11.13 8.67Q11.35 8.73 11.95 8.73L11.95 8.73L11.95 9.14Q10.59 9.10 10.45 9.10L10.45 9.10Q10.35 9.10 8.95 9.14L8.95 9.14L8.95 8.73Q9.65 8.73 9.82 8.64Q9.99 8.55 9.99 8.13L9.99 8.13L9.99 5.02Q9.99 4.34 9.78 3.94Q9.57 3.54 9.00 3.54L9.00 3.54Q8.31 3.54 7.75 4.12Q7.20 4.70 7.20 5.68L7.20 5.68L7.20 8.13Q7.20 8.55 7.37 8.64Q7.53 8.73 8.24 8.73L8.24 8.73L8.24 9.14Q6.87 9.10 6.74 9.10L6.74 9.10Q6.64 9.10 5.24 9.14Z"
/>
</g>
</g>
</g>
<g class="">
<rect
width="36.461666666666666"
height="27.012666666666668"
style=""
x="0.6666666666666679"
y="0.6666666666666661"
transform="matrix(1,0,0,1,359.0555,-354.33)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,367.0555,-346.33)" />
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,367.0555,-346.33)">
<path
d="M0.75 4.92L0.75 4.92Q0.75 2.88 2.05 1.46Q3.36 0.03 5.18 0.03L5.18 0.03Q7.01 0.03 8.31 1.46Q9.62 2.89 9.62 4.92L9.62 4.92Q9.62 6.93 8.31 8.33Q7.00 9.73 5.18 9.73L5.18 9.73Q3.38 9.73 2.06 8.33Q0.75 6.94 0.75 4.92ZM2.12 4.73L2.12 4.73Q2.12 5.97 2.42 6.91Q2.71 7.86 3.18 8.37Q3.65 8.89 4.16 9.14Q4.67 9.38 5.19 9.38L5.19 9.38Q5.70 9.38 6.19 9.14Q6.69 8.90 7.17 8.39Q7.64 7.89 7.94 6.94Q8.24 5.98 8.24 4.73L8.24 4.73Q8.24 3.75 8.03 2.97Q7.83 2.18 7.50 1.71Q7.17 1.23 6.75 0.92Q6.33 0.61 5.94 0.49Q5.55 0.37 5.18 0.37L5.18 0.37Q4.71 0.37 4.22 0.57Q3.73 0.78 3.24 1.24Q2.75 1.70 2.43 2.60Q2.12 3.50 2.12 4.73ZM10.79 4.10L10.79 4.10L10.79 3.69L12.75 3.54L12.75 7.97Q12.75 8.29 12.77 8.47Q12.80 8.66 12.91 8.88Q13.01 9.09 13.26 9.19Q13.52 9.29 13.92 9.29L13.92 9.29Q14.64 9.29 15.09 8.69Q15.53 8.10 15.53 7.22L15.53 7.22L15.53 4.85Q15.53 4.35 15.36 4.23Q15.18 4.10 14.49 4.10L14.49 4.10L14.49 3.69L16.45 3.54L16.45 8.28Q16.45 8.77 16.62 8.90Q16.80 9.03 17.49 9.03L17.49 9.03L17.49 9.44L15.57 9.58L15.57 8.38Q15.01 9.58 13.85 9.58L13.85 9.58Q13.27 9.58 12.87 9.44Q12.47 9.29 12.27 9.10Q12.06 8.91 11.96 8.56Q11.85 8.20 11.84 7.98Q11.82 7.76 11.82 7.33L11.82 7.33L11.82 5.33Q11.82 4.42 11.69 4.26Q11.56 4.10 10.79 4.10ZM19.14 4.10L18.01 4.10L18.01 3.81Q18.62 3.78 19.03 3.35Q19.43 2.92 19.57 2.38Q19.71 1.85 19.73 1.23L19.73 1.23L20.06 1.23L20.06 3.69L21.97 3.69L21.97 4.10L20.06 4.10L20.06 7.81Q20.06 9.25 20.96 9.25L20.96 9.25Q21.34 9.25 21.60 8.85Q21.85 8.46 21.85 7.76L21.85 7.76L21.85 7.02L22.18 7.02L22.18 7.78Q22.18 8.50 21.85 9.04Q21.52 9.58 20.86 9.58L20.86 9.58Q20.62 9.58 20.38 9.52Q20.14 9.46 19.83 9.30Q19.52 9.14 19.33 8.75Q19.14 8.35 19.14 7.78L19.14 7.78L19.14 4.10Z"
/>
</g>
</g>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57113999999996,-409.43721999999997)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57113999999996,-351.23247999999995)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,338.53211,-380.33486)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.5494034883087,-390.5945499304999)"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

src/content/book/grundlagen/assets/02-cmos.json
+411
View File
@@ -0,0 +1,411 @@
{
"version": "0.1",
"components": [
{
"type": "node",
"position": {
"x": 377.953,
"y": -377.953
},
"id": "nfet"
},
{
"type": "rect",
"position": {
"x": 321.26,
"y": -349.606
},
"stroke": {
"opacity": 0
},
"size": {
"x": 23.622,
"y": 18.898
},
"text": {
"text": "a",
"showPlaceholderText": true
}
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -377.953
},
{
"x": 377.953,
"y": -407.055
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"-|"
]
},
{
"type": "rect",
"position": {
"x": 368.504,
"y": -477.165
},
"stroke": {
"opacity": 0
},
"size": {
"x": 28.346,
"y": 28.346
},
"text": {
"text": "High"
}
},
{
"type": "rect",
"position": {
"x": 401.575,
"y": -349.606
},
"stroke": {
"opacity": 0
},
"size": {
"x": 37.795,
"y": 28.346
},
"text": {
"text": "Out",
"showPlaceholderText": true
}
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -319.748
},
"id": "pfet"
},
{
"type": "wire",
"points": [
{
"x": 340.914,
"y": -377.953
},
{
"x": 333.071,
"y": -349.606
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"|-"
]
},
{
"type": "wire",
"points": [
{
"x": 340.914,
"y": -319.748
},
{
"x": 333.071,
"y": -349.606
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"|-"
]
},
{
"type": "node",
"position": {
"x": 333.071,
"y": -349.606
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 340.914,
"y": -349.606
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -387.402
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -309.921
},
"id": "circ"
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -319.748
},
{
"x": 377.953,
"y": -309.921
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"|-"
]
},
{
"type": "rect",
"position": {
"x": 372.283,
"y": -223.937
},
"stroke": {
"opacity": 0
},
"size": {
"x": 26.457,
"y": 22.677
},
"text": {
"text": "Low",
"showPlaceholderText": true
}
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -349.606
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 387.402,
"y": -349.606
},
"id": "circ"
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -349.606
},
{
"x": 387.402,
"y": -349.606
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"-|"
]
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -438.614
},
"id": "nfet"
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -448.819
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -467.717
},
"id": "circ"
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -438.614
},
{
"x": 377.953,
"y": -448.819
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"-|"
]
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -260.598
},
"id": "pfet"
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -289.701
},
{
"x": 377.953,
"y": -290.646
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"-|"
]
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -407.055
},
{
"x": 377.953,
"y": -409.512
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"|-"
]
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -250.394
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 377.953,
"y": -231.496
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 340.914,
"y": -260.598
},
"id": "circ"
},
{
"type": "node",
"position": {
"x": 340.914,
"y": -438.614
},
"id": "circ"
},
{
"type": "wire",
"points": [
{
"x": 377.953,
"y": -260.598
},
{
"x": 377.953,
"y": -250.394
}
],
"stroke": {
"width": "0.4pt"
},
"directions": [
"-|"
]
},
{
"type": "rect",
"position": {
"x": 328.346,
"y": -444.094
},
"stroke": {
"opacity": 0
},
"size": {
"x": 14.173,
"y": 9.449
},
"text": {
"text": "b",
"showPlaceholderText": true
}
},
{
"type": "rect",
"position": {
"x": 328.347,
"y": -264.567
},
"stroke": {
"opacity": 0
},
"size": {
"x": 14.173,
"y": 9.449
},
"text": {
"text": "b",
"showPlaceholderText": true
}
}
]
}
src/content/book/grundlagen/assets/02-cmos.svg
+511
View File
@@ -0,0 +1,511 @@
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="font-size: 10pt; overflow: visible;"
viewBox="308.11566162109375 -492.6713562011719 113.69015502929688 281.40618896484375"
>
<defs>
<symbol id="node_nfet">
<g stroke="currentStroke" stroke-miterlimit="10" stroke-width=".4">
<path
fill="none"
stroke-width=".53134"
d="M37.57039.26569v19.18203h-18.51952"
/>
<path
fill="none"
stroke-width="1.06267"
d="M19.05087 15.08254v8.0032m0 2.91021v7.27556m0 2.91019v8.0032"
/>
<path
fill="none"
stroke-width=".53134"
d="M19.05087 29.63372h18.78519m-18.78519 10.186h18.51952v19.18204"
/>
<path
fill="none"
stroke-width="1.06267"
d="M14.60638 19.18205v20.90335"
/>
<path
d="M29.03917 29.63372v3.04908l-6.81374-3.04908 6.81374-3.04907Z"
stroke="none"
fill="currentColor"
/>
<path
fill="none"
stroke-width=".53134"
d="M14.60638 29.63372h-14.34069"
/>
</g>
</symbol>
<symbol id="node_pfet">
<g stroke="currentStroke" stroke-miterlimit="10" stroke-width=".4">
<path
fill="none"
stroke-width=".53134"
d="M37.57039.26569v19.18203h-18.51952"
/>
<path
fill="none"
stroke-width="1.06267"
d="M19.05087 15.08254v8.0032m0 2.91021v7.27556m0 2.91019v8.0032"
/>
<path
fill="none"
stroke-width=".53134"
d="M19.05087 29.63372h18.78519m-18.78519 10.186h18.51952v19.18204"
/>
<path
fill="none"
stroke-width="1.06267"
d="M14.60638 19.18205v20.90335"
/>
<path
d="M23.87798 29.63372v-3.04907l6.81375 3.04907-6.81375 3.04908Z"
stroke="none"
fill="currentColor"
/>
<path
fill="none"
stroke-width=".53134"
d="M14.60638 29.63372h-14.34069"
/>
</g>
</symbol>
<symbol id="node_circ">
<g
stroke="currentStroke"
stroke-miterlimit="10"
stroke-width=".53134"
>
<path
d="M4.49803 2.38186c0-1.16874-.94744-2.11617-2.11617-2.11617s-2.11617.94743-2.11617 2.11617.94743 2.11617 2.11617 2.11617 2.11617-.94744 2.11617-2.11617Zm-2.11617 0"
fill="currentColor"
/>
</g>
</symbol>
</defs>
<g class="">
<use
xlink:href="#node_nfet"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,340.38261,-407.58671999999996)"
/>
</g>
<g class="">
<rect
width="22.288666666666668"
height="17.564666666666668"
style=""
x="0.6666666666666661"
y="0.6666666666666661"
transform="matrix(1,0,0,1,309.449,-359.055)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,317.449,-351.055)" />
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,317.449,-351.055)">
<path
d="M0.56 4.73L0.56 4.73Q0.56 3.59 1.89 2.99L1.89 2.99Q2.70 2.61 4.35 2.51L4.35 2.51L4.35 2.02Q4.35 1.20 3.92 0.76Q3.48 0.32 2.94 0.32L2.94 0.32Q1.96 0.32 1.49 0.93L1.49 0.93Q1.89 0.94 2.03 1.14Q2.17 1.34 2.17 1.54L2.17 1.54Q2.17 1.81 2.01 1.98Q1.84 2.15 1.56 2.15L1.56 2.15Q1.30 2.15 1.12 1.99Q0.94 1.82 0.94 1.53L0.94 1.53Q0.94 0.88 1.53 0.45Q2.12 0.02 2.96 0.02L2.96 0.02Q4.06 0.02 4.79 0.75L4.79 0.75Q5.01 0.98 5.13 1.28Q5.24 1.57 5.25 1.76Q5.27 1.95 5.27 2.33L5.27 2.33L5.27 4.99Q5.27 5.07 5.29 5.20Q5.32 5.33 5.44 5.50Q5.56 5.66 5.76 5.66L5.76 5.66Q6.24 5.66 6.24 4.81L6.24 4.81L6.24 4.06L6.58 4.06L6.58 4.81Q6.58 5.52 6.20 5.80Q5.83 6.07 5.48 6.07L5.48 6.07Q5.04 6.07 4.76 5.75Q4.48 5.42 4.44 4.98L4.44 4.98Q4.24 5.49 3.78 5.82Q3.32 6.15 2.70 6.15L2.70 6.15Q2.21 6.15 1.76 6.03Q1.31 5.90 0.93 5.57Q0.56 5.23 0.56 4.73ZM1.59 4.71L1.59 4.71Q1.59 5.21 1.94 5.53Q2.29 5.85 2.79 5.85L2.79 5.85Q3.35 5.85 3.85 5.41Q4.35 4.98 4.35 4.13L4.35 4.13L4.35 2.79Q2.87 2.84 2.23 3.43Q1.59 4.02 1.59 4.71Z"
/>
</g>
</g>
</g>
<g class="">
<polyline
points="377.953,-377.953 377.953,-407.055"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<rect
width="27.012666666666668"
height="27.012666666666668"
style=""
x="0.6666666666666661"
y="0.6666666666666661"
transform="matrix(1,0,0,1,354.331,-491.338)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,362.331,-483.338)" />
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,362.331,-483.338)">
<path
d="M0.44 9.29L0.44 9.29L0.44 8.88L0.76 8.88Q1.48 8.88 1.65 8.76Q1.82 8.64 1.82 8.25L1.82 8.25L1.82 1.22Q1.82 0.84 1.65 0.72Q1.48 0.60 0.76 0.60L0.76 0.60L0.44 0.60L0.44 0.18Q0.91 0.22 2.42 0.22L2.42 0.22Q3.91 0.22 4.38 0.18L4.38 0.18L4.38 0.60L4.06 0.60Q3.33 0.60 3.17 0.72Q3.00 0.84 3.00 1.22L3.00 1.22L3.00 4.34L6.99 4.34L6.99 1.22Q6.99 0.84 6.82 0.72Q6.65 0.60 5.93 0.60L5.93 0.60L5.61 0.60L5.61 0.18Q6.08 0.22 7.58 0.22L7.58 0.22Q9.08 0.22 9.54 0.18L9.54 0.18L9.54 0.60L9.23 0.60Q8.50 0.60 8.34 0.72Q8.17 0.84 8.17 1.22L8.17 1.22L8.17 8.25Q8.17 8.63 8.34 8.75Q8.51 8.88 9.23 8.88L9.23 8.88L9.54 8.88L9.54 9.29Q9.08 9.25 7.57 9.25L7.57 9.25Q6.08 9.25 5.61 9.29L5.61 9.29L5.61 8.88L5.93 8.88Q6.65 8.88 6.82 8.76Q6.99 8.64 6.99 8.25L6.99 8.25L6.99 4.76L3.00 4.76L3.00 8.25Q3.00 8.63 3.17 8.75Q3.33 8.88 4.06 8.88L4.06 8.88L4.38 8.88L4.38 9.29Q3.91 9.25 2.40 9.25L2.40 9.25Q0.91 9.25 0.44 9.29ZM10.44 9.29L10.44 9.29L10.44 8.88Q11.15 8.88 11.32 8.79Q11.48 8.70 11.48 8.27L11.48 8.27L11.48 4.69Q11.48 4.19 11.31 4.07Q11.15 3.96 10.49 3.96L10.49 3.96L10.49 3.54L12.36 3.40L12.36 8.29Q12.36 8.68 12.50 8.78Q12.64 8.88 13.29 8.88L13.29 8.88L13.29 9.29Q11.93 9.25 11.91 9.25L11.91 9.25Q11.73 9.25 10.44 9.29ZM11.00 1.07L11.00 1.07Q11.00 0.80 11.21 0.59Q11.41 0.37 11.71 0.37Q12.00 0.37 12.21 0.57Q12.42 0.77 12.42 1.08Q12.42 1.38 12.21 1.58Q12.00 1.78 11.71 1.78L11.71 1.78Q11.40 1.78 11.20 1.57Q11.00 1.35 11.00 1.07ZM14.06 10.34L14.06 10.34Q14.06 9.91 14.39 9.54Q14.72 9.17 15.29 9.01L15.29 9.01Q14.71 8.64 14.71 7.82L14.71 7.82Q14.71 7.20 15.12 6.72L15.12 6.72Q14.49 6.20 14.49 5.34L14.49 5.34Q14.49 4.55 15.12 3.98Q15.74 3.40 16.65 3.40L16.65 3.40Q17.45 3.40 18.07 3.88L18.07 3.88Q18.70 3.25 19.48 3.25L19.48 3.25Q19.82 3.25 19.99 3.46Q20.16 3.68 20.16 3.90L20.16 3.90Q20.16 4.11 20.03 4.20Q19.90 4.30 19.77 4.30L19.77 4.30Q19.61 4.30 19.50 4.19Q19.38 4.09 19.38 3.92L19.38 3.92Q19.38 3.64 19.60 3.55L19.60 3.55Q19.56 3.54 19.47 3.54L19.47 3.54Q18.82 3.54 18.26 4.06L18.26 4.06Q18.81 4.57 18.81 5.36Q18.81 6.14 18.18 6.72Q17.56 7.30 16.65 7.30L16.65 7.30Q15.90 7.30 15.33 6.89L15.33 6.89Q15.10 7.15 15.10 7.52L15.10 7.52Q15.10 7.85 15.31 8.11Q15.51 8.37 15.81 8.41L15.81 8.41Q15.90 8.42 16.81 8.42L16.81 8.42Q17.34 8.42 17.64 8.44Q17.93 8.45 18.35 8.54Q18.77 8.62 19.10 8.79L19.10 8.79Q19.97 9.28 19.97 10.32L19.97 10.32Q19.97 11.08 19.10 11.56Q18.22 12.04 17.01 12.04L17.01 12.04Q15.79 12.04 14.93 11.55Q14.06 11.07 14.06 10.34ZM14.76 10.34L14.76 10.34Q14.76 10.89 15.40 11.31Q16.05 11.73 17.02 11.73L17.02 11.73Q17.98 11.73 18.63 11.32Q19.28 10.90 19.28 10.34L19.28 10.34Q19.28 9.95 19.05 9.69Q18.82 9.44 18.36 9.34Q17.89 9.24 17.57 9.22Q17.24 9.20 16.64 9.20L16.64 9.20L15.85 9.20Q15.40 9.22 15.08 9.55Q14.76 9.89 14.76 10.34ZM15.49 5.36L15.49 5.36Q15.49 7.00 16.65 7.00L16.65 7.00Q17.24 7.00 17.60 6.46L17.60 6.46Q17.81 6.10 17.81 5.34L17.81 5.34Q17.81 3.70 16.65 3.70L16.65 3.70Q16.07 3.70 15.70 4.24L15.70 4.24Q15.49 4.59 15.49 5.36ZM20.79 9.29L20.79 9.29L20.79 8.88Q21.50 8.88 21.66 8.79Q21.82 8.70 21.82 8.27L21.82 8.27L21.82 1.34Q21.82 0.84 21.65 0.72Q21.48 0.60 20.79 0.60L20.79 0.60L20.79 0.18L22.70 0.04L22.70 4.67L22.71 4.67Q22.93 4.19 23.41 3.79Q23.89 3.40 24.64 3.40L24.64 3.40Q25.64 3.40 26.04 3.89L26.04 3.89Q26.33 4.22 26.39 4.59Q26.45 4.97 26.45 5.93L26.45 5.93L26.45 8.47Q26.46 8.75 26.68 8.82Q26.89 8.88 27.49 8.88L27.49 8.88L27.49 9.29Q26.13 9.25 26.00 9.25L26.00 9.25Q25.89 9.25 24.49 9.29L24.49 9.29L24.49 8.88Q25.20 8.88 25.37 8.79Q25.53 8.70 25.53 8.27L25.53 8.27L25.53 5.17Q25.53 4.49 25.33 4.09Q25.12 3.69 24.54 3.69L24.54 3.69Q23.85 3.69 23.30 4.27Q22.75 4.85 22.75 5.82L22.75 5.82L22.75 8.27Q22.75 8.70 22.91 8.79Q23.08 8.88 23.78 8.88L23.78 8.88L23.78 9.29Q22.42 9.25 22.29 9.25L22.29 9.25Q22.19 9.25 20.79 9.29Z"
/>
</g>
</g>
</g>
<g class="">
<rect
width="36.461666666666666"
height="27.012666666666668"
style=""
x="0.6666666666666679"
y="0.6666666666666661"
transform="matrix(1,0,0,1,382.6775,-363.779)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,390.6775,-355.779)" />
<g fill="hsl(0 0 85)" transform="matrix(1,0,0,1,390.6775,-355.779)">
<path
d="M0.75 4.92L0.75 4.92Q0.75 2.88 2.05 1.46Q3.36 0.03 5.18 0.03L5.18 0.03Q7.01 0.03 8.31 1.46Q9.62 2.89 9.62 4.92L9.62 4.92Q9.62 6.93 8.31 8.33Q7.00 9.73 5.18 9.73L5.18 9.73Q3.38 9.73 2.06 8.33Q0.75 6.94 0.75 4.92ZM2.12 4.73L2.12 4.73Q2.12 5.97 2.42 6.91Q2.71 7.86 3.18 8.37Q3.65 8.89 4.16 9.14Q4.67 9.38 5.19 9.38L5.19 9.38Q5.70 9.38 6.19 9.14Q6.69 8.90 7.17 8.39Q7.64 7.89 7.94 6.94Q8.24 5.98 8.24 4.73L8.24 4.73Q8.24 3.75 8.03 2.97Q7.83 2.18 7.50 1.71Q7.17 1.23 6.75 0.92Q6.33 0.61 5.94 0.49Q5.55 0.37 5.18 0.37L5.18 0.37Q4.71 0.37 4.22 0.57Q3.73 0.78 3.24 1.24Q2.75 1.70 2.43 2.60Q2.12 3.50 2.12 4.73ZM10.79 4.10L10.79 4.10L10.79 3.69L12.75 3.54L12.75 7.97Q12.75 8.29 12.77 8.47Q12.80 8.66 12.91 8.88Q13.01 9.09 13.26 9.19Q13.52 9.29 13.92 9.29L13.92 9.29Q14.64 9.29 15.09 8.69Q15.53 8.10 15.53 7.22L15.53 7.22L15.53 4.85Q15.53 4.35 15.36 4.23Q15.18 4.10 14.49 4.10L14.49 4.10L14.49 3.69L16.45 3.54L16.45 8.28Q16.45 8.77 16.62 8.90Q16.80 9.03 17.49 9.03L17.49 9.03L17.49 9.44L15.57 9.58L15.57 8.38Q15.01 9.58 13.85 9.58L13.85 9.58Q13.27 9.58 12.87 9.44Q12.47 9.29 12.27 9.10Q12.06 8.91 11.96 8.56Q11.85 8.20 11.84 7.98Q11.82 7.76 11.82 7.33L11.82 7.33L11.82 5.33Q11.82 4.42 11.69 4.26Q11.56 4.10 10.79 4.10ZM19.14 4.10L18.01 4.10L18.01 3.81Q18.62 3.78 19.03 3.35Q19.43 2.92 19.57 2.38Q19.71 1.85 19.73 1.23L19.73 1.23L20.06 1.23L20.06 3.69L21.97 3.69L21.97 4.10L20.06 4.10L20.06 7.81Q20.06 9.25 20.96 9.25L20.96 9.25Q21.34 9.25 21.60 8.85Q21.85 8.46 21.85 7.76L21.85 7.76L21.85 7.02L22.18 7.02L22.18 7.78Q22.18 8.50 21.85 9.04Q21.52 9.58 20.86 9.58L20.86 9.58Q20.62 9.58 20.38 9.52Q20.14 9.46 19.83 9.30Q19.52 9.14 19.33 8.75Q19.14 8.35 19.14 7.78L19.14 7.78L19.14 4.10Z"
/>
</g>
</g>
</g>
<g class="">
<use
xlink:href="#node_pfet"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,340.38261,-349.38172)"
/>
</g>
<g class="">
<polyline
points="340.914,-377.953 340.914,-349.606 333.071,-349.606"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<polyline
points="340.914,-319.748 340.914,-349.606 333.071,-349.606"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,330.68914,-351.98786)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,338.53213999999997,-351.98786)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57113999999996,-389.78386)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57113999999996,-312.30286)"
/>
</g>
<g class="">
<polyline
points="377.953,-319.748 377.953,-309.921"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<rect
width="25.12366666666667"
height="21.343666666666667"
style=""
x="0.6666666666666661"
y="0.6666666666666661"
transform="matrix(1,0,0,1,359.0545,-235.27550000000002)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,367.0545,-227.27550000000002)"
/>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,367.0545,-227.27550000000002)"
>
<path
d="M7.39 9.14L0.44 9.14L0.44 8.73L0.76 8.73Q1.48 8.73 1.65 8.61Q1.82 8.49 1.82 8.10L1.82 8.10L1.82 1.07Q1.82 0.69 1.65 0.57Q1.48 0.45 0.76 0.45L0.76 0.45L0.44 0.45L0.44 0.03Q0.91 0.07 2.47 0.07L2.47 0.07Q4.23 0.07 4.71 0.03L4.71 0.03L4.71 0.45L4.26 0.45Q3.65 0.45 3.37 0.53Q3.09 0.61 3.05 0.71Q3.00 0.82 3.00 1.09L3.00 1.09L3.00 8.20Q3.00 8.54 3.10 8.64Q3.20 8.73 3.65 8.73L3.65 8.73L4.75 8.73Q5.42 8.73 5.91 8.53Q6.40 8.33 6.66 8.07Q6.92 7.82 7.09 7.34Q7.27 6.86 7.32 6.56Q7.38 6.25 7.43 5.70L7.43 5.70L7.76 5.70L7.39 9.14ZM9.59 8.42Q8.70 7.55 8.70 6.29Q8.70 5.02 9.57 4.09Q10.43 3.16 11.67 3.16L11.67 3.16Q12.88 3.16 13.75 4.09Q14.62 5.01 14.62 6.29L14.62 6.29Q14.62 7.55 13.74 8.42Q12.86 9.29 11.65 9.29L11.65 9.29Q10.47 9.29 9.59 8.42ZM9.81 6.18L9.81 6.18Q9.81 7.47 10.15 8.06L10.15 8.06Q10.67 8.95 11.67 8.95L11.67 8.95Q12.16 8.95 12.57 8.69Q12.99 8.42 13.22 7.97L13.22 7.97Q13.51 7.38 13.51 6.18L13.51 6.18Q13.51 4.90 13.16 4.33L13.16 4.33Q12.64 3.46 11.65 3.46L11.65 3.46Q11.22 3.46 10.80 3.69Q10.38 3.91 10.13 4.36L10.13 4.36Q9.81 4.94 9.81 6.18ZM15.24 3.81L15.24 3.81L15.24 3.39Q15.96 3.43 16.48 3.43L16.48 3.43Q16.73 3.43 17.94 3.39L17.94 3.39L17.94 3.81Q17.15 3.81 17.15 4.17L17.15 4.17Q17.15 4.24 17.21 4.41L17.21 4.41L18.48 7.97L19.63 4.74Q19.39 4.09 19.32 4.01L19.32 4.01Q19.16 3.81 18.48 3.81L18.48 3.81L18.48 3.39Q19.08 3.43 19.67 3.43L19.67 3.43Q19.90 3.43 21.05 3.39L21.05 3.39L21.05 3.81Q20.27 3.81 20.27 4.17L20.27 4.17Q20.27 4.22 20.33 4.42L20.33 4.42L21.65 8.14L22.86 4.73Q22.93 4.55 22.94 4.45L22.94 4.45Q22.94 4.15 22.73 3.99Q22.52 3.82 22.16 3.81L22.16 3.81L22.16 3.39Q22.92 3.43 23.40 3.43L23.40 3.43Q23.93 3.43 24.38 3.39L24.38 3.39L24.38 3.81Q23.55 3.83 23.26 4.66L23.26 4.66L21.69 9.04Q21.54 9.28 21.43 9.29L21.43 9.29Q21.25 9.29 21.16 9.04L21.16 9.04L19.80 5.25L18.45 9.02Q18.40 9.19 18.35 9.24Q18.31 9.29 18.19 9.29Q18.07 9.29 18.01 9.22Q17.96 9.15 17.90 8.99L17.90 8.99L16.22 4.27Q16.11 3.97 15.93 3.89Q15.76 3.81 15.24 3.81Z"
/>
</g>
</g>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57113999999996,-351.98786)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,385.02013999999997,-351.98786)"
/>
</g>
<g class="">
<polyline
points="377.953,-349.606 387.402,-349.606"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<use
xlink:href="#node_nfet"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,340.38261,-468.24771999999996)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57113999999996,-451.20086000000003)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57113999999996,-470.09886)"
/>
</g>
<g class="">
<polyline
points="377.953,-438.614 377.953,-448.819"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<use
xlink:href="#node_pfet"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,340.38236590551173,-290.23216299212595)"
class=""
/>
</g>
<g class="">
<polyline
points="377.9527559055117,-289.70080299212594 377.953,-289.70080299212594 377.953,-290.64561999999995"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<polyline
points="377.953,-407.05535999999995 377.953,-409.51161999999994"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57089590551175,-252.77556078740153)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,375.57089590551175,-233.87792299212595)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,338.5318659055117,-262.980302992126)"
/>
</g>
<g class="">
<use
xlink:href="#node_circ"
fill="#fff"
stroke="hsl(0 0 85)"
style="color: hsl(0 0 85);"
transform="matrix(1,0,0,1,338.53211,-440.99586)"
/>
</g>
<g class="">
<polyline
points="377.9527559055117,-260.59844299212597 377.95275590551176,-260.59844299212597 377.95275590551176,-250.39370078740154"
fill="none"
stroke-dasharray="0.4pt 0pt"
stroke-opacity="1"
stroke-width="0.5333333333333333"
stroke="hsl(0 0 85)"
/>
</g>
<g class="">
<rect
width="12.83989501312332"
height="8.115485564304473"
style=""
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
x="0.666666666666667"
y="0.666666666666667"
transform="matrix(1,0,0,1,321.25984251968504,-448.81889763779526)"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,328.34645669291336,-444.09448818897636)"
/>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,328.34645669291336,-444.09448818897636)"
>
<path
d="M0.37 0.60L0.37 0.60L0.37 0.18L2.29 0.04L2.29 4.26Q3.07 3.40 4.12 3.40L4.12 3.40Q5.27 3.40 6.11 4.28Q6.95 5.15 6.95 6.41L6.95 6.41Q6.95 7.68 6.07 8.56Q5.19 9.44 3.97 9.44L3.97 9.44Q2.86 9.44 2.23 8.46L2.23 8.46Q1.76 9.28 1.74 9.29L1.74 9.29L1.41 9.29L1.41 1.34Q1.41 0.84 1.24 0.72Q1.06 0.60 0.37 0.60ZM2.33 5.02L2.33 7.77Q2.33 8.05 2.52 8.33L2.52 8.33Q3.05 9.14 3.91 9.14L3.91 9.14Q3.91 9.14 3.92 9.14L3.92 9.14Q4.85 9.14 5.43 8.29L5.43 8.29Q5.84 7.65 5.84 6.40L5.84 6.40Q5.84 5.16 5.46 4.54L5.46 4.54Q4.92 3.69 4.06 3.69L4.06 3.69Q3.08 3.69 2.48 4.54L2.48 4.54Q2.33 4.76 2.33 5.02L2.33 5.02Z"
/>
</g>
</g>
</g>
<g class="">
<rect
width="12.839666666666666"
height="8.115666666666666"
style=""
x="0.666666666666667"
y="0.666666666666667"
transform="matrix(1,0,0,1,321.2600708661417,-269.29142913385823)"
stroke-dasharray="1pt 0pt"
stroke-opacity="0"
stroke-width="0"
stroke="hsl(0 0 85)"
fill-opacity="1"
fill="none"
/>
<g
transform="matrix(1,0,0,1,0,0)"
style="pointer-events: none;"
class=""
>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,328.3465708661417,-264.56692913385825)"
/>
<g
fill="hsl(0 0 85)"
transform="matrix(1,0,0,1,328.3465708661417,-264.56692913385825)"
>
<path
d="M0.37 0.60L0.37 0.60L0.37 0.18L2.29 0.04L2.29 4.26Q3.07 3.40 4.12 3.40L4.12 3.40Q5.27 3.40 6.11 4.28Q6.95 5.15 6.95 6.41L6.95 6.41Q6.95 7.68 6.07 8.56Q5.19 9.44 3.97 9.44L3.97 9.44Q2.86 9.44 2.23 8.46L2.23 8.46Q1.76 9.28 1.74 9.29L1.74 9.29L1.41 9.29L1.41 1.34Q1.41 0.84 1.24 0.72Q1.06 0.60 0.37 0.60ZM2.33 5.02L2.33 7.77Q2.33 8.05 2.52 8.33L2.52 8.33Q3.05 9.14 3.91 9.14L3.91 9.14Q3.91 9.14 3.92 9.14L3.92 9.14Q4.85 9.14 5.43 8.29L5.43 8.29Q5.84 7.65 5.84 6.40L5.84 6.40Q5.84 5.16 5.46 4.54L5.46 4.54Q4.92 3.69 4.06 3.69L4.06 3.69Q3.08 3.69 2.48 4.54L2.48 4.54Q2.33 4.76 2.33 5.02L2.33 5.02Z"
/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB