My talk for JS Conf Down Under 2012

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 an
emulator?

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

51. Nintendo Entertainment System

52. Nintendo Entertainment System
• Custom 6502 CPU

53. Nintendo Entertainment System
• Custom 6502 CPU
• 2KiB onboard RAM, 2KiB video RAM, 256B
OAM RAM, 28B palette RAM

54. Nintendo Entertainment System
• Custom 6502 CPU
• 2KiB onboard RAM, 2KiB video RAM, 256B
OAM RAM, 28B palette RAM
• Custom-made PPU

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

56. 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

57. Von-Neumann
Architecture
CPU Memory
Bus
Peripherals

58. CPU

59. CPU
• Basically a loop

60. CPU
• Basically a loop
• Read operation codes (opcodes) from
memory, processes them

61. CPU
• Basically a loop
• Read operation codes (opcodes) from
memory, processes them
• Opcodes mostly operate on registers

62. 6502

63. 6502
• Ricoh 2A03/2A07, customised 6502 w/ audio w/
gamepad w/o BCD

64. 6502
• Ricoh 2A03/2A07, customised 6502 w/ audio w/
gamepad w/o BCD
• 8 bit processor w/ 16 bit address bus

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

66. 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/

67. // Customised 6502 CPU
Nes.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();
};

68. Memory

69. Memory
• Contiguous block of data

70. Memory
• Contiguous block of data
• ROM (readable)/RAM (readable/writable)

71. NES Memory

72. NES Memory
• 2KiB onboard

73. NES Memory
• 2KiB onboard
• Internally stored zero-page, stack, general
purpose memory

74. NES Memory
• 2KiB onboard
• Internally stored zero-page, stack, general
purpose memory
• Addressable up to 0x10000

75. NES Memory
• 2KiB onboard
• Internally stored zero-page, stack, general
purpose memory
• Addressable up to 0x10000
• Program ROM contain opcodes, graphics
and sound

76. Typed Arrays

77. Typed Arrays
• TypedArrays help performance critical
applications such as emulators

78. Typed Arrays
• TypedArrays help performance critical
applications such as emulators
• Makes it trivial to reach any specified offset

79. 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/

80. 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);
// ...
};

81. Need Getters/Setters
Memory is mapped everywhere, so you need to
delegate reads and writes to different areas.

82. Fetch/Decode Loop

83. Fetch/Decode Loop
• Check for interrupts

84. Fetch/Decode Loop
• Check for interrupts
• Read memory at PC

85. Fetch/Decode Loop
• Check for interrupts
• Read memory at PC
• Decode addressing mode

86. Fetch/Decode Loop
• Check for interrupts
• Read memory at PC
• Decode addressing mode
• Process opcode

87. Interrupts

88. Interrupts
• Special signal that interrupts normal
execution

89. Interrupts
• Special signal that interrupts normal
execution
• Loads special address into PC and executes
it

90. 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;
// ...
}
}
// ...
};

91. Slow
Nes.Cpu.prototype.emulateCycle = function() {
this.interrupt != null &&
this["handle" +
(["nmi", "irq", "reset"]
.filter(function(type, index) {
return index == this.interrupt;
})[0])
]();
// ...
};

92. Handling Opcodes

93. Handling Opcodes
• Read location in PC from memory

94. Handling Opcodes
• Read location in PC from memory
• Lookup opcode

95. Handling Opcodes
• Read location in PC from memory
• Lookup opcode
• Find addressing mode

96. Handling Opcodes
• Read location in PC from memory
• Lookup opcode
• Find addressing mode
• Process opcode

97. Handling Opcodes
• Read location in PC from memory
• Lookup opcode
• Find addressing mode
• Process opcode
• Increment PC

98. 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;
// ...
};

99. Process All The Opcodes

100. Process All The Opcodes
• Read technical paper twice, implement
once

101. Process All The Opcodes
• Read technical paper twice, implement
once
• Debugging is hard, so get it right

102. 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

103. Nes.Cpu.prototype.emulateCycle = function() {
// ...
switch (opcode.type) {
// JMP
// Jump to location.
case this.operands.JMP:
this.pc = address;
break;
}
// ...
};

104. PPU

105. PPU
• Generates video signals from memory

106. PPU
• Generates video signals from memory
• Handles sprites, scrolling, colours

107. RP2C02
RP2C07

108. RP2C02
RP2C07
• Different chip for NTSC/PAL

109. RP2C02
RP2C07
• Different chip for NTSC/PAL
• 2KiB RAM

110. RP2C02
RP2C07
• Different chip for NTSC/PAL
• 2KiB RAM
• 8x8 or 8x16 sprites

111. RP2C02
RP2C07
• Different chip for NTSC/PAL
• 2KiB RAM
• 8x8 or 8x16 sprites
• Resolution of 256x240

112. Communicating with your PPU

113. Communicating with your PPU
• 0x2000-0x2007 on CPU memory map to
PPU’s registers

114. Communicating with your PPU
• 0x2000-0x2007 on CPU memory map to
PPU’s registers
• 8x8 or 8x16 pixel tiles, accessed on
program ROM

115. Colour Palette
• 52 colours available
• 2 palettes, 16b each, image and sprite
• Can use 25 colours at once on screen

116. TileS

117. TileS
• Each 8x8 tile occupies 16b

118. TileS
• Each 8x8 tile occupies 16b
• Position of bit denotes position of pixel

119. TileS
• Each 8x8 tile occupies 16b
• Position of bit denotes position of pixel
• First 8 bits combine with second 8 bits

120. 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

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

122. 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)

