["tilescript",
["html", "<p>Here is a formula of multiplication of complex number.</p>\n\n<p style=\"\nfont-size: 2em;\nfont-family: 'Times New Roman';\nfont-style: italic;\n\">\n(a+bi)(c+di) = (ac-bd) + (bc+ad)i\n</p>\n"],
["html", "<p>Assume that arrays p, q represent complex numbers where</p>\n<ul>\n<li>p[0] is a real part and\n<li>p[1] is a imaginary part.\n</ul>\n<p>Let's define the multiplication operator as a function.\n</p>"],
["source", "mul = function(p, q) {\n  return [p[0] * q[0] - p[1] * q[1],\n          p[1] * q[0] + p[0] * q[1]]\n}"],
["html", "<p>Make sure how it works.</p>"],
["source", "mul([1, 0], [1, 0]) // 1 * 1"],
["source", "mul([0, 1], [0, 1]) // 1i * 1i"],
["source", "mul([1, 0], [0, 1]) // 1 * 1i"],
["html", "<p>A complex number can be shown as a point on the <b>complex plane.</b></p>"],
["html", "<canvas id=\"canvas\" width=\"400\" height=\"400\"></canvas>"],
["html", "<p>(1 + 0.5i) * (0.5 + 0.5i) = ?</p>"],
["tile", "{P=[1,0.5];Q=[0.5,0.5];R=mul(P,Q)}"],
["source", "canvas = $(\"canvas\");\noriginX = canvas.width / 2;\noriginY = canvas.height / 2;\nctx = canvas.getContext('2d');\n\ndraw = function() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  ctx.beginPath();\n  ctx.moveTo(0, originY);\n  ctx.lineTo(canvas.width, originY);\n  ctx.moveTo(originX, 0);\n  ctx.lineTo(originX, canvas.height);\n  ctx.stroke();\n\n  drawPoint(P, \"rgb(200,0,0)\"); // P is RED\n  drawPoint(Q, \"rgb(0,0,200)\"); // Q is BLUE\n  drawPoint(R, \"rgb(200,200,0)\"); // R is YELLOW\n \n  formula = P[0] + \"+\" + P[1] + \"i * \" +\n           Q[0] + \"+\" + Q[1] + \"i = \" +\n           R[0] + \"+\" + R[1] + \"i\";\n}\n\ndrawPoint = function(p, fillStyle) {\n  ctx.fillStyle = fillStyle;\n  var x = p[0] * canvas.width / 2 + originX;\n  var y = -p[1] * canvas.height / 2 + originY;\n  ctx.beginPath();\n  ctx.arc(x,y,10,0,Math.PI*2,true);\n  ctx.fill();\n}\n\ndraw();"],
["html", "<p>Add an event handler to play with complex numbers</p>"],
["source", "canvas.onmousemove = function (e) {\n  var x = e.pageX - this.offsetLeft;\n  var y = e.pageY - this.offsetTop;\n  P[0] = (x - originX) / canvas.width *2;\n  P[1] = -(y - originY) / canvas.height *2;\n  R = mul(P, Q);\n  draw();\n}\n"]
]