Your SlideShare is downloading. ×
Emulating With JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Emulating With JavaScript

282

Published on

My talk for JS Conf Down Under 2012

My talk for JS Conf Down Under 2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
282
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Emulating with JavaScript new Cpu;
    • 2. WHOAMI
    • 3. WHOAMI• Alexander Dickson
    • 4. WHOAMI• Alexander Dickson• @alexdickson
    • 5. WHOAMI• Alexander Dickson• @alexdickson• Not an emulation expert
    • 6. WHOAMI• Alexander Dickson• @alexdickson• Not an emulation expert• JavaScript developer at Atlassian
    • 7. WHOAMI• Alexander Dickson• @alexdickson• Not an emulation expert• JavaScript developer at Atlassian ;
    • 8. JavaScript today
    • 9. JavaScript today• Fast
    • 10. JavaScript today• Fast• Browser APIs are awesome
    • 11. JavaScript today• Fast• Browser APIs are awesome• Inputs and outputs are awesome
    • 12. What we have
    • 13. What we have• Canvas Element
    • 14. What we have• Canvas Element• Web Audio API
    • 15. What we have• Canvas Element• Web Audio API• GamePad API
    • 16. What we have• Canvas Element• Web Audio API• GamePad API• Typed Arrays
    • 17. What we have• Canvas Element• Web Audio API• GamePad API• Typed Arrays• requestAnimationFrame()
    • 18. What we don’t have
    • 19. What we don’t have• Sane implementations
    • 20. What we don’t have• Sane implementations• Just kidding, but some are better than others
    • 21. What we can build
    • 22. What we can build• Lots of awesome, practical stuff...
    • 23. What we can build• Lots of awesome, practical stuff...• ...or, emulate hardware, such as gaming consoles.
    • 24. Why?
    • 25. Why?Because we can!
    • 26. What is anemulator?
    • 27. What is an emulator? In computing, an emulator is hardware or software or both that duplicates (or emulates) the functions of a first computer system (the guest) in a different second computer system (the host), so that the emulated behaviour closely resembles the behaviour of the real system.http://en.wikipedia.org/wiki/Emulator
    • 28. What can be emulated
    • 29. What can be emulated• Church-Turing thesis
    • 30. What can be emulated• Church-Turing thesis• Any system can be emulated
    • 31. Implementations
    • 32. Implementations• Interpreter
    • 33. Implementations• Interpreter• Dynamic Re-compilation
    • 34. Implementations• Interpreter• Dynamic Re-compilation• Static Re-compilation
    • 35. Shhhh...
    • 36. Shhhh...• Emulation can sometimes be a bit shaky from a legal perspective.
    • 37. Shhhh...• Emulation can sometimes be a bit shaky from a legal perspective.• Emulate at your own risk and always use free programs.
    • 38. Shhhh...• Emulation can sometimes be a bit shaky from a legal perspective.• Emulate at your own risk and always use free programs.
    • 39. Where to start CPU
    • 40. Where to start• Pick a system, anyCPU system
    • 41. Where to start• Pick a system, anyCPU system• Discover its components
    • 42. Where to start• Pick a system, anyCPU system• Discover its components• Find technical information on how components work
    • 43. Chip8
    • 44. Chip8 is Easy
    • 45. Chip8 is Easy• Simple CPU implementation
    • 46. Chip8 is Easy• Simple CPU implementation• Simple graphics
    • 47. Chip8 is Easy• Simple CPU implementation• Simple graphics• Fixed audio sample
    • 48. Demo Time
    • 49. Example System
    • 50. Nintendo Entertainment System
    • 51. Nintendo Entertainment System• Custom 6502 CPU
    • 52. Nintendo Entertainment System• Custom 6502 CPU• 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM
    • 53. Nintendo Entertainment System• Custom 6502 CPU• 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM• Custom-made PPU
    • 54. Nintendo Entertainment System• Custom 6502 CPU• 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM• Custom-made PPU• 5 sound channels
    • 55. Nintendo Entertainment System• Custom 6502 CPU• 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM• Custom-made PPU• 5 sound channels• Awesome rectangular controllers
    • 56. Von-Neumann ArchitectureCPU Memory Bus Peripherals
    • 57. CPU
    • 58. CPU• Basically a loop
    • 59. CPU• Basically a loop• Read operation codes (opcodes) from memory, processes them
    • 60. CPU• Basically a loop• Read operation codes (opcodes) from memory, processes them• Opcodes mostly operate on registers
    • 61. 6502
    • 62. 6502• Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD
    • 63. 6502• Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD• 8 bit processor w/ 16 bit address bus
    • 64. 6502• Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD• 8 bit processor w/ 16 bit address bus• 1-2MHz clock speed
    • 65. 6502• Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD• 8 bit processor w/ 16 bit address bus• 1-2MHz clock speed• http://www.6502.org/documents/datasheets/ rockwell/
    • 66. // Customised 6502 CPUNes.Cpu = function() { this.registers = { // Program Counter (16bit) pc: null, // Stack Pointer (8bit) sp: null, // Accumulator (8bit) a: null, // Index X (8bit) x: null, // Index Y (8bit) y: null, // Processor Status, p: null }; // ... this.reset();};
    • 67. Memory
    • 68. Memory• Contiguous block of data
    • 69. Memory• Contiguous block of data• ROM (readable)/RAM (readable/writable)
    • 70. NES Memory
    • 71. NES Memory• 2KiB onboard
    • 72. NES Memory• 2KiB onboard• Internally stored zero-page, stack, general purpose memory
    • 73. NES Memory• 2KiB onboard• Internally stored zero-page, stack, general purpose memory• Addressable up to 0x10000
    • 74. NES Memory• 2KiB onboard• Internally stored zero-page, stack, general purpose memory• Addressable up to 0x10000• Program ROM contain opcodes, graphics and sound
    • 75. Typed Arrays
    • 76. Typed Arrays• TypedArrays help performance critical applications such as emulators
    • 77. Typed Arrays• TypedArrays help performance critical applications such as emulators• Makes it trivial to reach any specified offset
    • 78. Typed Arrays• TypedArrays help performance critical applications such as emulators• Makes it trivial to reach any specified offset• http://www.khronos.org/registry/ typedarray/specs/latest/
    • 79. Nes.Cpu = function() { // ... // Our device has 2KiB of RAM. var memoryBuffer = new ArrayBuffer(0x800); // 6502 is a 8 bit processor, able // to address 8 bits at once. this.memory = new Uint8Array(memory); // ...};
    • 80. Need Getters/SettersMemory is mapped everywhere, so you need todelegate reads and writes to different areas.
    • 81. Fetch/Decode Loop
    • 82. Fetch/Decode Loop• Check for interrupts
    • 83. Fetch/Decode Loop• Check for interrupts• Read memory at PC
    • 84. Fetch/Decode Loop• Check for interrupts• Read memory at PC• Decode addressing mode
    • 85. Fetch/Decode Loop• Check for interrupts• Read memory at PC• Decode addressing mode• Process opcode
    • 86. Interrupts
    • 87. Interrupts• Special signal that interrupts normal execution
    • 88. Interrupts• Special signal that interrupts normal execution• Loads special address into PC and executes it
    • 89. Nes.Cpu = function() { // ... // Interrupt Types. this.interruptTypes = { NMI: 0 // ... }; // Current Interrupt. this.interrupt = null; // ...};Nes.Cpu.prototype.emulateCycle = function() { if (this.interrupt != null) { switch (this.interrupt) { // Non-Maskable case this.interruptTypes.NMI: this.handleNmi(); break; // ... } } // ...};
    • 90. SlowNes.Cpu.prototype.emulateCycle = function() { this.interrupt != null && this["handle" + (["nmi", "irq", "reset"] .filter(function(type, index) { return index == this.interrupt; })[0]) ](); // ...};
    • 91. Handling Opcodes
    • 92. Handling Opcodes• Read location in PC from memory
    • 93. Handling Opcodes• Read location in PC from memory• Lookup opcode
    • 94. Handling Opcodes• Read location in PC from memory• Lookup opcode• Find addressing mode
    • 95. Handling Opcodes• Read location in PC from memory• Lookup opcode• Find addressing mode• Process opcode
    • 96. Handling Opcodes• Read location in PC from memory• Lookup opcode• Find addressing mode• Process opcode• Increment PC
    • 97. Cpu.prototype.emulateCycle = function() { // ... // Get opcode at PC. var opcode = this.getOpcode(this.loadMemory(this.pc)); var address; // Get final address via addressing mode of opcode. switch (opcode.addressingMode) { // Zero Page // Uses a single operand which address // memory in zero page (0x0000-0x00FF). case this.addressingModes.ZERO_PAGE: address = this.loadMemory(this.pc + 1); break; } this.pc += opcode.bytes; // ...};
    • 98. Process All The Opcodes
    • 99. Process All The Opcodes• Read technical paper twice, implement once
    • 100. Process All The Opcodes• Read technical paper twice, implement once• Debugging is hard, so get it right
    • 101. Process All The Opcodes• Read technical paper twice, implement once• Debugging is hard, so get it right• When you don’t get it right, try again
    • 102. Nes.Cpu.prototype.emulateCycle = function() { // ... switch (opcode.type) { // JMP // Jump to location. case this.operands.JMP: this.pc = address; break; } // ...};
    • 103. PPU
    • 104. PPU• Generates video signals from memory
    • 105. PPU• Generates video signals from memory• Handles sprites, scrolling, colours
    • 106. RP2C02RP2C07
    • 107. RP2C02 RP2C07• Different chip for NTSC/PAL
    • 108. RP2C02 RP2C07• Different chip for NTSC/PAL• 2KiB RAM
    • 109. RP2C02 RP2C07• Different chip for NTSC/PAL• 2KiB RAM• 8x8 or 8x16 sprites
    • 110. RP2C02 RP2C07• Different chip for NTSC/PAL• 2KiB RAM• 8x8 or 8x16 sprites• Resolution of 256x240
    • 111. Communicating with your PPU
    • 112. Communicating with your PPU• 0x2000-0x2007 on CPU memory map to PPU’s registers
    • 113. Communicating with your PPU• 0x2000-0x2007 on CPU memory map to PPU’s registers• 8x8 or 8x16 pixel tiles, accessed on program ROM
    • 114. Colour Palette• 52 colours available• 2 palettes, 16b each, image and sprite• Can use 25 colours at once on screen
    • 115. TileS
    • 116. TileS• Each 8x8 tile occupies 16b
    • 117. TileS• Each 8x8 tile occupies 16b• Position of bit denotes position of pixel
    • 118. TileS• Each 8x8 tile occupies 16b• Position of bit denotes position of pixel• First 8 bits combine with second 8 bits
    • 119. TileS• Each 8x8 tile occupies 16b• Position of bit denotes position of pixel• First 8 bits combine with second 8 bits• Combine bits to get colour index
    • 120. Anatomy of a tile 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 0 0 1 1 1 0 1 0 1 1 1 1 1 0 1 1 0 1 1 1 1 0 1 1 1 0 1 1 0 0 1 0 0 1 1 1 1 1 1 1 1 1 1
    • 121. Anatomy of a tile 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 0 0 1 1 1 0 1 0 1 1 1 1 1 0 1 1 0 1 1 1 1 0 1 1 1 0 1 1 0 0 1 0 0 1 1 1 1 1 1 1 1 1 1 (simplified)
    • 122. Nametables
    • 123. Nametables• Bytes which index pattern table
    • 124. Nametables• Bytes which index pattern table• 32 horizontal and 30 vertical tiles, 960 tiles
    • 125. Nametables• Bytes which index pattern table• 32 horizontal and 30 vertical tiles, 960 tiles• 1KiB long, delta contains extra colour information
    • 126. Nothing is wasted
    • 127. Nothing is wasted• Remaining 64b stores extra colour information (attribute bytes)
    • 128. Nothing is wasted• Remaining 64b stores extra colour information (attribute bytes)• Attribute bytes map to 16 tiled blocks of nametable (64 32x32 pixel tiles)
    • 129. Nothing is wasted• Remaining 64b stores extra colour information (attribute bytes)• Attribute bytes map to 16 tiled blocks of nametable (64 32x32 pixel tiles)• Each of these blocks is sub-blocked into 4 tiles (4 16x16 pixel tiles)
    • 130. Nothing is wasted• Remaining 64b stores extra colour information (attribute bytes)• Attribute bytes map to 16 tiled blocks of nametable (64 32x32 pixel tiles)• Each of these blocks is sub-blocked into 4 tiles (4 16x16 pixel tiles)• Sub blocks affected by 2 bits from attribute bytes
    • 131. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1960. 1 1 0 0 0 0 1 1============================= 1110 1100 0011 ...=============================
    • 132. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1960. 1 1 0 0 0 0 1 1============================= 1110 1100 0011 ...=============================
    • 133. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1960. 1 1 0 0 0 0 1 1============================= 1110 1100 0011 ...=============================
    • 134. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1960. 1 1 0 0 0 0 1 1============================= 1110 1100 0011 ...=============================
    • 135. // Byte at offset 0.var a = 0xB3;// Byte at offset 8.var b = 0x29;// Byte at offset 960.var c = 0xC3;var merged = (a & 0x80) >> 0x6;merged |= b >> 0x7;merged |= (c & 0x3) << 0x2;
    • 136. Scratching the surface
    • 137. Scratching the surface• There is a whole lot more going on
    • 138. Scratching the surface• There is a whole lot more going on• http://wiki.nesdev.com/w/index.php/PPU
    • 139. Full Screen API
    • 140. Full Screen API• Look ma, no chrome
    • 141. Full Screen API• Look ma, no chrome• Still want Chrome for performance
    • 142. Full Screen API• Look ma, no chrome• Still want Chrome for performance• https://developer.mozilla.org/en-US/docs/ DOM/Using_fullscreen_mode
    • 143. var goFullScreen = (function() { // Polyfills for cross browser support. return function(element, callback) { typeof callback != "function" && (callback = function() {}); var requestFullScreen = getFullScreenMethod(element); if (requestFullScreen) { requestFullScreen = requestFullScreen.call(element); } else { return false; } document.addEventListener(fullScreenEvent, function() { callback.call(this, getFullScreenElement()); }); };})();
    • 144. Demo Time
    • 145. Sound
    • 146. Sound• Vibration of air
    • 147. Sound• Vibration of air• Represented as waves w/ freq. and amplitude
    • 148. Sound• Vibration of air• Represented as waves w/ freq. and amplitude• Frequency is number of phase changes per second
    • 149. Sound• Vibration of air• Represented as waves w/ freq. and amplitude• Frequency is number of phase changes per second• Amplitude is volume of the wave measured in dB
    • 150. NES Sound
    • 151. NES Sound• 5 sound channels
    • 152. NES Sound• 5 sound channels• 2 pulse wave channels of variable duty cycle
    • 153. NES Sound• 5 sound channels• 2 pulse wave channels of variable duty cycle• 16 volume levels
    • 154. NES Sound• 5 sound channels• 2 pulse wave channels of variable duty cycle• 16 volume levels• Pitch bending
    • 155. APU
    • 156. APU• APU registers mapped to CPU memory starting at 0x4000
    • 157. APU• APU registers mapped to CPU memory starting at 0x4000• 2 pulse-wave channels, 1 triangle-wave channel, 1 random-wave channel and 1 digital channel
    • 158. PULSE Wave0x4000. 1011 11110x4002. 0001 01110x4003. 0000 0001
    • 159. PULSE Wave0x4000. 1011 1111 Volume0x4002. 0001 01110x4003. 0000 0001
    • 160. PULSE Wave0x4000. 1011 1111 Volume Low order bits0x4002. 0001 0111 of raw period0x4003. 0000 0001
    • 161. PULSE Wave0x4000. 1011 1111 Volume Low order bits0x4002. 0001 0111 of raw period High order bits0x4003. 0000 0001 of raw period
    • 162. PULSE Wave0x4000. 1011 1111 Volume Low order bits0x4002. 0001 0111 of raw periodround(111860.8 / 0x117) - 1) = 400hz High order bits0x4003. 0000 0001 of raw period
    • 163. Demo Time
    • 164. Web Audio API
    • 165. Web Audio API• Based on Audio Routes
    • 166. Web Audio API• Based on Audio Routes• Connect nodes to each other
    • 167. Web Audio API• Based on Audio Routes• Connect nodes to each other• Perfect for emulator sound
    • 168. var gainNode = ctx.createGainNode();gainNode.gain.value = volume;var osc = ctx.createOscillator();osc.connect(gainNode);osc.type = type;osc.frequency.value = frequency;gainNode.connect(ctx.destination);osc.noteOn(0);setTimeout(function () { osc.noteOff(0);}, duration);
    • 169. Demo Time
    • 170. Sounds good
    • 171. Sounds good• Again, scratching the surface
    • 172. Sounds good• Again, scratching the surface• Sound information is rarer to find
    • 173. Sounds good• Again, scratching the surface• Sound information is rarer to find• http://wiki.nesdev.com/w/index.php/APU
    • 174. Controller
    • 175. Controller• Two controllers, mapped to CPU memory at 0x4016 and 0x4017
    • 176. Controller• Two controllers, mapped to CPU memory at 0x4016 and 0x4017• When written to, controller’s state is stored in sequential 8 bytes, as low order bit
    • 177. Gamepad API
    • 178. Gamepad API• Firefox has an event based system
    • 179. Gamepad API• Firefox has an event based system• WebKit requires polling
    • 180. // Support gamepads in WebKit.var GamePad = function(callback) { if (typeof callback != "function") { throw Error("Callback must implement [[call]]."); } this.callback = callback; this.running = false;};GamePad.prototype.start = function() { this.running = true; this.tick();};GamePad.prototype.stop = function() { this.running = false;};GamePad.prototype.tick = function() { if ( ! this.running) { return; } this.callback(navigator.webkitGetGamepads()); webkitRequestAnimationFrame(this.tick.bind(this));};
    • 181. Demo Time
    • 182. Cycles
    • 183. Cycles• Components IRL run in parallel
    • 184. Cycles• Components IRL run in parallel• Count cycles, use to sync other components
    • 185. Cycles• Components IRL run in parallel• Count cycles, use to sync other components• Try using Web Workers
    • 186. Your very own emulator
    • 187. Your very own emulator• Spend a lot of time researching
    • 188. Your very own emulator• Spend a lot of time researching• Start programming your own programs
    • 189. Your very own emulator• Spend a lot of time researching• Start programming your own programs• http://skilldrick.github.com/easy6502/
    • 190. Your very own emulator• Spend a lot of time researching• Start programming your own programs• http://skilldrick.github.com/easy6502/• http://www.6502.org/books
    • 191. Getting Started
    • 192. Getting Started C8IYF
    • 193. Getting Started C8IYF (Chip-8 Is Your Friend)
    • 194. Tips
    • 195. Tips• JavaScript as you would C
    • 196. Tips• JavaScript as you would C• Optimise passing around data
    • 197. Tips• JavaScript as you would C• Optimise passing around data• Know about V8 optimisations
    • 198. Tips• JavaScript as you would C• Optimise passing around data• Know about V8 optimisations• Write your own programs
    • 199. Possibilities
    • 200. Possibilities• Multiplayer via WebSockets
    • 201. Possibilities• Multiplayer via WebSockets• Vibration API for force feedback
    • 202. Possibilities• Multiplayer via WebSockets• Vibration API for force feedback• File API and application cache for portable offline emulators
    • 203. Possibilities• Multiplayer via WebSockets• Vibration API for force feedback• File API and application cache for portable offline emulators• localStorage for battery backed saved state
    • 204. Thank You
    • 205. Thank YouQuestions

    ×