123. Nametables

124. Nametables
• Bytes which index pattern table

125. Nametables
• Bytes which index pattern table
• 32 horizontal and 30 vertical tiles, 960 tiles

126. Nametables
• Bytes which index pattern table
• 32 horizontal and 30 vertical tiles, 960 tiles
• 1KiB long, delta contains extra colour
information

127. Nothing is wasted

128. Nothing is wasted
• Remaining 64b stores extra colour
information (attribute bytes)

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)

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)

131. 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

132. Put it all together
0. 1 0 1 1 0 0 1 1
8. 0 0 1 0 1 0 0 1
960. 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 1
960. 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 1
960. 1 1 0 0 0 0 1 1
=============================
1110 1100 0011 ...
=============================

135. Put it all together
0. 1 0 1 1 0 0 1 1
8. 0 0 1 0 1 0 0 1
960. 1 1 0 0 0 0 1 1
=============================
1110 1100 0011 ...
=============================

136. // 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;

137. Scratching the surface

138. Scratching the surface
• There is a whole lot more going on

139. Scratching the surface
• There is a whole lot more going on
• http://wiki.nesdev.com/w/index.php/PPU

141. Full Screen API

142. Full Screen API
• Look ma, no chrome

143. Full Screen API
• Look ma, no chrome
• Still want Chrome for performance

144. Full Screen API
• Look ma, no chrome
• Still want Chrome for performance
• https://developer.mozilla.org/en-US/docs/
DOM/Using_fullscreen_mode

145. 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());
});
};
})();

146. Demo Time

147. Sound

148. Sound
• Vibration of air

149. Sound
• Vibration of air
• Represented as waves w/ freq. and
amplitude

150. Sound
• Vibration of air
• Represented as waves w/ freq. and
amplitude
• Frequency is number of phase changes per
second

151. 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

152. NES Sound

153. NES Sound
• 5 sound channels

154. NES Sound
• 5 sound channels
• 2 pulse wave channels of variable duty cycle

155. NES Sound
• 5 sound channels
• 2 pulse wave channels of variable duty cycle
• 16 volume levels

156. NES Sound
• 5 sound channels
• 2 pulse wave channels of variable duty cycle
• 16 volume levels
• Pitch bending

159. APU

160. APU
• APU registers mapped to CPU memory
starting at 0x4000

161. 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

162. PULSE Wave
0x4000. 1011 1111
0x4002. 0001 0111
0x4003. 0000 0001

163. PULSE Wave
0x4000. 1011 1111 Volume
0x4002. 0001 0111
0x4003. 0000 0001

164. PULSE Wave
0x4000. 1011 1111 Volume
Low order bits
0x4002. 0001 0111 of raw period
0x4003. 0000 0001

165. PULSE Wave
0x4000. 1011 1111 Volume
Low order bits
0x4002. 0001 0111 of raw period
High order bits
0x4003. 0000 0001 of raw period

166. PULSE Wave
0x4000. 1011 1111 Volume
Low order bits
0x4002. 0001 0111 of raw period
round(111860.8 / 0x117) - 1) = 400hz
High order bits
0x4003. 0000 0001 of raw period

167. Demo Time

168. Web Audio API

169. Web Audio API
• Based on Audio Routes

170. Web Audio API
• Based on Audio Routes
• Connect nodes to each other

171. Web Audio API
• Based on Audio Routes
• Connect nodes to each other
• Perfect for emulator sound

172. 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);

173. Demo Time

174. Sounds good

175. Sounds good
• Again, scratching the surface

176. Sounds good
• Again, scratching the surface
• Sound information is rarer to find

177. Sounds good
• Again, scratching the surface
• Sound information is rarer to find
• http://wiki.nesdev.com/w/index.php/APU

178. Controller

179. Controller
• Two controllers, mapped to CPU memory
at 0x4016 and 0x4017

180. 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

181. Gamepad API

182. Gamepad API
• Firefox has an event based system

183. Gamepad API
• Firefox has an event based system
• WebKit requires polling

184. // 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));
};

185. Demo Time

186. Cycles

187. Cycles
• Components IRL run in parallel

188. Cycles
• Components IRL run in parallel
• Count cycles, use to sync other
components

189. Cycles
• Components IRL run in parallel
• Count cycles, use to sync other
components
• Try using Web Workers

190. Your very own emulator

191. Your very own emulator
• Spend a lot of time researching

192. Your very own emulator
• Spend a lot of time researching
• Start programming your own programs

193. Your very own emulator
• Spend a lot of time researching
• Start programming your own programs
• http://skilldrick.github.com/easy6502/

194. 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

195. Getting Started

196. Getting Started
C8IYF

197. Getting Started
C8IYF
(Chip-8 Is Your Friend)

198. Tips

199. Tips
• JavaScript as you would C

200. Tips
• JavaScript as you would C
• Optimise passing around data

201. Tips
• JavaScript as you would C
• Optimise passing around data
• Know about V8 optimisations

202. Tips
• JavaScript as you would C
• Optimise passing around data
• Know about V8 optimisations
• Write your own programs

203. Possibilities

204. Possibilities
• Multiplayer via WebSockets

205. Possibilities
• Multiplayer via WebSockets
• Vibration API for force feedback

206. Possibilities
• Multiplayer via WebSockets
• Vibration API for force feedback
• File API and application cache for portable
offline emulators

207. Possibilities
• Multiplayer via WebSockets
• Vibration API for force feedback
• File API and application cache for portable
offline emulators
• localStorage for battery backed saved state

208. Thank You

209. Thank You
Questions