-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-cg.html
329 lines (301 loc) · 11.9 KB
/
index-cg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>A Carol Shaw story</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/night.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="title" data-background-image="img/cia-out.jpg" data-background-opacity="0.6">
<h2 class="title">a Carol Shaw story</h2>
<h3>or being a programmer in early 80-ties</h3>
<p>- Maciek Małecki, 2020 -</p>
</section>
<section data-background-image="img/terminator-assembly.jpg">
<div class="overlay citation">
<p>
"These computers did not come with operating systems. They didn't even come with file
systems. What you got was an assembler."
</p>
<p class="author">Robert C. Martin, Clean Architecture: A Craftsman's Guide to Software Structure and Design</p>
</div>
</section>
<section data-background-image="img/terminator-assembly.jpg" data-background-opacity="0.2">
<h2>Why?</h2>
<h4 class="fragment other-color">Maybe you like history?</h4>
<h4 class="fragment other-color-3">Pure nostalgia</h4>
<h2 class="fragment">Wanna know...</h2>
<h4 class="fragment other-color-2">... how does a machine work?</h4>
<h4 class="fragment other-color-3">...how can a JIT produce faster code than GCC?</h4>
<h4 class="fragment other-color-4">...why reactive systems perform better than multithreaded?</h4>
</section>
<section>
<h3>Carol Shaw</h3>
<img src="img/carol-shaw.jpg" alt="">
<div class="rights">https://info.umkc.edu/unews/celebrating-women-in-stem-carol-shaw/</div>
</section>
<section>
<h3>River Raid for Atari VCS (1982)</h3>
<img src="img/river-raid.gif" alt="rr" height="450" class="plain">
</section>
<section>
<img src="img/Atari-2600-Wood-4Sw-Set.png" alt="Atari2600" class="plain">
<div class="rights">WIKI Commons, PD</div>
</section>
<section>
<div class="flex">
<img src="img/KL_UMC_UM6507.jpg" alt="" width="250">
<img src="img/MOS_6532_3776_package_top.jpg" alt="" width="250">
<img src="img/tia.jpg" alt="" width="250">
</div>
<div class="emph fragment" data-fragment-index="1">
<div>only 128 bytes of RAM!</div>
</div>
<div>
<ul>
<li class="fragment" data-fragment-index="2">Color graphics chip (TIA) but no framebuffer</li>
<li class="fragment" data-fragment-index="2">RAM-less design</li>
<li class="fragment" data-fragment-index="3">20-bit register for halve of the playfield</li>
<li class="fragment" data-fragment-index="3">2 8-bit registers for players, 2 1-bit missiles, 1 1-bit ball</li>
<li class="fragment" data-fragment-index="4">Must be rewritten every scan line</li>
</ul>
</div>
</section>
<section>
<img src="img/pong.jpg" alt="pong" height="550">
</section>
<section data-background-image="img/et2600Screen.jpg">
</section>
<section>
<div class="flex">
<img src="img/A5cathoderay.jpg" alt="CRT" height="300">
<img src="img/televisionscreen.png" alt="A2600" height="450">
</div>
</section>
<section data-background-image="img/mos6502-mm.JPG">
<h2>MOS 6502</h2>
<div class="flex fragment">
<div>
<img src="img/chuckpeddle.jpg" alt="Chuck" width="500">
</div>
<div class="align-left">
<h3>Chuck Peddle</h3>
<h4>1937 - 2019</h4>
</div>
</div>
</section>
<section>
<h3>Machine code</h3>
<p>
<code class="small-code">169 0 141 32 208 169 1 141 32 208 76 0 192</code>
</p>
<h3 class="fragment" data-fragment-index="2">Syntax</h3>
<div class="flex">
<div class="fragment">
<pre class="fragment" data-fragment-index="2">
169 0
141 32 208
169 1
141 32 208
76 0 192
</pre>
</div>
<div class="fragment">
<pre class="fragment other-color" data-fragment-index="2">
$A9 $00
$8D $20 $D0
$A9 $01
$8D $20 $D0
$4C $00 $C0
</pre>
</div>
</div>
</section>
<section>
<h3>Assembly language</h3>
<p>
- human readable form of machine code
</p>
<h3>Assembler</h3>
<p>
- translator (a program) from assembly into the machine code
</p>
</section>
<section>
<h4>Assembly instruction example</h4>
<h4 class="other-color-2">LDA - LoaD Accumulator</h4>
<pre>
LDA value
</pre>
</section>
<section>
<h3>Addressing modes (6502)</h3>
<pre>
+----------------+-----------------------+---------+---------+----------+
| Addressing Mode| Assembly Language Form| OP CODE |No. Bytes|No. Cycles|
+----------------+-----------------------+---------+---------+----------+
| Immediate | LDA #$FF | $A9 | 2 | 2 |
| ZeroPage | LDA $FF | $A5 | 2 | 3 |
| ZeroPage,X | LDA $FF,X | $B5 | 2 | 4 |
| Absolute | LDA $FFFF | $AD | 3 | 4 |
| Absolute,X | LDA $FFFF,X | $BD | 3 | 4* |
| Absolute,Y | LDA $FFFF,Y | $B9 | 3 | 4* |
| (Indirect,X) | LDA ($FF,X) | $A1 | 2 | 6 |
| (Indirect),Y | LDA ($FF),Y | $B1 | 2 | 5* |
+----------------+-----------------------+---------+---------+----------+
*add extra 1 cycle if crossing 256b page boundary
</pre>
</section>
<section>
<h3>Microprocessor block diagram</h3>
<img src="img/6502-diagram.png" alt="6502" height="550">
</section>
<section>
<h3>Instruction set (6502)</h3>
<pre class="small-code">
ADC Add Memory to Accumulator with Carry LDA Load Accumulator with Memory
AND "AND" Memory with Accumulator LDX Load Index X with Memory
ASL Shift Left One Bit (Memory or Accumulator) LDY Load Index Y with Memory
LSR Shift Right One Bit (Memory or Accumulator)
BCC Branch on Carry Clear
BCS Branch on Carry Set NOP No Operation
BEQ Branch on Result Zero
BIT Test Bits in Memory with Accumulator ORA "OR" Memory with Accumulator
BMI Branch on Result Minus
BNE Branch on Result not Zero PHA Push Accumulator on Stack
BPL Branch on Result Plus PHP Push Processor Status on Stack
BRK Force Break PLA Pull Accumulator from Stack
BVC Branch on Overflow Clear PLP Pull Processor Status from Stack
BVS Branch on Overflow Set
ROL Rotate One Bit Left (Memory or Accumulator)
CLC Clear Carry Flag ROR Rotate One Bit Right (Memory or Accumulator)
CLD Clear Decimal Mode RTI Return from Interrupt
CLI Clear interrupt Disable Bit RTS Return from Subroutine
CLV Clear Overflow Flag
CMP Compare Memory and Accumulator SBC Subtract Memory from Accumulator with Borrow
CPX Compare Memory and Index X SEC Set Carry Flag
CPY Compare Memory and Index Y SED Set Decimal Mode
SEI Set Interrupt Disable Status
DEC Decrement Memory by One STA Store Accumulator in Memory
DEX Decrement Index X by One STX Store Index X in Memory
DEY Decrement Index Y by One STY Store Index Y in Memory
INC Increment Memory by One TAX Transfer Accumulator to Index X
INX Increment Index X by One TAY Transfer Accumulator to Index Y
INY Increment Index Y by One TSX Transfer Stack Pointer to Index X
TXA Transfer Index X to Accumulator
JMP Jump to New Location TXS Transfer Index X to Stack Pointer
JSR Jump to New Location Saving Return Address TYA Transfer Index Y to Accumulator
</pre>
</section>
<section data-background-image="img/billgatesypaulallen.0.jpg" data-background-opacity="0.6">
</section>
<section data-background-image="img/billgatesypaulallen.0.jpg" data-background-opacity="0.1">
<h3>BASIC</h3>
<pre>
10 POKE 53280,0
20 POKE 53280,1
30 GOTO 10
</pre>
<h3 class="fragment">Assembly & machine code</h3>
<div class="flex">
<div class="fragment">
<pre>
loop: LDA #$00
STA $D020
LDA #$01
STA $D020
JMP loop
</pre>
</div>
<div class="fragment other-color">
<pre>
$C000 LDA #$00
$C002 STA $D020
$C005 LDA #$01
$C007 STA $D020
$C00A JMP $C000
</pre>
</div>
<div class="fragment">
<pre>
$C000 $A9 $00
$C002 $8D $20 $D0
$C005 $A9 $01
$C007 $8D $20 $D0
$C00A $4C $00 $C0
</pre>
</div>
<div class="fragment other-color">
<pre>
49152 169 0
49154 141 32 208
49157 169 1
49159 141 32 208
49162 76 0 192
</pre>
</div>
</div>
<code class="fragment small-code">169 0 141 32 208 169 1 141 32 208 76 0 192</code>
</section>
<section data-background-image="img/c64_laptop.JPG">
</section>
<section data-background-image="img/bajtek.png" data-background-opacity="0.4">
</section>
<section>
<h3>Machine Language</h3>
<p>Size and speed of the program</p>
<div>
<pre class="other-color">
size (b) cycles time* (µs)
$C000 LDA #$00 2 2 2.03
$C002 STA $D020 3 4 4.06
$C005 LDA #$01 2 2 2.03
$C007 STA $D020 3 4 4.06
$C00A JMP $C000 3 3 3.05
*PAL version, 0.965MHz
</pre>
</div>
</section>
<section>
<h2 class="other-color">All stuff on Github</h2>
<img src="img/qr-code-cg.png" width="300" alt="QR Code">
<p>
<a href="https://github.com/maciejmalecki/carol-shaw-story">https://github.com/maciejmalecki/carol-shaw-story</a>
</p>
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
history: true,
slideNumber: true,
dependencies: [
{src: 'plugin/markdown/marked.js'},
{src: 'plugin/markdown/markdown.js'},
{src: 'plugin/notes/notes.js', async: true},
{src: 'plugin/highlight/highlight.js', async: true}
]
});
</script>
</body>
</html>