In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
Nov 3, 2021
1 star
11 tone tap demo
Frontend masters Web-Audio by Matt DesLauriershttps://github.com/mattdesl/workshop-web-audio (tone.js)
Video Replay only available as editing still happeninghttps://frontendmasters.com/workshops/web-audio/.
Hirajoshi piano scaleshttps://www.pianoscales.org/hirajoshi.html.
volume = -15
https://tonejs.github.io/docs/r13/Synth
https://tonejs.github.io/docs/r13/Oscillator
Types of Oscillator.https://tonejs.github.io/docs/r13/Oscillator#:~:text=%3C/%3E-,.type,-%E2%86%9D%20String%20%23
synth = new Tone.Synth({
oscillator: {
type: "sine", // sine, square, triangle, sawtooth
},
}).toDestination() // skips synth.connect(Tone.Master);
p5(sketch => {
let mouse = null
sketch.setup = function() {
sketch.createCanvas(width,height);
Tone.Master.volume.value = volume;
};
sketch.draw = function() {
const dim = Math.min(width, height);
// Instead of drawing black, we draw with
// transparent black to give a 'ghosting' effect
const opacity = 0.085;
sketch.background(`#001b42${(~~(opacity * 255)+"").toString(16)}`);
// If we have a mouse position, draw it
if (mouse) {
sketch.noFill();
sketch.stroke(255);
sketch.strokeWeight(dim * 0.01);
sketch.circle(mouse[0], mouse[1], dim * 0.2);
// Clear position so we stop drawing it,
// this will make it fade away
mouse = null;
}
// Draw a 'play' button
sketch.noStroke();
sketch.fill(255);
sketch.text('click around to make some sound',20,20)
}
// Update mouse position and play a sound
sketch.mousePressed = function () {
// Store mouse position when pressed
mouse = [sketch.mouseX, sketch.mouseY];
// Hirajoshi scale in C
// https://www.pianoscales.org/hirajoshi.html
// const notes = ["C", "Db", "F", "Gb", "Bb"];
const notes = ['F#', 'G#', 'A', 'C#', 'D', 'F#' ]
const octaves = [ 3, 4, 5, 6];
const octave = sketch.random(octaves);
const note = sketch.random(notes);
sketch.text(`octave ${octave} note ${note}`,20,40)
synth.triggerAttackRelease(note + octave, "8n");
}
})
height = width/3
Tone = require('tone')
import {p5} from "@tmcw/p5"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
