Random Pitch Sequences / Bairui Su

Creative generation toolmaker, believe that today's tool help shape tomorrow’s art. Creator Charming.js. Author @antv/g2@5.x.

Workspace

Public

Charming

Edited

Mar 11

Fork of Pitch Helix

{

const synth = new Tone.Synth();

synth.toDestination();

const data = [

() => synth.triggerAttack(440),

() => synth.triggerAttack(d3.randomUniform(100, 10000)()), // play a random frequency

() => synth.triggerAttack(d3.randomUniform(440, 880)()), // play a random frequency within an octave

() => synth.triggerAttack(d3.randomUniform(329.63, 349.23)()), // play a random frequency within an equal-tempered semitone

() => {

// play a random frequency within a 5-note scale that I made up

const myScale = [200.32, 350.55, 480, 670, 800];

const pos = Math.floor(d3.randomUniform(0, myScale.length)());

const frequency = myScale[pos];

synth.triggerAttack(frequency);

() => {

// play frequencies from a pentatonic scale

const pentatonic = [200, 225, 266.6666666666667, 300, 337.5, 400];

const pos = Math.floor(d3.randomUniform(0, pentatonic.length)());

const frequency = pentatonic[pos];

synth.triggerAttack(frequency);

}

];

function onMouseup() {

synth.triggerRelease();

}

const size = 50;

const padding = 10;

const width = data.length * (size + padding) + padding;

const height = size + padding * 2;

const app = cm.render({

width,

height,

draw: [

cm.svg("circle", data, {

cx: (_, i) => i * (size + padding) + size / 2,

cy: padding + size / 2,

r: size / 2,

fill: "black",

onMouseup,

onMousedown: (_, d) => d()

})

]

});

invalidation.then(() => app.dispose());

return app.node();

}

function mouseof(event) {

const rect = event.target.getBoundingClientRect();

const mouseX = event.clientX - rect.left;

const mouseY = event.clientY - rect.top;

return [mouseX, mouseY];

}

Tone = require("tone")

cm = require("charmingjs@0.0.13")

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more