{"id":5192,"date":"2023-01-25T19:00:34","date_gmt":"2023-01-25T19:00:34","guid":{"rendered":"https:\/\/www.celesteh.com\/blog\/?p=5192"},"modified":"2023-01-25T19:00:35","modified_gmt":"2023-01-25T19:00:35","slug":"graphic-notation-teaching-tool","status":"publish","type":"post","link":"https:\/\/www.celesteh.com\/blog\/2023\/01\/25\/graphic-notation-teaching-tool\/","title":{"rendered":"Graphic Notation Teaching Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This is designed for students with no experience of improvising.  The idea is to start with just having one note and dots. Then dots and flat lines. Then gradually adding more notes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s meant to fir the window width, so you may need to scroll sideways if you&#8217;re looking at this page with a sidebar.<\/p>\n\n\n\n<form id=\"formElem\">\n  <label for \"notes\">Notes:<\/label>\n  <input type=\"text\" name=\"notes\" id=\"notes\" value=\"C, G\">\n  \n  <label for \"dots\">Dots:<\/label>\n  <input type=\"checkbox\" id=\"dots\" name=\"dots\" value=\"1\" checked>\n  \n   <label for=\"lines\">Lines:<\/label>\n<select name=\"lines\" id=\"lines\">\n  <option value=\"0\">None<\/option>\n  <option value=\"1\">Flat<\/option>\n  <option value=\"2\">Sloped<\/option>\n<\/select> \n  <label for \"circles\">Circles:<\/label>\n  <input type=\"checkbox\" id=\"circles\" name=\"circles\" value=\"1\">\n\n  <input type=\"submit\">\n<\/form>\n<canvas height=\"310\" id=\"canvas_images\" style=\"border: 1px solid #d3d3d3;\" width=\"1280\">\n    Your browser does not support the HTML5 canvas tag.<\/canvas>\n\n<script>  \n  \n  function drawCircle(ctx, x, y, radius, fill, stroke, strokeWidth) {\n  \tctx.beginPath()\n  \tctx.arc(x, y, radius, 0, 2 * Math.PI, false)\n  \tif (fill) {\n    \tctx.fillStyle = fill\n    \tctx.fill()\n  \t}\n  \tif (stroke) {\n    \tctx.lineWidth = strokeWidth\n    \tctx.strokeStyle = stroke\n    \tctx.stroke()\n  \t}\n\t}\n\t\n\tfunction scoreCircle(ctx, x, y, radius, fill) {}\n  \n  function drawDot(ctx, x,y) {\n    var dots = document.getElementById(\"dots\").value;\n    \n    if (dots ==0) {\n      return false;\n    }\n    drawCircle(ctx, x, y, 5, 'black', 'black', 2);\n    return true;\n  }\n  \n  function drawLine(ctx, x1, y1, x2, y2) {\n    ctx.strokeStyle = 'black';\n    ctx.lineWidth = 5;\n\n    \/\/ draw a red line\n    ctx.beginPath();\n    ctx.moveTo(x1, y1);\n    ctx.lineTo(x2, y2);\n    ctx.stroke();\n  }\n  \n  \n  function scoreLine(ctx, x1, y1, x2, height) {\n  \n    var lines = document.getElementById(\"lines\").value;\n    if( lines == 0) {\n      return false;\n    }\n    \n    if( lines == 1) {\n    \n      drawLine(ctx, x1, y1, x2, y1);\n    } else {\n  \n      var slopes = [-1, 1, 0, 0, 0, 0, 0]\n      var diagonal = slopes[Math.floor(Math.random()*slopes.length)]\n  \n      if (diagonal != 0) {\n        x2 = x2 + height;\n      }\n    \n      var y2 = y1 + (height * diagonal);\n      drawLine(ctx, x1, y1, x2, y2);\n    }\n    \n    return true;\n  }\n\n\n  function pickItem(ctx, x1, y1, x2, height, radius, fill) {\n  \n    index = Math.floor(Math.random() * options.length);\n    switch (options[index]) {\n      case 0:\n        drawDot(ctx, x1, y1);\n        break;\n      case 1:\n        scoreLine(ctx, x1, y1, x2, height);\n        break;\n      case 3:\n        scoreCircle(ctx, x, y, radius, fill);\n        break;\n      }\n  }\n  \n  \n  function drawScore(ctx, staves, dots, lines, circles){\n    var canvas_width = ctx.canvas.clientWidth;\n\t\tvar canvas_height = ctx.canvas.clientHeight;\n    var height = 0;\n    var stave_height = Math.floor(canvas_height \/ ( staves + 1));\n    var num_items;\n  \n    var range = canvas_width \/ 20;\n    \n   \n\t\t\n\t\t\n    for (let i = 0; i < staves; i++) {\n  \t\tnum_items = Math.floor(Math.random() * 5) + 5;\n      height += stave_height;\n      \/\/drawDot(ctx, Math.floor(Math.random * canvas_width), height);\n      for(let j=0; j < num_items; j++) {\n        \/\/  pickItem(ctx, x1, y1, x2, height, radius, fill)\n     \t\t\/\/drawDot(ctx, Math.floor(Math.random() * canvas_width), height);\n     \t\tvar x1 = Math.floor(Math.random() * canvas_width);\n     \t\tvar x2 = x1 + Math.floor(Math.random() * range) + 20;\n     \t\tvar radius = Math.floor((Math.random() * (stave_height \/ 2)) + (stave_height \/ 2));\n     \t\tpickItem(ctx, x1, height, x2, stave_height, radius , Math.floor(Math.random()  * 2));\n      }\n\t\t} \n  }\n  \n  function parseForm(ctx) {\n     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n     \n    var allnotes = document.getElementById(\"notes\").value;\n    context.fillText(allnotes, 30, 60);\n    var notes = allnotes.split(\",\");\n    \n    options = [];\n    \n    \/\/var dots = document.getElementById(\"dots\").value;\n    \/\/console.log(dots);\n    if (document.getElementById(\"dots\").checked) {\n      options.push(0);\n    }\n    var lines = document.getElementById(\"lines\").value;\n    if( lines != 0) {\n      options.push(1);\n    }\n    \n   var circles = document.getElementById(\"circles\").value;\n    if( circles != 0) {\n      options.push(2);\n    }\n    \n    console.log(options);\n    \n    if (options.length > 0 ) {\n      drawScore(ctx, notes.length, 1, 0, 0, 0);\n    }\n  }\n  \n\n    var c = document.getElementById(\"canvas_images\");\n    c.width = 0.99 * window.screen.availWidth; \n    c.height = Math.max(c.height, 0.4 * window.screen.availHeight);\n    var context = c.getContext(\"2d\");\n    \/\/var numGlyphs = Math.floor((Math.random() * 3) + 1) + 1;\n    \/\/var blob = new Image();\n    \/\/var x, y;\n\n    context.font = \"300% Bravura\";\n    \/\/blob.src = \"https:\/\/farm8.staticflickr.com\/7322\/9736783860_4c2706d4ef_m.jpg\"\n    \/\/blob.onload = function() {\n    \/\/    context.drawImage(blob, 0, 0);\n    \/\/    for (var i = 0; i < numGlyphs; i++) {\n    \/\/        x = Math.floor((Math.random() * i * 50) + 1) + 5;\n    \/\/        y = Math.floor((Math.random() * 205) + 1) + 7;\n    \/\/        \/\/1f49b\n    \/\/        context.fillText(\"<3\", x, y);\n    \/\/    };\n\n    \/\/};\n    \/\/context.fillText(\"<3\", 100, 100);\n    \n    \/\/drawScore(context, 1, 1, 0, 0);\n    \n    var options = [];\n    \n    parseForm(context);\n    \n    formElem.onsubmit = async (e) => {\n    \te.preventDefault();\n\t\t\tparseForm(context);\n    }\n\n<\/script>\n\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form id=\"formElem\">\n  &lt;label for \"notes\">Notes:&lt;\/label>\n  &lt;input type=\"text\" name=\"notes\" id=\"notes\" value=\"C, G\">\n  \n  &lt;label for \"dots\">Dots:&lt;\/label>\n  &lt;input type=\"checkbox\" id=\"dots\" name=\"dots\" value=\"1\" checked>\n  \n   &lt;label for=\"lines\">Lines:&lt;\/label>\n&lt;select name=\"lines\" id=\"lines\">\n  &lt;option value=\"0\">None&lt;\/option>\n  &lt;option value=\"1\">Flat&lt;\/option>\n  &lt;option value=\"2\">Sloped&lt;\/option>\n&lt;\/select> \n  &lt;label for \"circles\">Circles:&lt;\/label>\n  &lt;input type=\"checkbox\" id=\"circles\" name=\"circles\" value=\"1\">\n\n  &lt;input type=\"submit\">\n&lt;\/form>\n&lt;canvas height=\"310\" id=\"canvas_images\" style=\"border: 1px solid #d3d3d3;\" width=\"1280\">\n    Your browser does not support the HTML5 canvas tag.&lt;\/canvas>\n\n&lt;script>  \n  \n  function drawCircle(ctx, x, y, radius, fill, stroke, strokeWidth) {\n  \tctx.beginPath()\n  \tctx.arc(x, y, radius, 0, 2 * Math.PI, false)\n  \tif (fill) {\n    \tctx.fillStyle = fill\n    \tctx.fill()\n  \t}\n  \tif (stroke) {\n    \tctx.lineWidth = strokeWidth\n    \tctx.strokeStyle = stroke\n    \tctx.stroke()\n  \t}\n\t}\n\t\n\tfunction scoreCircle(ctx, x, y, radius, fill) {}\n  \n  function drawDot(ctx, x,y) {\n    var dots = document.getElementById(\"dots\").value;\n    \n    if (dots ==0) {\n      return false;\n    }\n    drawCircle(ctx, x, y, 5, 'black', 'black', 2);\n    return true;\n  }\n  \n  function drawLine(ctx, x1, y1, x2, y2) {\n    ctx.strokeStyle = 'black';\n    ctx.lineWidth = 5;\n\n    \/\/ draw a red line\n    ctx.beginPath();\n    ctx.moveTo(x1, y1);\n    ctx.lineTo(x2, y2);\n    ctx.stroke();\n  }\n  \n  \n  function scoreLine(ctx, x1, y1, x2, height) {\n  \n    var lines = document.getElementById(\"lines\").value;\n    if( lines == 0) {\n      return false;\n    }\n    \n    if( lines == 1) {\n    \n      drawLine(ctx, x1, y1, x2, y1);\n    } else {\n  \n      var slopes = &#91;-1, 1, 0, 0, 0, 0, 0]\n      var diagonal = slopes&#91;Math.floor(Math.random()*slopes.length)]\n  \n      if (diagonal != 0) {\n        x2 = x2 + height;\n      }\n    \n      var y2 = y1 + (height * diagonal);\n      drawLine(ctx, x1, y1, x2, y2);\n    }\n    \n    return true;\n  }\n\n\n  function pickItem(ctx, x1, y1, x2, height, radius, fill) {\n  \n    index = Math.floor(Math.random() * options.length);\n    switch (options&#91;index]) {\n      case 0:\n        drawDot(ctx, x1, y1);\n        break;\n      case 1:\n        scoreLine(ctx, x1, y1, x2, height);\n        break;\n      case 3:\n        scoreCircle(ctx, x, y, radius, fill);\n        break;\n      }\n  }\n  \n  \n  function drawScore(ctx, staves, dots, lines, circles){\n    var canvas_width = ctx.canvas.clientWidth;\n\t\tvar canvas_height = ctx.canvas.clientHeight;\n    var height = 0;\n    var stave_height = Math.floor(canvas_height \/ ( staves + 1));\n    var num_items;\n  \n    var range = canvas_width \/ 20;\n    \n   \n\t\t\n\t\t\n    for (let i = 0; i &lt; staves; i++) {\n  \t\tnum_items = Math.floor(Math.random() * 5) + 5;\n      height += stave_height;\n      \/\/drawDot(ctx, Math.floor(Math.random * canvas_width), height);\n      for(let j=0; j &lt; num_items; j++) {\n        \/\/  pickItem(ctx, x1, y1, x2, height, radius, fill)\n     \t\t\/\/drawDot(ctx, Math.floor(Math.random() * canvas_width), height);\n     \t\tvar x1 = Math.floor(Math.random() * canvas_width);\n     \t\tvar x2 = x1 + Math.floor(Math.random() * range) + 20;\n     \t\tvar radius = Math.floor((Math.random() * (stave_height \/ 2)) + (stave_height \/ 2));\n     \t\tpickItem(ctx, x1, height, x2, stave_height, radius , Math.floor(Math.random()  * 2));\n      }\n\t\t} \n  }\n  \n  function parseForm(ctx) {\n     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n     \n    var allnotes = document.getElementById(\"notes\").value;\n    context.fillText(allnotes, 30, 60);\n    var notes = allnotes.split(\",\");\n    \n    options = &#91;];\n    \n    \/\/var dots = document.getElementById(\"dots\").value;\n    \/\/console.log(dots);\n    if (document.getElementById(\"dots\").checked) {\n      options.push(0);\n    }\n    var lines = document.getElementById(\"lines\").value;\n    if( lines != 0) {\n      options.push(1);\n    }\n    \n   var circles = document.getElementById(\"circles\").value;\n    if( circles != 0) {\n      options.push(2);\n    }\n    \n    console.log(options);\n    \n    if (options.length > 0 ) {\n      drawScore(ctx, notes.length, 1, 0, 0, 0);\n    }\n  }\n  \n\n    var c = document.getElementById(\"canvas_images\");\n    c.width = 0.99 * window.screen.availWidth; \n    c.height = Math.max(c.height, 0.4 * window.screen.availHeight);\n    var context = c.getContext(\"2d\");\n    \/\/var numGlyphs = Math.floor((Math.random() * 3) + 1) + 1;\n    \/\/var blob = new Image();\n    \/\/var x, y;\n\n    context.font = \"300% Bravura\";\n    \/\/blob.src = \"https:\/\/farm8.staticflickr.com\/7322\/9736783860_4c2706d4ef_m.jpg\"\n    \/\/blob.onload = function() {\n    \/\/    context.drawImage(blob, 0, 0);\n    \/\/    for (var i = 0; i &lt; numGlyphs; i++) {\n    \/\/        x = Math.floor((Math.random() * i * 50) + 1) + 5;\n    \/\/        y = Math.floor((Math.random() * 205) + 1) + 7;\n    \/\/        \/\/1f49b\n    \/\/        context.fillText(\"&lt;3\", x, y);\n    \/\/    };\n\n    \/\/};\n    \/\/context.fillText(\"&lt;3\", 100, 100);\n    \n    \/\/drawScore(context, 1, 1, 0, 0);\n    \n    var options = &#91;];\n    \n    parseForm(context);\n    \n    formElem.onsubmit = async (e) => {\n    \te.preventDefault();\n\t\t\tparseForm(context);\n    }\n\n&lt;\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This is designed for students with no experience of improvising. The idea is to start with just having one note and dots. Then dots and flat lines. Then gradually adding more notes. It&#8217;s meant to fir the window width, so you may need to scroll sideways if you&#8217;re looking at this page with a sidebar. &hellip; <a href=\"https:\/\/www.celesteh.com\/blog\/2023\/01\/25\/graphic-notation-teaching-tool\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Graphic Notation Teaching Tool<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[1],"tags":[420],"class_list":["post-5192","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-d3d3d3"],"_links":{"self":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts\/5192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/comments?post=5192"}],"version-history":[{"count":3,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts\/5192\/revisions"}],"predecessor-version":[{"id":5195,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts\/5192\/revisions\/5195"}],"wp:attachment":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/media?parent=5192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/categories?post=5192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/tags?post=5192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}