In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
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
p5(sketch => {
let synth
let active = false
const dim = Math.min(width, height)
//----------------------------------------------------------------------
sketch.setup = function() {
sketch.createCanvas(width,height);
Tone.Master.volume.value = volume;
sketch.background("#001b42");
// Make the volume quieter
Tone.Master.volume.value = volume;
// Setup a synth with ToneJS
synth = new Tone.Synth({
oscillator: {
type: "sine",
},
});
// Wire up our nodes:
// synth->master
var feedbackDelay = new Tone.FeedbackDelay("8n", 0.6);
synth.connect(feedbackDelay);
synth.connect(Tone.Master);
feedbackDelay.connect(Tone.Master);
sketch.frameRate(25);
}
//---------------------------------------------------------------------
sketch.draw = function() {
// Instead of drawing dark blue (#001b42), we draw with transparent black to give a 'ghosting' effect so We slowly clear each frame
const opacity = 0.05;
sketch.background(`#001b42${(~~(opacity * 255)+"").toString(16)}`);
if (!active) {
// Draw a 'play' button
sketch.noStroke();
sketch.fill('white');
sketch.text('click around to make some sound',20,20)
sketch.stroke(255);
}
}
//------------------------------------------------------------------------------------------
sketch.mousePressed = function () {
// First time we click...
if (!active) {
active = true;
// Clear background to white to create an initial flash
sketch.background(255);
}
// choose a note
// const notes = ["A3", "C4", "D4", "E3", "G4","C", "Db", "F", "Gb", "Bb",'F#', 'G#', 'A', 'C#', 'D', 'F#' ]
// const note = sketch.random(notes);
const note = sketch.random(["A3", "C4", "D4", "E3", "G4"]);
synth.triggerAttackRelease(note, "8n");
// const dim = min(width, height);
const x = sketch.mouseX;
const y = sketch.mouseY;
sketch.noStroke();
const curColorData = sketch.random(risoColors);
const curColor = sketch.color(curColorData.hex);
const size = sketch.max(10, sketch.abs(sketch.randomGaussian(dim / 8, dim / 8)));
const type = sketch.random(["circle", "line", "polygon"]);
curColor.setAlpha(255 * 0.25);
sketch.background(curColor);
curColor.setAlpha(255);
sketch.fill(curColor);
sketch.textAlign(sketch.CENTER, sketch.CENTER);
sketch.textFont("monospace");
sketch.text(curColorData.pantone, x, y + size / 2 + 20);
sketch.text(curColorData.name, x, y - size / 2 - 20);
switch (type) {
case "circle":
sketch.noStroke()
sketch.ellipseMode(sketch.CENTER);
sketch.circle(x, y, size);
break;
case "line":
sketch.strokeWeight(dim * 0.01);
sketch.stroke(curColor);
polygon(x, y, size * 0.5, 2, sketch.random(-1, 1) * sketch.PI * 2);
break;
case "polygon":
sketch.noStroke()
polygon(x, y, size * 0.5, ~~(sketch.random(3, 10)), sketch.random(-1, 1) * sketch.PI * 2);
break;
}
}
// Draw a basic polygon, handles triangles, squares, pentagons, etc
function polygon(x, y, radius, sides = 3, angle = 0) {
sketch.beginShape();
for (let i = 0; i < sides; i++) {
const a = angle + sketch.TWO_PI * (i / sides);
let sx = x + Math.cos(a) * radius;
let sy = y + Math.sin(a) * radius;
sketch.vertex(sx, sy);
}
sketch.endShape(sketch.CLOSE);
}
})
height = width/3
risoColors = FileAttachment("riso-colors.json").json()
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.
