Code Sketch
sattyaprakash piano
Category: Art
cleari()
// =====================================================
// VIRTUAL PIANO - KOJO
// =====================================================
// Background
setBackground(ColorMaker.hsl(220, 0.35, 0.12))
// -----------------------------------------------------
// Piano sound files
// -----------------------------------------------------
val pianoURL = "https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/acoustic_grand_piano-mp3/"
preloadMp3(pianoURL + "C4.mp3")
preloadMp3(pianoURL + "D4.mp3")
preloadMp3(pianoURL + "E4.mp3")
preloadMp3(pianoURL + "F4.mp3")
preloadMp3(pianoURL + "G4.mp3")
preloadMp3(pianoURL + "A4.mp3")
preloadMp3(pianoURL + "B4.mp3")
preloadMp3(pianoURL + "C5.mp3")
preloadMp3(pianoURL + "Cs4.mp3")
preloadMp3(pianoURL + "Ds4.mp3")
preloadMp3(pianoURL + "Fs4.mp3")
preloadMp3(pianoURL + "Gs4.mp3")
preloadMp3(pianoURL + "As4.mp3")
// -----------------------------------------------------
// Title
// -----------------------------------------------------
val title = Picture {
setPenColor(white)
setPenFontSize(35)
write("VIRTUAL PIANO")
}
title.setPosition(-170, 250)
draw(title)
// -----------------------------------------------------
// Subtitle
// -----------------------------------------------------
val subtitle = Picture {
setPenColor(ColorMaker.hsl(200, 0.7, 0.8))
setPenFontSize(16)
write("Click the keys to play music")
}
subtitle.setPosition(-150, 215)
draw(subtitle)
// =====================================================
// WHITE KEYS
// =====================================================
val keyWidth = 65
val keyHeight = 230
val startX = -260
val startY = -100
// -----------------------------------------------------
// C4
// -----------------------------------------------------
val C4 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("C")
}
C4.setPosition(startX, startY)
draw(C4)
C4.onMouseClick { (x, y) =>
playMp3(pianoURL + "C4.mp3")
}
// -----------------------------------------------------
// D4
// -----------------------------------------------------
val D4 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("D")
}
D4.setPosition(startX + 65, startY)
draw(D4)
D4.onMouseClick { (x, y) =>
playMp3(pianoURL + "D4.mp3")
}
// -----------------------------------------------------
// E4
// -----------------------------------------------------
val E4 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("E")
}
E4.setPosition(startX + 130, startY)
draw(E4)
E4.onMouseClick { (x, y) =>
playMp3(pianoURL + "E4.mp3")
}
// -----------------------------------------------------
// F4
// -----------------------------------------------------
val F4 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("F")
}
F4.setPosition(startX + 195, startY)
draw(F4)
F4.onMouseClick { (x, y) =>
playMp3(pianoURL + "F4.mp3")
}
// -----------------------------------------------------
// G4
// -----------------------------------------------------
val G4 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("G")
}
G4.setPosition(startX + 260, startY)
draw(G4)
G4.onMouseClick { (x, y) =>
playMp3(pianoURL + "G4.mp3")
}
// -----------------------------------------------------
// A4
// -----------------------------------------------------
val A4 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("A")
}
A4.setPosition(startX + 325, startY)
draw(A4)
A4.onMouseClick { (x, y) =>
playMp3(pianoURL + "A4.mp3")
}
// -----------------------------------------------------
// B4
// -----------------------------------------------------
val B4 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("B")
}
B4.setPosition(startX + 390, startY)
draw(B4)
B4.onMouseClick { (x, y) =>
playMp3(pianoURL + "B4.mp3")
}
// -----------------------------------------------------
// C5
// -----------------------------------------------------
val C5 = Picture {
setPenColor(black)
setPenThickness(3)
setFillColor(white)
repeat(2) {
forward(keyHeight)
right(90)
forward(keyWidth)
right(90)
}
setPosition(10, 20)
setPenColor(black)
setPenFontSize(18)
write("C")
}
C5.setPosition(startX + 455, startY)
draw(C5)
C5.onMouseClick { (x, y) =>
playMp3(pianoURL + "C5.mp3")
}
// =====================================================
// BLACK KEYS
// =====================================================
val blackWidth = 40
val blackHeight = 140
// -----------------------------------------------------
// C#4
// -----------------------------------------------------
val Cs4 = Picture {
setPenColor(black)
setPenThickness(2)
setFillColor(ColorMaker.hsl(0, 0, 0.08))
repeat(2) {
forward(blackHeight)
right(90)
forward(blackWidth)
right(90)
}
setPosition(7, 20)
setPenColor(white)
setPenFontSize(14)
write("C#")
}
Cs4.setPosition(startX + 42, startY + 90)
draw(Cs4)
Cs4.onMouseClick { (x, y) =>
playMp3(pianoURL + "Cs4.mp3")
}
// -----------------------------------------------------
// D#4
// -----------------------------------------------------
val Ds4 = Picture {
setPenColor(black)
setPenThickness(2)
setFillColor(ColorMaker.hsl(0, 0, 0.08))
repeat(2) {
forward(blackHeight)
right(90)
forward(blackWidth)
right(90)
}
setPosition(7, 20)
setPenColor(white)
setPenFontSize(14)
write("D#")
}
Ds4.setPosition(startX + 107, startY + 90)
draw(Ds4)
Ds4.onMouseClick { (x, y) =>
playMp3(pianoURL + "Ds4.mp3")
}
// -----------------------------------------------------
// F#4
// -----------------------------------------------------
val Fs4 = Picture {
setPenColor(black)
setPenThickness(2)
setFillColor(ColorMaker.hsl(0, 0, 0.08))
repeat(2) {
forward(blackHeight)
right(90)
forward(blackWidth)
right(90)
}
setPosition(7, 20)
setPenColor(white)
setPenFontSize(14)
write("F#")
}
Fs4.setPosition(startX + 237, startY + 90)
draw(Fs4)
Fs4.onMouseClick { (x, y) =>
playMp3(pianoURL + "Fs4.mp3")
}
// -----------------------------------------------------
// G#4
// -----------------------------------------------------
val Gs4 = Picture {
setPenColor(black)
setPenThickness(2)
setFillColor(ColorMaker.hsl(0, 0, 0.08))
repeat(2) {
forward(blackHeight)
right(90)
forward(blackWidth)
right(90)
}
setPosition(7, 20)
setPenColor(white)
setPenFontSize(14)
write("G#")
}
Gs4.setPosition(startX + 302, startY + 90)
draw(Gs4)
Gs4.onMouseClick { (x, y) =>
playMp3(pianoURL + "Gs4.mp3")
}
// -----------------------------------------------------
// A#4
// -----------------------------------------------------
val As4 = Picture {
setPenColor(black)
setPenThickness(2)
setFillColor(ColorMaker.hsl(0, 0, 0.08))
repeat(2) {
forward(blackHeight)
right(90)
forward(blackWidth)
right(90)
}
setPosition(7, 20)
setPenColor(white)
setPenFontSize(14)
write("A#")
}
As4.setPosition(startX + 367, startY + 90)
draw(As4)
As4.onMouseClick { (x, y) =>
playMp3(pianoURL + "As4.mp3")
}
// =====================================================
// INFORMATION PANEL
// =====================================================
val info = Picture {
setPenColor(ColorMaker.hsl(45, 0.9, 0.7))
setPenFontSize(15)
write("C D E F G A B C")
}
info.setPosition(-145, -150)
draw(info)
// -----------------------------------------------------
// Keyboard hint
// -----------------------------------------------------
val hint = Picture {
setPenColor(ColorMaker.hsl(200, 0.5, 0.8))
setPenFontSize(13)
write("Click any piano key to play its sound")
}
hint.setPosition(-150, -190)
draw(hint)
// =====================================================
// END
// =====================================================
println("======================================")
println(" VIRTUAL PIANO")
println("======================================")
println("Click the piano keys to play.")
println("White keys : C D E F G A B C")
println("Black keys : C# D# F# G# A#")
println("======================================")
