canvas = { // const w = width + 28, h = height; const w = 512 const h = 512 const context = DOM.context2d(w, h, 1); const image = context.getImageData(0, 0, w, h); const P = pixelSize const N = Math.floor(h/P) const M = Math.floor(w/P) var config = [] var previous_config = [] var config_by_2 = [] var config_by_4 = [] var config_by_8 = [] context.canvas.style.margin = "0 -14px"; context.canvas.style.imageRendering = "pixelated"; function drawRect(image, x,y,rw,rh,color) { const r = color & 0xff const g = color & 0xff00 const b = color & 0xff0000 // const a = color & 0xff000000 for (var dy = 0; dy < rh; dy++) { for (var dx = 0; dx < rw; dx++) { var ry = y + dy var rx = x + dx const i = ry * w + rx, j = i << 2; image.data[j + 0] = r image.data[j + 1] = g image.data[j + 2] = b image.data[j + 3] = 0xff } } } function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function initialConfig(config, previous_config) { for (var y = 0; y < N; y++) { for (var x = 0; x < M; x++) { const i = y * M + x config[i] = 2*getRandomInt(2)-1 previous_config[i] = config[i] } } return [config, previous_config] } function configColor(c) { return c > 0 ? 0xffffff : 0x000000 } function deltaColor(c) { return c > 0 ? 0xff0000 : (c == 0 ? 0x000000 : 0x0000ff) } function drawConfig(image, config, x, y, N, M) { for (var i = 0; i < N; i++) { for (var j = 0; j < M; j++) { drawRect(image, P*j, P*i, P, P, configColor(config[i*M + j])) } } context.putImageData(image, x, y); } function drawConfigDelta(image, config, previous_config, x, y, N, M) { for (var i = 0; i < N; i++) { for (var j = 0; j < M; j++) { drawRect(image, P*j, P*i, P, P, deltaColor(config[i*M + j] - previous_config[i*M + j])) } } context.putImageData(image, x, y); } function majorityRule(result, config, N, M) { var rx = 0 var ry = 0 for (var i = 0; i < N; i = i+2) { for (var j = 0; j < M; j = j+2) { const idx = i*M + j const v = config[idx] + config[idx+1] + config[idx + M] + config[idx + M + 1] result[Math.floor(M/2)*ry + rx] = v == 0 ? (2*getRandomInt(2)-1) : (v > 0 ? 1 : -1) rx += 1 } ry += 1 } return result } function deltaEnergy(config, a, b) { const idx = a*M + b const south = ((a+1) % N) * M + b const west = a*M + (b+1)%M const north = ((a-1) % N) * M + b const east = a*M + (b-1) % M const s = config[idx] const nb = config[south] + config[west] + config[north] + config[east] return 2*s*nb } // compute one monte carlo move function montecarloMove(config, beta) { for (var i = 0; i < N; i++) { for (var j = 0; j < M; j++) { const a = getRandomInt(N) const b = getRandomInt(M) const idx = a*M + b const s = config[idx] const cost = deltaEnergy(config, a, b) config[idx] = (cost < 0) ? -s : (Math.random() < Math.exp(-cost*beta) ? -s : s) } } return config } // create initial random configuration [config, previous_config] = initialConfig(config, previous_config) yield context.canvas for (var t = 0; t < T; t++) { for (var i = 0; i < N; i++) { for (var j = 0; j < M; j++) { previous_config[i * M + j] = config[i * M + j] } } config = montecarloMove(config,beta) // config_by_2 = majorityRule(config_by_2, config, N/2, M) //config_by_4 = majorityRule(config_by_4, config_by_2, N/4, M) //config_by_8 = majorityRule(config_by_8, config_by_4, N/8, M) // drawConfig(image, config, 0, 0, N, M) drawConfigDelta(image, config, previous_config, 0, 0, N, M) // drawConfig(image, config_by_2, 0, h/2, N/2, M) // drawConfig(image, config_by_4, 0, h/2 + h/4, N/4, M) // drawConfig(image, config_by_8, 0, h/2 + h/4 + h/8, N/8, M) yield context.canvas } }