Blocker! is an experimental project designed to investigate the properties of materials by creating interactive, synthesised musical sequences and drawings on a web-based painting canvas. It uses HTML5 Web Audio API, which enables interactive sound synthesis, sequencing and illustration in modern browsers (such as Google Chrome), mobile and touch devices.

For MAAS YCC, students will act as 'explainers' to engage, assist, demonstrate and explain how they have used BLOCKER! to help understand science in the classroom.

Fig 1. BLOCKER! - Interactive screen display & music sequencer - controlled by Raspberry Pi

Education - BLOCKER! was developed by primary school students to help students better understand the mandatory science curriculum outcomes for Electricity, Circuits, Conductivity and Properties of Materials. As part of their arts activities, students designed and created objects that were then used with BLOCKER! to understand how science and art work better together.

Installation - BLOCKER! is comprised of an 8×8 matrix formed using 25mm wide strips of aluminium coated adhesive tape to any 1200mm x 800mm surface (top of a desk or table for example). Each row and column of the matrix is connected back to a Raspberry Pi, which controls a software synthesiser, sequencer and paint software, combining to create an interactive music and graphics display.

Technology The application runs entirely on the client side, and written solely in JavaScript. It uses Web Audio API to synthesize sound, and HTML5 canvas for interactive drawing board. The source code is fully available.

Interaction - Students collaborate by selecting and placing random items on the table - or build/bring their own… The locations and properties of items on the matrix creates a unique, sequenced visual display and musical composition (local LED monitor and multiple headphones).

Outcomes - Students/visitors learn how properties and locations or objects relate to the Australian Science and Arts curriculum outcomes (Electricity, Circuits, Properties of Materials). Visitors may create their own objects using very simple craft tools and materials (paper, cardboard, tape an scissors)

Inspiration - BLOCKER! integrates Raspberry Pi with fully original BBps code and code developed for the Google Chrome Audio Api Experiment: Synthogram. This project was inspired by teachers and students who love to play and learn through the integration of the arts and sciences.

Code - The Python BLOCKER! code is available here under the GPL3 Open Source License

• Synthogram is proudly open source, and available at Github
• Raspberry PI project code/plans are open source and will be available for on-line download.

1. All Pi columns & rows are set to GPIO INPUT HIGH with PUD_UP
2. Set the left-most COLUMN to GPIO OUTPUT mode LOW
3. For each ROW, read value: If val=0 then location is 'on'
4. Reset COLUMN to GPIO INPUT mode HIGH with PUD_UP
5. Repeat for each COLUMN and record each 'on' location
6. X & Y co-ordinates of ecah 'on' are displayed on screen
7. X & Y co-ordinates are passed to synth as musical notes
8. These notes are played as sequencer scans from L to R

Check out Youtube sound library for more free sounds (not required but recommended for those who like to experiment)

• Full Open Source plans and code will be provided soon (JUL/AUG 2017) for download and use under GPL3 license

Open Source sound effects and loops:

• https://freesound.org/people/frankum/sounds/350877/
• https://freesound.org/search/?q=loop&page=2#sound
• https://www.looperman.com/loops/cats/royalty-free-orchestral-loops-samples-sounds-wavs-download
• http://free-loops.com/free-loops.php
• https://www.audioblocks.com/royalty-free-audio/orchestra-loops

Commands using mpg123:

• http://www.commandlinefu.com/commands/using/mpg123

Customise javascript files in /js folder:

• model.js, view.js, wPaintPlugins.js

Example custom javascript key mapping:

$('body').on('keydown', function (e) {
      if (e.keyCode === 32) { //spacebar
        // TODO: add an identifier in the html instead of using both classes
        $('.play, .stop').trigger('click');
        //} else if (e.ctrlKey && e.keyCode === 90) {
      } else if (e.ctrlKey) { //ctrl key
        $('#wPaint').wPaint('clear');
        //$('#wPaint').wPaint('undo');
      } else {
        if (e.shiftKey) { //shift key
          $('#wPaint').wPaint('redo');
        }
      }
    });