{"id":34,"date":"2022-08-30T16:53:46","date_gmt":"2022-08-30T16:53:46","guid":{"rendered":"http:\/\/osbyte.net\/?p=34"},"modified":"2022-08-30T16:53:47","modified_gmt":"2022-08-30T16:53:47","slug":"javascript-first-steps","status":"publish","type":"post","link":"https:\/\/osbyte.net\/?p=34","title":{"rendered":"Javascript first steps"},"content":{"rendered":"\n<p>Two things occupying me at the moment. I&#8217;m mucking around with javascript and web development. I&#8217;m also digging through an archive of old BBC Micro software, including a ton of magazine cover disk images from back when that was a thing.<\/p>\n\n\n\n<p>There&#8217;s heaps of stuff that make little or no sense without the accompanying magazine. Control programs for hardware projects, or code fragments that are part of a larger tutorial or series. That kind of thing. The bits I enjoy are the tiny BASIC programs that render something cool. Take this one, for example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   10REM > &lt;BasicSave$dir>.KAM_ATRACT\r\n   20PRINT\"Strange Attractors 1\"\r\n   30PRINT\"The KAM attractor\"\r\n   40PRINT\"By Mike Cook\"\r\n   50PRINT\"A defines the Angle of the orbit in radians\"\r\n   60REPEAT\r\n   70INPUT\"Enter a value for A about (1.1 to 1.7) \",A\r\n   80MODE0\r\n   90PRINT TAB(0,0);\"The KAM attractor By Mike Cook\"\r\n  100sinA=SIN(A)\r\n  110cosA=COS(A)\r\n  120C%=0\r\n  130FOR orbit= 0.1 TO 2.5 STEP 0.05\r\n  140C%=C%+1\r\n  150REMGCOL 0,C%\r\n  160U=orbit\/3\r\n  170V=orbit\/3\r\n  180FOR B%= 1 TO 300\r\n  190IF ABS(U)>1E6 OR ABS(V)>1E6 THEN GOTO 240\r\n  200PLOT 69,(U*640)+640,(V*512)+512\r\n  210X=U*cosA-(V-U*U)*sinA\r\n  220Y=U*sinA+(V-U*U)*cosA\r\n  230U=X:V=Y\r\n  240NEXT\r\n  250NEXT\r\n  260PRINT TAB(0,0)\"This is A = \";A;SPC(18)\r\n  270PRINT TAB(0,31);\r\n  280UNTIL FALSE\r<\/code><\/pre>\n\n\n\n<p>I found this one on the April 1991 copy of Micro User. Simple looking thing, but then it goes and does this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"595\" height=\"484\" src=\"http:\/\/osbyte.net\/wp-content\/uploads\/2022\/08\/image.png\" alt=\"\" class=\"wp-image-49\" srcset=\"https:\/\/osbyte.net\/wp-content\/uploads\/2022\/08\/image.png 595w, https:\/\/osbyte.net\/wp-content\/uploads\/2022\/08\/image-300x244.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/figure>\n\n\n\n<p>Although it does take a few minutes to get there. I googled KAM attractor and ended up with a bunch of scary looking math papers, and a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Kolmogorov%E2%80%93Arnold%E2%80%93Moser_theorem\">wikipedia<\/a> entry. I&#8217;ve read the wikipedia entry a couple of times, but I must need another cup of tea because while most of the words appear to be in English, I&#8217;m none the wiser at the end of it than I was at the start.<\/p>\n\n\n\n<p>So I&#8217;ve got this cool little BASIC program, and I&#8217;m trying to figure out javascript, so the consequences were pretty much inevitable.<\/p>\n\n\n\n<script type=\"text\/javascript\">\n    function updateImage() {\n        drawTest(jQuery('#angle').val(), jQuery('#orbit').val(), jQuery('#iterations').val());\n    }\n\n    function drawTest(angle, orbitstep, iterations) {\n        var canvas = document.getElementById(\"drawSpace\");\n        var ctx = canvas.getContext(\"2d\");\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n        let hw = canvas.width \/ 2;\n        let hh = canvas.height \/ 2;\n\n        var id = ctx.createImageData(1, 1);\n        var d = id.data;\n        d[3] = 255;\n\n        let sinA = Math.sin(angle);\n        let cosA = Math.cos(angle);\n        let c1 = [Math.random() * 255, Math.random() * 255, Math.random() * 255];\n        let c2 = [Math.random() * 255, Math.random() * 255, Math.random() * 255];\n        let interp = 0;\n\n        for (orbit = 0.1; orbit < 2.5; orbit += +orbitstep) {\n            interp += 0.1;\n            if (interp > 1) {\n                interp = 0;\n                c1 = c2;\n                c2 = [Math.random() * 255, Math.random() * 255, Math.random() * 255];\n            }\n            d[0] = Math.floor(c1[0] + (c2[0] - c1[0]) * interp);\n            d[1] = Math.floor(c1[1] + (c2[1] - c1[1]) * interp);\n            d[2] = Math.floor(c1[2] + (c2[2] - c1[2]) * interp);\n\n            let u = orbit \/ 3;\n            let v = orbit \/ 3;\n            for (b = +iterations; b > 0; b--) {\n                if (Math.abs(u) > 1000000 || Math.abs(v) > 1000000) {\n                    break;\n                }\n                ctx.putImageData(id, (u * hw) + hw, (v * hh) + hh);\n                let x = u * cosA - (v - u * u) * sinA;\n                let y = u * sinA + (v - u * u) * cosA;\n                u = x;\n                v = y;\n            }\n        }\n    }\n\n    jQuery(document).ready(function() {\n        console.log('ready called');\n        \/\/document.getElementById('angle').addEventListener('change', function() {\n        \/\/    console.log('You selected: ' + this.value + ' orb ' + $('#orbit').val());\n        \/\/    drawTest(this.value, $('#orbit').val());\n        \/\/});\n        \/\/document.getElementById('orbit').addEventListener('change', function() {\n        \/\/    console.log('You selected: ', this.value);\n        \/\/    drawTest($('#angle').val(), this.value);\n        \/\/});\n        updateImage();\n    });\n\n<\/script>\n\n<div class=\"row\">\n  <div class=\"column-4\">\n    <label for=\"angle\">Angle<\/label>\n    <input type=\"number\" id=\"angle\" value=\"1.5\" min=\"0\" max=\"6.5\" step=\"0.04\" \/>\n  <\/div>\n  <div class=\"column-4\">\n    <label for=\"orbit\">Orbit Step<\/label>\n    <input type=\"number\" id=\"orbit\" value=\"0.02\" min=\"0.001\" max=\"1\" step=\"0.01\" \/>\n  <\/div>\n  <div class=\"column-4\">\n    <label for=\"iterations\">Orbit iterations<\/label>\n    <input type=\"number\" id=\"iterations\" value=\"500\" min=\"100\" max=\"10000\" step=\"10\" \/>\n  <\/div>\n  <div class=\"column-4\">\n    <button onclick=\"updateImage()\">Refresh<\/button>\n  <\/div>\n<\/div>\n<canvas id=\"drawSpace\" width=\"800\" height=\"800\"><\/canvas>\n","protected":false},"excerpt":{"rendered":"<p>Two things occupying me at the moment. I&#8217;m mucking around with javascript and web development. I&#8217;m also digging through an archive of old BBC Micro software, including a ton of magazine cover disk images from back when that was a thing. There&#8217;s heaps of stuff that make little or no sense without the accompanying magazine. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":49,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-34","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/osbyte.net\/index.php?rest_route=\/wp\/v2\/posts\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osbyte.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/osbyte.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/osbyte.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/osbyte.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=34"}],"version-history":[{"count":8,"href":"https:\/\/osbyte.net\/index.php?rest_route=\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/osbyte.net\/index.php?rest_route=\/wp\/v2\/posts\/34\/revisions\/50"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/osbyte.net\/index.php?rest_route=\/wp\/v2\/media\/49"}],"wp:attachment":[{"href":"https:\/\/osbyte.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/osbyte.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/osbyte.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}