Source

vendors/P5/sketchFeedback.js

  1. // File imports
  2. import atVars from "../AlphaTab/variables";
  3. import * as sketchBehaviors from "./sketchBehaviors";
  5. /**
  6.  * P5 sketch wrapper for real time feedback
  7.  * @module sketchFeedback
  8.  * @category P5
  9.  * @author Daniel Griessler <dgriessler20@gmail.com>
  10.  * @author Dan Levy <danlevy124@gmail.com>
  11.  */
  13. /**
  14.  * Wrapper for local p5 setup and draw functions
  15.  * @function
  16.  * @param {sketch} p Sketch object that will include all of the functions that will be called by p5
  17.  */
  18. const p5FeedbackSketch = (p) => {
  19.     p.type = sketchBehaviors.REAL_TIME_FEEDBACK;
  20.     // how much space to add around note for drawing lines, obtained by guess and check
  21.     const EXTRA_BAR_VARIANCE = 7;
  23.     // document elements retrieved from the document
  24.     let barCursor;
  25.     let alphaTabSurface;
  26.     let sideNavElementWidth;
  28.     // wraps together the Alpha tab container and p5's canvas
  29.     let wrapper;
  31.     // provided by reference which is updated in other functions
  32.     let drawer;
  34.     // reference to p5's canvas when created. It should overlay the AlphaTab canvas
  35.     let canvas;
  37.     // how large to draw the notehead
  38.     // TODO: Dynamically change based on scale of music
  39.     let circleSize = 10;
  41.     // stores last two XY coordinates of notes drawn
  42.     let previousPos = [-1, -1, -1, -1];
  44.     // stores the last recorded midi value and its time
  45.     let lastPitchAndTime = [-1, -1];
  47.     /**
  48.      * This function is called twice. Once, upon initialization p5 calls it which we use to tell p5 to stop looping
  49.      * Then, AlphaTab will call setup when its done being rendered. Then, the canvas can be setup for drawing since
  50.      * the canvas overlays the AlphaTab container
  51.      * @param {Drawer} drawerGiven - p5 will not provide this but atVars provides a reference to the Drawer being used
  52.      */
  53.     p.setup = function (drawerGiven) {
  54.         if (drawerGiven === undefined) {
  55.             p.noLoop();
  56.             return;
  57.         }
  58.         drawer = drawerGiven;
  59.         // Retrieved by attaching unique IDs to elements generated by AlphaTab. Required editing AlphaTab.js directly
  60.         barCursor = document.getElementById("bC");
  61.         alphaTabSurface = document.getElementById("aTS");
  62.         const sideNavElement = document.querySelector("#side-nav");
  63.         sideNavElementWidth =
  64.             sideNavElement !== null ? sideNavElement.clientWidth : 0;
  65.         wrapper = document.getElementById("alpha-tab-wrapper");
  67.         // creates a canvas that overlaps the alphaTabSurface. Position is absolute for the canvas by default
  68.         canvas = p.createCanvas(
  69.             alphaTabSurface.clientWidth,
  70.             alphaTabSurface.clientHeight
  71.         );
  72.         const x = 0;
  73.         const y = 0;
  74.         canvas.position(x, y);
  75.         canvas.parent("sketch-holder");
  76.     };
  78.     /**
  79.      * Updates the drawer line heights from the page if the drawer is active
  80.      * @function
  81.      */
  82.     const updateDrawerLines = () => {
  83.         let topLine = document.getElementById("rect_0");
  84.         let nextLine = document.getElementById("rect_1");
  85.         if (
  86.             drawer &&
  87.             topLine &&
  88.             topLine.y &&
  89.             topLine.y.animVal &&
  90.             topLine.y.animVal.value &&
  91.             nextLine &&
  92.             nextLine.y &&
  93.             nextLine.y.animVal &&
  94.             nextLine.y.animVal.value
  95.         ) {
  96.             const topLineHeight = topLine.y.animVal.value;
  97.             const distanceBetweenLines =
  98.                 nextLine.y.animVal.value - topLineHeight;
  99.             drawer.setTopLineAndDistanceBetween(
  100.                 topLineHeight,
  101.                 distanceBetweenLines,
  102.                 drawer.baseOctave
  103.             );
  104.         }
  105.     };
  107.     /**
  108.      * Draws the canvas on the screen. Requires that the canvas is not undefined ie setup has run
  109.      * TODO: Handle sheet music scale
  110.      */
  111.     p.draw = function () {
  112.         if (!atVars.getsFeedback) {
  113.             return;
  114.         }
  116.         if (atVars && atVars.shouldResetDrawPositions) {
  117.             previousPos[0] = -1;
  118.             previousPos[1] = -1;
  119.             previousPos[2] = -1;
  120.             previousPos[3] = -1;
  121.             atVars.shouldResetDrawPositions = false;
  122.             barCursor = document.getElementById("bC");
  123.             alphaTabSurface = document.getElementById("aTS");
  124.         }
  126.         // handles clearing ahead and drawing line behind the note head
  127.         if (previousPos[0] !== -1 && previousPos[1] !== -1) {
  128.             // fills with white
  129.             p.fill("#F8F8F8");
  131.             // draws clearing rectangle with total height of alpha tab from previous X position to the end
  132.             p.rect(
  133.                 previousPos[0],
  134.                 0,
  135.                 alphaTabSurface.clientWidth - previousPos[0],
  136.                 alphaTabSurface.clientHeight
  137.             );
  138.     
  139.             if (previousPos[2] !== -1) {
  140.                 // If there is any confusion in the player then this will help keep the drawing at the right height
  141.                 if (previousPos[0] < previousPos[2]) {
  142.                     updateDrawerLines();
  143.                 }
  144.             }
  146.             if (previousPos[2] !== -1) {
  147.                 // If there is any confusion in the player then this will help keep the drawing at the right height
  148.                 if (previousPos[0] < previousPos[2]) {
  149.                     updateDrawerLines();
  150.                 }
  151.             }
  153.             // don't draw silence which has special value -1 or if we don't have a previous point
  154.             if (
  155.                 drawer &&
  156.                 drawer.note.midiVal >= 0 &&
  157.                 previousPos[2] !== -1 &&
  158.                 previousPos[3] !== -1
  159.             ) {
  160.                 if (atVars.noteStream[atVars.noteStreamIndex] === -1) {
  161.                     // singing should be silent
  162.                     p.stroke(255, 0, 0);
  163.                 } else {
  164.                     let diff = Math.abs(
  165.                         lastPitchAndTime[0] -
  166.                             atVars.noteStream[atVars.noteStreamIndex]
  167.                     );
  169.                     // fill with green if really close
  170.                     if (diff < 1) {
  171.                         p.stroke(0, 255, 0);
  172.                     } else if (diff < 2) {
  173.                         // yellow if farther away
  174.                         p.stroke("#CCCC00");
  175.                     } else {
  176.                         // and red if too far or singing when should be silent
  177.                         p.stroke(255, 0, 0);
  178.                     }
  179.                 }
  181.                 p.strokeWeight(3);
  182.                 p.line(
  183.                     previousPos[0],
  184.                     previousPos[1],
  185.                     previousPos[2],
  186.                     previousPos[3]
  187.                 );
  188.                 p.noStroke();
  189.             }
  190.             previousPos[2] = previousPos[0];
  191.             previousPos[3] = previousPos[1];
  192.         }
  194.         // dont draw the outline of the shape, note: you need to turn stroke on to draw lines as we do below.
  195.         p.noStroke();
  197.         if (drawer) {
  198.             lastPitchAndTime[0] = drawer.note.midiVal;
  199.             lastPitchAndTime[1] = atVars.api.timePosition / 1000;
  200.             while (
  201.                 lastPitchAndTime[1] >
  202.                 atVars.cumulativeTime +
  203.                     atVars.noteStream[atVars.noteStreamIndex + 1]
  204.             ) {
  205.                 atVars.cumulativeTime +=
  206.                     atVars.noteStream[atVars.noteStreamIndex + 1];
  207.                 atVars.noteStreamIndex += 2;
  208.             }
  210.             let currentHeight = drawer.noteHeight;
  211.             previousPos[1] = currentHeight;
  213.             // fills with pink
  214.             p.fill(255, 0, 255);
  216.             // Binds x position to the bar cursor
  217.             let posX =
  218.                 barCursor.getClientRects()[0].left.valueOf() -
  219.                 sideNavElementWidth +
  220.                 wrapper.scrollLeft -
  221.                 27;
  223.             // TODO: Handle resizing scale
  224.             // places sharp if present beside the note. These magic values were calculated via trial and error
  225.             let sharpPos = [posX - 14, currentHeight + 3.5];
  226.             previousPos[0] = sharpPos[0] - EXTRA_BAR_VARIANCE;
  228.             // silence has Sentinel value -1 so only draw when not silent
  229.             if (drawer.note.midiVal >= 0) {
  230.                 // actually draws note circle at the given position
  231.                 p.ellipse(posX, currentHeight, circleSize, circleSize);
  233.                 // TODO Handle resizing scale
  234.                 // Adds sharp symbol if needed
  235.                 if (drawer.note.isSharp) {
  236.                     p.text("#", sharpPos[0], sharpPos[1]);
  237.                 }
  239.                 // Adds ledger lines above or below the staff
  240.                 if (drawer.belowOrAbove !== 0) {
  241.                     let isIncreasing = drawer.belowOrAbove > 0;
  242.                     p.stroke(0);
  243.                     p.strokeWeight(1);
  244.                     let height = isIncreasing
  245.                         ? drawer.topLine
  246.                         : drawer.firstLine - drawer.distanceBetweenLines;
  247.                     for (let i = 0; i < Math.abs(drawer.belowOrAbove); i++) {
  248.                         if (isIncreasing) {
  249.                             height -= drawer.distanceBetweenLines;
  250.                         } else {
  251.                             height += drawer.distanceBetweenLines;
  252.                         }
  253.                         p.line(
  254.                             posX - EXTRA_BAR_VARIANCE,
  255.                             height,
  256.                             posX + EXTRA_BAR_VARIANCE,
  257.                             height
  258.                         );
  259.                     }
  260.                     p.noStroke();
  261.                 }
  262.             }
  263.         }
  264.     };
  265. };
  267. export default p5FeedbackSketch;