Allright. I changed the unfilled ellipses color into white and the background just stays now grey or else we can’t see the ellipses (later bg will be white as well).
I wrote the colors manually in setup().
Couldn’t figure out yet how to the whole fill up/lerp with the new var.
p5.js Web Editor | Sturdy hisser (p5js.org)
// The midi notes of a scale
var notes = [
40,
41,
42,
43,
44,
45,
46,
47,
48,
49,
50,
51,
52,
53,
54,
55,
56,
57,
58,
59,
60,
61,
62,
63,
64,
65,
66,
67,
68,
69,
70,
71,
72,
73,
74,
75,
76,
77,
78,
79,
80,
81,
82,
83,
84,
85,
86,
87,
88,
89,
90,
91,
92,
93,
94,
95,
96,
97,
98,
99,
];
var osc;
var upBuffer;
var downBuffer;
let list = [new p5.Vector(375, 250)];
var key;
var playingNote = false;
function setup() {
// 800 x 600 (double width to make room for each "sub-canvas")
createCanvas(750, 600);
// Create both of your off-screen graphics buffers
upBuffer = createGraphics(750, 500);
downBuffer = createGraphics(750, 100);
// A triangle oscillator
osc = new p5.TriOsc();
// Start silent
osc.start();
osc.amp(0);
// append(list, new new p5.Vector(375,250) );
append(list, new p5.Vector(390, 250, 15, 15));
append(list, new p5.Vector(383, 263, 15, 15));
append(list, new p5.Vector(368, 263, 15, 15));
append(list, new p5.Vector(360, 250, 15, 15));
append(list, new p5.Vector(368, 237, 15, 15));
append(list, new p5.Vector(383, 237, 15, 15));
append(list, new p5.Vector(398, 237, 15, 15));
append(list, new p5.Vector(405, 250, 15, 15));
append(list, new p5.Vector(398, 263, 15, 15));
append(list, new p5.Vector(390, 276, 15, 15));
append(list, new p5.Vector(375, 276, 15, 15));
append(list, new p5.Vector(360, 276, 15, 15));
append(list, new p5.Vector(353, 263, 15, 15));
append(list, new p5.Vector(345, 250, 15, 15));
append(list, new p5.Vector(353, 237, 15, 15));
append(list, new p5.Vector(360, 224, 15, 15));
append(list, new p5.Vector(375, 224, 15, 15));
append(list, new p5.Vector(390, 224, 15, 15));
append(list, new p5.Vector(405, 224, 15, 15));
append(list, new p5.Vector(413, 237, 15, 15));
append(list, new p5.Vector(420, 250, 15, 15));
append(list, new p5.Vector(413, 263, 15, 15));
append(list, new p5.Vector(405, 276, 15, 15));
append(list, new p5.Vector(398, 289, 15, 15));
append(list, new p5.Vector(383, 289, 15, 15));
append(list, new p5.Vector(368, 289, 15, 15));
append(list, new p5.Vector(353, 289, 15, 15));
append(list, new p5.Vector(345, 276, 15, 15));
append(list, new p5.Vector(338, 263, 15, 15));
append(list, new p5.Vector(330, 250, 15, 15));
append(list, new p5.Vector(338, 237, 15, 15));
append(list, new p5.Vector(345, 224, 15, 15));
append(list, new p5.Vector(353, 211, 15, 15));
append(list, new p5.Vector(368, 211, 15, 15));
append(list, new p5.Vector(383, 211, 15, 15));
append(list, new p5.Vector(398, 211, 15, 15));
append(list, new p5.Vector(413, 211, 15, 15));
append(list, new p5.Vector(420, 224, 15, 15));
append(list, new p5.Vector(428, 237, 15, 15));
append(list, new p5.Vector(435, 250, 15, 15));
append(list, new p5.Vector(428, 263, 15, 15));
append(list, new p5.Vector(420, 276, 15, 15));
append(list, new p5.Vector(413, 289, 15, 15));
append(list, new p5.Vector(405, 302, 15, 15));
append(list, new p5.Vector(390, 302, 15, 15));
append(list, new p5.Vector(375, 302, 15, 15));
append(list, new p5.Vector(360, 302, 15, 15));
append(list, new p5.Vector(345, 302, 15, 15));
append(list, new p5.Vector(338, 289, 15, 15));
append(list, new p5.Vector(330, 276, 15, 15));
append(list, new p5.Vector(323, 263, 15, 15));
append(list, new p5.Vector(315, 250, 15, 15));
append(list, new p5.Vector(323, 237, 15, 15));
append(list, new p5.Vector(330, 224, 15, 15));
append(list, new p5.Vector(338, 211, 15, 15));
append(list, new p5.Vector(345, 198, 15, 15));
append(list, new p5.Vector(360, 198, 15, 15));
append(list, new p5.Vector(375, 198, 15, 15));
append(list, new p5.Vector(390, 198, 15, 15));
append(list, new p5.Vector(405, 198, 15, 15));
append(list, new p5.Vector(420, 198, 15, 15));
append(list, new p5.Vector(428, 211, 15, 15));
append(list, new p5.Vector(435, 224, 15, 15));
append(list, new p5.Vector(443, 237, 15, 15));
append(list, new p5.Vector(450, 250, 15, 15));
append(list, new p5.Vector(443, 263, 15, 15));
append(list, new p5.Vector(435, 276, 15, 15));
append(list, new p5.Vector(428, 289, 15, 15));
append(list, new p5.Vector(420, 302, 15, 15));
append(list, new p5.Vector(413, 315, 15, 15));
append(list, new p5.Vector(398, 315, 15, 15));
append(list, new p5.Vector(383, 315, 15, 15));
append(list, new p5.Vector(368, 315, 15, 15));
append(list, new p5.Vector(353, 315, 15, 15));
append(list, new p5.Vector(338, 315, 15, 15));
append(list, new p5.Vector(330, 302, 15, 15));
append(list, new p5.Vector(323, 289, 15, 15));
append(list, new p5.Vector(315, 276, 15, 15));
append(list, new p5.Vector(308, 263, 15, 15));
append(list, new p5.Vector(300, 250, 15, 15));
append(list, new p5.Vector(308, 237, 15, 15));
append(list, new p5.Vector(315, 224, 15, 15));
append(list, new p5.Vector(323, 211, 15, 15));
append(list, new p5.Vector(330, 198, 15, 15));
append(list, new p5.Vector(338, 185, 15, 15));
append(list, new p5.Vector(353, 185, 15, 15));
append(list, new p5.Vector(368, 185, 15, 15));
append(list, new p5.Vector(383, 185, 15, 15));
append(list, new p5.Vector(398, 185, 15, 15));
append(list, new p5.Vector(413, 185, 15, 15));
append(list, new p5.Vector(428, 185, 15, 15));
append(list, new p5.Vector(435, 198, 15, 15));
append(list, new p5.Vector(443, 211, 15, 15));
append(list, new p5.Vector(450, 224, 15, 15));
append(list, new p5.Vector(458, 237, 15, 15));
append(list, new p5.Vector(465, 250, 15, 15));
append(list, new p5.Vector(458, 263, 15, 15));
append(list, new p5.Vector(450, 276, 15, 15));
append(list, new p5.Vector(443, 289, 15, 15));
append(list, new p5.Vector(435, 302, 15, 15));
append(list, new p5.Vector(428, 315, 15, 15));
append(list, new p5.Vector(421, 328, 15, 15));
append(list, new p5.Vector(406, 328, 15, 15));
append(list, new p5.Vector(391, 328, 15, 15));
append(list, new p5.Vector(376, 328, 15, 15));
append(list, new p5.Vector(361, 328, 15, 15));
append(list, new p5.Vector(346, 328, 15, 15));
append(list, new p5.Vector(331, 328, 15, 15));
append(list, new p5.Vector(323, 315, 15, 15));
append(list, new p5.Vector(315, 302, 15, 15));
append(list, new p5.Vector(308, 289, 15, 15));
append(list, new p5.Vector(300, 276, 15, 15));
append(list, new p5.Vector(293, 263, 15, 15));
append(list, new p5.Vector(285, 250, 15, 15));
append(list, new p5.Vector(293, 237, 15, 15));
append(list, new p5.Vector(300, 224, 15, 15));
append(list, new p5.Vector(308, 211, 15, 15));
append(list, new p5.Vector(315, 198, 15, 15));
append(list, new p5.Vector(323, 185, 15, 15));
append(list, new p5.Vector(331, 172, 15, 15));
append(list, new p5.Vector(346, 172, 15, 15));
append(list, new p5.Vector(361, 172, 15, 15));
append(list, new p5.Vector(376, 172, 15, 15));
append(list, new p5.Vector(391, 172, 15, 15));
append(list, new p5.Vector(406, 172, 15, 15));
append(list, new p5.Vector(421, 172, 15, 15));
var colorsForNotes = [
color(0, 0, 255),
color(9, 0, 247),
color(17, 0, 238),
color(26, 0, 230),
color(34, 0, 221),
color(43, 0, 213),
color(51, 0, 204),
color(60, 0, 196),
color(68, 0, 187),
color(77, 0, 179),
color(85, 0, 170),
color(94, 0, 162),
color(102, 0, 153),
color(111, 0, 145),
color(119, 0, 136),
color(128, 0, 128),
color(136, 0, 119),
color(145, 0, 111),
color(153, 0, 102),
color(162, 0, 94),
color(170, 0, 85),
color(179, 0, 77),
color(187, 0, 68),
color(196, 0, 60),
color(204, 0, 51),
color(213, 0, 43),
color(221, 0, 34),
color(230, 0, 26),
color(238, 0, 17),
color(247, 0, 9),
color(255, 9, 0),
color(255, 17, 0),
color(255, 26, 0),
color(255, 34, 0),
color(255, 43, 0),
color(255, 51, 0),
color(255, 60, 0),
color(255, 68, 0),
color(255, 77, 0),
color(255, 85, 0),
color(255, 94, 0),
color(255, 102, 0),
color(255, 111, 0),
color(255, 119, 0),
color(255, 128, 0),
color(255, 136, 0),
color(255, 145, 0),
color(255, 153, 0),
color(255, 162, 0),
color(255, 170, 0),
color(255, 179, 0),
color(255, 187, 0),
color(255, 196, 0),
color(255, 204, 0),
color(255, 213, 0),
color(255, 221, 0),
color(255, 230, 0),
color(255, 238, 0),
color(255, 247, 0),
color(255, 255, 0)
];
}
// A function to play a note
function playNote(note, duration) {
osc.freq(midiToFreq(note));
// Fade it in
osc.fade(0.5, 0.2);
// If we sest a duration, fade it out
if (duration) {
setTimeout(function () {
osc.fade(0, 0.2);
}, duration - 50);
}
}
// When we click
function mousePressed() {
// Map mouse to the key index
key = floor(map(mouseX, 0, width, 0, notes.length));
playNote(notes[key]);
//upBuffer.ellipse(list[key].x, list[key].y, 15, 15);
playingNote = true;
}
// Fade it out when we release
function mouseReleased() {
osc.fade(0, 0.5);
playingNote = false;
}
function draw() {
// Draw on your buffers however you like
drawUpBuffer();
drawDownBuffer();
// Paint the off-screen buffers onto the main canvas
image(upBuffer, 0, 0);
image(downBuffer, 0, 500);
}
function drawUpBuffer() {
upBuffer.background(128);
for (let i = 0; i < list.length; i++) {
//
// upBuffer.fill(lerpColor(color(255, 0, 0), color(0, 0, 255), i / notes.length));
upBuffer.fill(255);
if (playingNote && i == key)
upBuffer.fill(
lerpColor(color(255, 0, 0), color(0, 0, 255), key / notes.length)
);
upBuffer.noStroke();
upBuffer.ellipse(list[i].x, list[i].y, 15, 15);
}
}
function drawDownBuffer() {
// Draw a keyboard
// The width for each key
var w = width / notes.length;
for (var i = 0; i < notes.length; i++) {
var x = i * w;
// If the mouse is over the key
if (mouseX > x && mouseX < x + w && mouseY < height) {
// If we're clicking
if (mouseIsPressed) {
fill(100, 255, 200);
// Or just rolling over
} else {
fill(127);
}
} else {
fill(200);
}
fill(lerpColor(color(255, 0, 0), color(0, 0, 255), i / notes.length));
// Draw the key
rect(x, 0, w - 1, height - 1);
}
}
//