{"id":188,"date":"2024-01-25T03:19:51","date_gmt":"2024-01-25T03:19:51","guid":{"rendered":"https:\/\/thorshov.net\/?p=188"},"modified":"2024-01-25T03:45:17","modified_gmt":"2024-01-25T03:45:17","slug":"chimptest","status":"publish","type":"post","link":"https:\/\/thorshov.net\/index.php\/2024\/01\/25\/chimptest\/","title":{"rendered":"Chimptest"},"content":{"rendered":"\n<p>I recently came accross an<a rel=\"noreferrer noopener\" href=\"https:\/\/www.instagram.com\/p\/CfeOU1MjX52\/\" data-type=\"URL\" data-id=\"https:\/\/www.instagram.com\/p\/CfeOU1MjX52\/\" target=\"_blank\"> instagram post<\/a> about a chimpanzee who was completing a research task at the Kyoto University.  I wondered if I could perform aswell as the chimp.  I have recreated the scale and timing of the game for this post below.  Hit the reset button, quickly memorize the number pattern and then click the white squares in order from 1-10.  Good Luck!<\/p>\n\n\n\n<script>\n        var gameWidth;\n        var gameHeight;\n        var gameOffset = 20;\n        var gameContext;\n        var gameCanvas;\n        var gameScore;\n        var numbers;\n        var guessIndex;\n\n        window.onload = function () {\n            newGame();\n        }\n\n        newGame = function () {\n            numbers = Array(40);\n            for (var i = 0; i < 40; i++) numbers[i] = i;\n            numbers.sort(() => Math.random() - 0.5)\n            score.innerHTML = \"&nbsp;\";\n            drawGame();\n            startGame();\n        }\n\n        startGame = function () {\n            guessIndex = 0;\n            window.setTimeout(hideGame, 2000);\n            \n        }\n\n        hideGame = function () {\n            for (var i = 0; i < guessIndex; i++)\n                hideNumber(numbers[i], '#112211');\n            for (var i = guessIndex; i < 9; i++)\n                hideNumber(numbers[i],  '#eeeeee');\n        }\n\n\n        window.onresize = function () {\n            drawGame();\n        }\n\n        clicked = function (e) {\n            var rect = gameCanvas.getBoundingClientRect();\n            var x = Math.floor(8 * (e.clientX - rect.x - gameOffset) \/ gameWidth);\n            var y = Math.floor(5 * (e.clientY - rect.y - gameOffset) \/ gameHeight);\n            var index = y * 8 + x;\n            \n            if (numbers[guessIndex] == index) {\n                score.innerHTML = score.innerText + '&nbsp;&#10084;'\n                guessIndex++;\n            }\n            else if(validGuess(index))\n                score.innerHTML = score.innerHTML + '&nbsp;&#9760;';\n            hideGame();\n        }\n\n        validGuess= function(index){\n            var retval = false;\n            for (var i = guessIndex; i < 9; i++)\n              retval = retval | (numbers[i] == index);\n            return retval;\n        }\n\n        drawGame = function () {\n            var wrapper = document.getElementById(\"canvasWrapper\")\n            gameScore = document.getElementById(\"score\");\n            gameCanvas = document.getElementById(\"myCanvas\");\n            gameCanvas.addEventListener('click', clicked);\n            \n            gameWidth = wrapper.clientWidth - 2 * gameOffset;\n            gameHeight = Math.floor(5 * gameWidth \/ 8);\n            gameCanvas.width = gameWidth + 2 * gameOffset;\n            gameCanvas.height = gameHeight + 2 * gameOffset;\n\n            gameContext = gameCanvas.getContext(\"2d\");\n            gameContext.beginPath();\n            gameContext.rect(gameOffset, gameOffset, gameWidth, gameHeight);\n            gameContext.stroke();\n\n            for (var i = 0; i < 9; i++)\n                drawNumber(numbers[i], i + 1);\n        }\n\n        drawNumber = function (number, text) {\n            drawText(number % 8, Math.floor(number \/ 8), text);\n        }\n\n        hideNumber = function (number, color) {\n            saveStyle = gameContext.fillStyle;\n            gameContext.fillStyle = color;\n            x = number % 8;\n            y = Math.floor(number \/ 8);\n            size = Math.floor(gameHeight \/ 5);\n            gameContext.fillRect(gameOffset + x * size + 5, gameOffset + y * size + 5, size - 10, size - 10);\n            gameContext.fillStyle = saveStyle;\n        }\n\n        drawText = function (x, y, text) {\n            var size = Math.floor(gameHeight \/ 5);\n            gameContext.font = 'bold ' + gameWidth \/ 9 + 'px Arial';\n            gameContext.textAlign = \"center\";\n            gameContext.textBaseline = \"middle\";\n            gameContext.fillStyle = \"#eeeeee\";\n            gameContext.fillText(text, gameOffset + 5 + x * size + size \/ 2, gameOffset + 5 + y * size + size \/ 2);\n        }\n    <\/script>\n    <div id=\"canvasWrapper\">\n        <canvas style=\"background: #112211;\" id=\"myCanvas\"><\/canvas>\n        <button type=\"button\" onclick=\"newGame()\">Reset<\/button><br><span style=\"font-size:small\" id=\"score\"><\/span>\n    <\/div>\n\n\n\n<p>Below is the html and javascript used to program this game.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n    var gameWidth;\n    var gameHeight;\n    var gameOffset = 20;\n    var gameContext;\n    var gameCanvas;\n    var gameScore;\n    var numbers;\n    var guessIndex;\n\n    window.onload = function () {\n        newGame();\n    }\n\n    newGame = function () {\n        numbers = Array(40);\n        for (var i = 0; i &lt; 40; i++) numbers[i] = i;\n        numbers.sort(() =&gt; Math.random() - 0.5)\n        score.innerHTML = \"&amp;nbsp;\";\n        drawGame();\n        startGame();\n    }\n\n    startGame = function () {\n        guessIndex = 0;\n        window.setTimeout(hideGame, 2000);\n\n    }\n\n    hideGame = function () {\n        for (var i = 0; i &lt; guessIndex; i++)\n            hideNumber(numbers[i], '#112211');\n        for (var i = guessIndex; i &lt; 9; i++)\n            hideNumber(numbers[i], '#eeeeee');\n    }\n\n\n    window.onresize = function () {\n        drawGame();\n    }\n\n    clicked = function (e) {\n        var rect = gameCanvas.getBoundingClientRect();\n        var x = Math.floor(8 * (e.clientX - rect.x - gameOffset) \/ gameWidth);\n        var y = Math.floor(5 * (e.clientY - rect.y - gameOffset) \/ gameHeight);\n        var index = y * 8 + x;\n\n        if (numbers[guessIndex] == index) {\n            score.innerHTML = score.innerText + '&amp;nbsp;&amp;#10084;'\n            guessIndex++;\n        }\n        else if (validGuess(index))\n            score.innerHTML = score.innerHTML + '&amp;nbsp;&amp;#9760;';\n        hideGame();\n    }\n\n    validGuess = function (index) {\n        var retval = false;\n        for (var i = guessIndex; i &lt; 9; i++)\n            retval = retval | (numbers[i] == index);\n        return retval;\n    }\n\n    drawGame = function () {\n        var wrapper = document.getElementById(\"canvasWrapper\")\n        gameScore = document.getElementById(\"score\");\n        gameCanvas = document.getElementById(\"myCanvas\");\n        gameCanvas.addEventListener('click', clicked);\n\n        gameWidth = wrapper.clientWidth - 2 * gameOffset;\n        gameHeight = Math.floor(5 * gameWidth \/ 8);\n        gameCanvas.width = gameWidth + 2 * gameOffset;\n        gameCanvas.height = gameHeight + 2 * gameOffset;\n\n        gameContext = gameCanvas.getContext(\"2d\");\n        gameContext.beginPath();\n        gameContext.rect(gameOffset, gameOffset, gameWidth, gameHeight);\n        gameContext.stroke();\n\n        for (var i = 0; i &lt; 9; i++)\n            drawNumber(numbers[i], i + 1);\n    }\n\n    drawNumber = function (number, text) {\n        drawText(number % 8, Math.floor(number \/ 8), text);\n    }\n\n    hideNumber = function (number, color) {\n        saveStyle = gameContext.fillStyle;\n        gameContext.fillStyle = color;\n        x = number % 8;\n        y = Math.floor(number \/ 8);\n        size = Math.floor(gameHeight \/ 5);\n        gameContext.fillRect(gameOffset + x * size + 5, gameOffset + y * size + 5, size - 10, size - 10);\n        gameContext.fillStyle = saveStyle;\n    }\n\n    drawText = function (x, y, text) {\n        var size = Math.floor(gameHeight \/ 5);\n        gameContext.font = 'bold ' + gameWidth \/ 9 + 'px Arial';\n        gameContext.textAlign = \"center\";\n        gameContext.textBaseline = \"middle\";\n        gameContext.fillStyle = \"#eeeeee\";\n        gameContext.fillText(text, gameOffset + 5 + x * size + size \/ 2, gameOffset + 5 + y * size + size \/ 2);\n    }\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div id=\"canvasWrapper\"&gt;\n    &lt;canvas style=\"background: #112211;\" id=\"myCanvas\"&gt;&lt;\/canvas&gt;\n    &lt;button type=\"button\" onclick=\"newGame()\"&gt;Reset&lt;\/button&gt;&lt;br \/&gt;\n    &lt;span style=\"font-size: small\" id=\"score\"&gt;&lt;\/span&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I recently came accross an instagram post about a chimpanzee who was completing a research task at the Kyoto University. I wondered if I could perform aswell as the chimp. I have recreated the scale and timing of the game for this post below. Hit the reset button, quickly memorize the number pattern and then &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/thorshov.net\/index.php\/2024\/01\/25\/chimptest\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Chimptest&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,5],"tags":[],"_links":{"self":[{"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/posts\/188"}],"collection":[{"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/comments?post=188"}],"version-history":[{"count":7,"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/posts\/188\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/posts\/188\/revisions\/196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/media\/192"}],"wp:attachment":[{"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/media?parent=188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/categories?post=188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thorshov.net\/index.php\/wp-json\/wp\/v2\/tags?post=188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}