I would like to create a program that uses musical notation. What would the best way be to use musical notation in Processing?
1 Like
Explain more what you need to achieve the above link shows that you can control your Sketch as Casio piano and and much more
I agree that we need more detail about what it is that you would like to achieve. In the meantime the following p5.js source code is one example. Similar things can be done in java mode.
Run in p5.js web editor.
/*
Creates a MIDI keyboard using Black and White Key classes
Add this script to index.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
if it's not already there.
*/
let _numWKeys = 15;
let _numBKeys = 10;
let wKey = [];
let bKey = [];
let wNotes = [48,50,52,53,55,57,59,60,62,64,65,67,69,71,72];
let bNotes = [49,51,54,56,58,61,63,66,68,70];
let gap = [0,0,40,40,40,80,80,120,120,120];
class WhiteKey {
constructor(xpos, ypos, wide, ht, note) {
this.x = xpos;
this.y = ypos;
this.w = wide;
this.h = ht;
this.note = note;
}
display() {
fill(255);
rect(this.x,this.y,this.w,this.h);
}
}
function wKeys(left, top, w, h) {
var id = 0;
for(let j = 0; j < _numWKeys; j++){
x = left + j*w;
y = top;
stroke(0);
strokeWeight(2);
wKey[id] = new WhiteKey(x, y, w, h, wNotes[id]);
if(id==0){
let label1 = createElement('label1',"C3"); label1.position(x+10,h+30)
}
if(id==7){
let label2 = createElement('label2',"C4"); label2.position(x+10,h+30)
}
if(id==14){
let label3 = createElement('label3',"C5"); label3.position(x+10,h+30)
}
id++;
}
}
class BlackKey {
constructor(xpos, ypos, wide, ht, note) {
this.x = xpos;
this.y = ypos;
this.w = wide;
this.h = ht;
this.note = note;
}
display() {
fill(0);
rect(this.x,this.y,this.w,this.h);
}
}
function bKeys(left, top, w, h) {
var id = 0;
for(let k = 0; k < _numBKeys; k++){
x = left + k*(w + 20) + gap[k];
y = top;
stroke(0);
strokeWeight(2);
bKey[id] = new BlackKey(x, y, w, h, bNotes[id]);
id++;
}
}
function setup() {
createCanvas(700,400);
background(209);
osc = new p5.TriOsc();
env = new p5.Envelope();
wKeys(60, 60, 40, 200);
bKeys(90, 60, 20, 120);
}
function draw() {
for (let i = 0; i < wKey.length; i++) {
wKey[i].display();
}
for (let i = 0; i < bKey.length; i++) {
bKey[i].display();
}
}
function startSound(midiVal) {
osc.start();
freq = midiToFreq(midiVal);
osc.freq(freq);
env.ramp(osc, 0, 1.0, 0);
}
function mousePressed(){
for (let i = bKey.length - 1; i > -1; i--) {
if ((mouseX >= bKey[i].x) && (mouseX <= bKey[i].x + bKey[i].w) && (mouseY >= bKey[i].y) && (mouseY <= bKey[i].y + bKey[i].h)) {
console.log("black note id = " + i + " : note = " + bKey[i].note);
startSound(bKey[i].note);
return; // To avoid click through
}
}
for (let i = 0; i < wKey.length; i++) {
if ((mouseX >= wKey[i].x) && (mouseX <= wKey[i].x + wKey[i].w) && (mouseY >= wKey[i].y) && (mouseY <= wKey[i].y + wKey[i].h)) {
console.log("white note id = " + i + " : note = " + wKey[i].note);
startSound(wKey[i].note);
}
}
}
Output:
Let me clarify. I would like to display musical notation symbols like quarter notes, rests, time signatures, staff lines, etc. to display rhythms. I don’t actually need to play any sounds.
I got these errors when running that code in Open Processing:
mySketch, line 0:Uncaught error, most likely a file couldn’t be loaded. Check the spelling of the filenames.
mySketch, line 75:p5.TriOsc is not a constructor
Add the following to index.html:
<script src="path/to/p5.sound.js"></script>
One way to get musical notation is to use unicode characters. If you like quality, JavaFX can generate nice output (there are other ways, eg Java Unicode Chars - #3 by jcgeo):
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
String unicodeToStr(String[] unicodeArray) {
StringBuffer buffer = new StringBuffer();
for (int i = 0; i < unicodeArray.length; i++) {
int hexVal = Integer.parseInt(unicodeArray[i], 16);
buffer.append(Character.toChars(hexVal));
}
return buffer.toString();
}
void setup() {
size(1, 1, FX2D);
Stage stage = new Stage();
stage.setTitle("MusicalNotes_Unicode To String Demo");
Pane pane = new Pane();
// **** Musical Notation **** //
String[] musicArray = {"2669", "266A", "266B", "266C", "266D", "266E", "266F"};
String musicStr = unicodeToStr(musicArray);
Text notes = new Text(30, 100, musicStr );
notes.setFont(new Font(100));
notes.setFill(Color.BLACK);
pane.getChildren().add(notes);
Scene scene = new Scene(pane, 680, 360, Color.WHITE);
stage.setScene(scene);
stage.show();
}
Output:
3 Likes
Hello @bachrock,
Find a suitable font (web search found the ones below) with music notes.
I did a bit of searching for insight on how to display Unicode characters with Processing and Java to achieve this.
This works with Processing 4.3 Java:
PFont myFont;
import java.lang.Character.*;
void setup()
{
size(1100, 1000);
background(244);
// Uncomment the following two lines to see the available fonts
//String[] fontList = PFont.list();
//printArray(fontList);
//myFont = createFont("Symbola.ttf", 64, true);
myFont = createFont("Musisync-KVLZ.ttf", 64, true);
textFont(myFont);
textAlign(CENTER, BOTTOM);
fill(0);
//int fontStart = 0x1D100; // Symbola font
int fontStart = 0x0000; // Musisync-KVLZ font
for(int i=0; i<200; i++)
{
int u = fontStart+i;
char [] uc = Character.toChars(u);
String s = new String (uc);
//text(s, i%20*50+70, (i/20)*80+100); // rows and columns
text(s, random(10, width-10), random(10, height-10)); //random
}
}
References:
- https://www.fontspace.com/category/notation
- https://www.fontspace.com/musisync-font-f3723
- https://unicode.org/charts/PDF/U1D100.pdf
Above code also worked with Symbola font for other characters:
:)
1 Like
Hello again @bachrock,
You could also try to find some suitable images or SVG shapes.
Some work and others did not; I had some success with the Wikipedia ones.
Example:
PShape sh;
size(200, 200);
sh = loadShape("https://upload.wikimedia.org/wikipedia/commons/0/07/8thNote.svg");
shapeMode(CENTER);
shape(sh, 100, 100);
Reference:
- Wikipedia:Image use policy - Wikipedia
- Commons:Free media resources - Wikimedia Commons
- Category:SVG musical notation - Wikimedia Commons
Have fun!
:)
1 Like