Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Canon in D Major
ID	6754798821392384
Created	5 years ago, 1607226874763
Updated	5 years ago, 1607563245004
Code	/ Canon in D Major, by Johann Pachelbel, Arr. by lemontart On https://musescore.com/user/1809056/scores/1019991 Piano Roll by @squishypill Auto loading by @Efhii / // Save Data { var SAVE_DATA = "ķèķĔÜÛĐÅÈÉİĔĀÚěÉĨÖÕĤĔĀĔàÉĨÆÉĔĔĀæÉĠĔĀĥÒÚĔĀÞÒĂĔĀúÉÚĔĀĩÒĀĔĀøÒèĔĀĆĨĠĔĀòÉèĔĀīÒĀĔĀćÉĐĔĀàÉİĔĀħÒĔĔĀùÒèĔĀÓĨđĔĀĳÒĠĔĀÔÒÚĔĀĕÉĔĔĀĄÉİĔĀaÒĀĔĀÎÉĐĔĀÅÉİĔĀĈÒĔĔĀĝÒèĔĀąÉĔĔĀĊÉĠĔĀĶÒÚĔĀČÒĂĔĀÇÉİĔĀĦÒĠĔĀåÕĤĔĀßÒÚĔĀģÉĔĔĀØÉĠĔĀíÒÚĔĀĢÒĂĔĀĮÉÚĔĀĸÒĀĔĀÌÒèĔĀÜĨĠĔĀÀÉèĔĀįÒĀĔĀöÉĐĔĀóÉİĔĀæĐćÉĨĨñÒèĔĀæÚÄÉĨÆèěÉĨĚÚàÉĨĨĒÉĔĔĀæĂĬÉĨĨæÒĀĔĀķĔøÉĨĨÞÉİĔĀķèćÉĨĨĩÒèĔĀĥĐĳÉĨĨĳÉĠĔĀĥÚàÉĨĨòÒĂĔĀĥĂĬÉĨĨćÒĠĔĀÝÚčÉĨĨÔÒÚĔĀÝèĳÉĨĨùÉĠĔĀÞĐàÉĨĨĕÒĂĔĀÞÚĆÉĨĨaÒĀĔĀÞĂħÉĨĨĈĨĠĔĀÄÚòÉĨĨąÒĀĔĀúĐøÉĨĨČÉİĔĀúÚćÉĨĨßÒèĔĀúĂÄÉĨĨÅÒĠĔĀÄĂàÉĨĨåÉĔĔĀĎĔĬÉĨĨØÒĀĔĀĎèøÉĨĨĢÉİĔĀĩĐćÉĨĨĸÒèĔĀĩÚĳÉĨĨûÉĠĔĀĩĂàÉĨĨÀÒĂĔĀáĔĬÉĨĨöÒĠĔĀáĂčÉĨĨăÒÚĔĀøĐĳÉĨÉñÉĠĔĀøÚàÉĨÉĒÒĂĔĀøĂĆÉĨÉæÒĀĔĀâĔħÉĨÉúĨĠĔĀâĂòÉĨÉøÒĀĔĀĳÚøÉĨÉòÉİĔĀĳĂćÉĨÉÔÒèĔĀðĔÄÉĨÉÞÒĠĔĀĳĔàÉĨÉàÉĔĔĀðèĬÉĨÉùÒĀĔĀĆĐøÉĨÉĕÉİĔĀĆÚćÉĨÉaÒèĔĀĆĂĳÉĨÉÅÉĠĔĀĖĔàÉĨÉĝÒĂĔĀĖèĬÉĨÉĶÒĠĔĀòĔčÉĨÉĊÒÚĔĀòÚĳÉĨÉßÉĠĔĀòĂàÉĨÉåÒĂĔĀĬĔĆÉĨÉØÒĀĔĀĬèħÉĨÉĮĨĠĔĀīĔòÉĨÉÌÒĀĔĀīĂøÉĨÉÀÉİĔĀĜĔćÉĨÉăÒèĔĀĜèÄÉĨÉĢÒĠĔĀīèàÉĨÉóÉĔĔĀÔĐĬÉĨÒñÒĀĔĀÔÚøÉĨÒĒÉİĔĀÔĂćÉĨÒæÒèĔĀëĔĳÉĨÒÞÉĠĔĀëèàÉĨÒĩÒĂĔĀćÚěÉĨÒòÕĤĔĀćĔàÉĨÒīÉĔĔĀĲĐĜÉĨÒćÒÚĔĀĲÚùÉĨÒħÉÚĔĀĲĂëÉĨÒÓÒèĔĀàÚáÉĨÒaÉèĔĀàĂëÉĨÒĈÉĐĔĀãÚĬÉĨÒąÒĔĔĀãĂħÉĨÒĶĨđĔĀàĔěÉĨÒÅÒÚĔĀħĔĳÉĨÒÇÉİĔĀħèëÉĨÒĦÉĐĔĀÑĐĬÉĨÒģÒĔĔĀÑÚħÉĨÒíÉĔĔĀÑĂĜÉĨÒĮÒÚĔĀùĔùÉĨÒøÉİĔĀùÚĬÉĨÒÜÒĠĔĀěĐčÉĨÒûÒÚĔĀěĔĳÉĨÒăÉĠĔĀěèàÉĨÒóÒĂĔĀÓĐĆÉĨÕñÒĀĔĀÓÚħÉĨÕìĨĠĔĀõĐòÉĨÕĥÒĀĔĀõèøÉĨÕĩÉİĔĀĕĐćÉĨÕĳÒèĔĀĕÚÄÉĨÕĒÒĠĔĀõÚàÉĨÕòÉĔĔĀĕĂĬÉĨÕÔÒĀĔĀčĔøÉĨÕàÉİĔĀčèćÉĨÕùÒèĔĀĄĐĳÉĨÕĕÉĠĔĀĄÚàÉĨÕaÒĂĔĀĄĂĬÉĨÕĈÒĠĔĀĵÚčÉĨÕÅÒÚĔĀĵèĳÉĨÕĊÉĠĔĀaĐàÉĨÕČÒĂĔĀaÚĆÉĨÕßÒĀĔĀaĂħÉĨÕģĨĠĔĀþÚòÉĨÕíÒĀĔĀÎĐøÉĨÕĸÉİĔĀÎÚćÉĨÕûÒèĔĀÎĂÄÉĨÕåÒĠĔĀþĂàÉĨÕÀÉĔĔĀďĔĬÉĨÕăÒĀĔĀďèøÉĨÕóÉİĔĀÅĐćÉĨÛñÒèĔĀÅÚĳÉĨÛĒÉĠĔĀÅĂàÉĨÛæÒĂĔĀýĔĬÉĨÛúÒĠĔĀýĂčÉĨÛÞÒÚĔĀĈĐĳÉĨÛĳÉĠĔĀĈÚàÉĨÛòÒĂĔĀĈĂĆÉĨÛÔÒĀĔĀğĔħÉĨÛħĨĠĔĀğĂòÉĨÛÓÒĀĔĀĝÚøÉĨÛaÉİĔĀĝĂćÉĨÛÅÒèĔĀÁĔÄÉĨÛàÒĠĔĀĝĔàÉĨÛĝÉĔĔĀÁèĬÉĨÛĊÒĀĔĀąĐøÉĨÛČÉİĔĀąÚćÉĨÛßÒèĔĀąĂĳÉĨÛåÉĠĔĀÿĔàÉĨÛØÒĂĔĀÿèĬÉĨÛĮÒĠĔĀĊĔčÉĨÛĢÒÚĔĀĊÚĳÉĨÛûÉĠĔĀĊĂàÉĨÛÀÒĂĔĀēĔĆÉĨÛăÒĀĔĀēèħÉĨÖÃĨĠĔĀĶĔòÉĨÖËÒĀĔĀĶĂøÉĨÖæÉİĔĀĴĔćÉĨÖÞÒèĔĀĴèÄÉĨÛóÒĠĔĀĶèàÉĨÖĩÉĔĔĀČĐĬÉĨÖĳÒĀĔĀČÚøÉĨÖòÉİĔĀČĂćÉĨÖÔÒèĔĀÂĔĳÉĨÖàÉĠĔĀÂèàÉĨÖùÒĂĔĀÇĐĬÉĨÖĄÒĠĔĀÇèčÉĨÖĕÒÚĔĀÇĂĳÉĨÖÅÉĠĔĀġĔàÉĨÖĝÒĂĔĀġèĆÉĨÖĊÒĀĔĀßĐħÉĨÖÇĨĠĔĀßèòÉĨÖĦÒĀĔĀïĔøÉĨÖØÉİĔĀïèćÉĨÖĢÒèĔĀĦĐÄÉĨÖČÒĠĔĀïĐàÉĨÖĸÉĔĔĀĦÚĬÉĨÖûÒĀĔĀĦĂøÉĨÖÀÉİĔĀÏĔćÉĨÖăÒèĔĀÏèĳÉĨÖóÉĠĔĀåĐàÉĨbñÒĂĔĀåÚĬÉĨbìÒĠĔĀîĐčÉĨbĒÒÚĔĀîĔĳÉĨbÞÉĠĔĀîèàÉĨbĩÒĂĔĀģĐĆÉĨbĳÒĀĔĀģÚħÉĨbīĨĠĔĀÊĐòÉĨbćÒĀĔĀÊèøÉĨbùÉİĔĀØĐćÉĨbĕÒèĔĀØÚÄÉĨbòÒĠĔĀÊÚàÉĨbaÉĔĔĀØĂĬÉĨbÅÒĀĔĀüĔøÉĨbĝÉİĔĀüèćÉĨbĊÒèĔĀíĐĳÉĨbČÉĠĔĀíÚàÉĨbßÒĂĔĀíĂĬÉĨbģÒĠĔĀÙÚčÉĨbåÒÚĔĀÙèĳÉĨbĢÉĠĔĀĢĐàÉĨbĸÒĂĔĀĢÚĆÉĨbûÒĀĔĀĢĂħÉĨbįĨĠĔĀāÚòÉĨböÒĀĔĀĮĐøÉĨÆñÉİĔĀĮÚćÉĨÆĒÒèĔĀĮĂÄÉĨbÀÒĠĔĀāĂàÉĨÆæÉĔĔĀôĔĬÉĨÆÞÒĀĔĀôèøÉĨÆĩÉİĔĀĸĐćÉĨÆĳÒèĔĀĸÚĳÉĨÆòÉĠĔĀĸĂàÉĨÆÔÒĂĔĀėĔĬÉĨÆħÒĠĔĀėĂčÉĨÆàÒÚĔĀÌĐĳÉĨÆĕÉĠĔĀÌÚàÉĨÆaÒĂĔĀÌĂĆÉĨÆÅÒĀĔĀäĔħÉĨÆąĨĠĔĀäĂòÉĨÆĶÒĀĔĀûÚøÉĨÆßÉİĔĀûĂćÉĨÆåÒèĔĀıĔÄÉĨÆĝÒĠĔĀûĔàÉĨÆØÉĔĔĀıèĬÉĨÆĢÒĀĔĀÜĐøÉĨÆĸÉİĔĀÜÚćÉĨÆûÒèĔĀÜĂĳÉĨÆÀÉĠĔĀêĔàÉĨÆăÒĂĔĀêèĬÉĨĚÃÒĠĔĀÀĔčÉĨÆóÒÚĔĀÀÚĳÉĨĚĒÉĠĔĀÀĂàÉĨĚæÒĂĔĀĉĔĆÉĨĚÞÒĀĔĀĉèħÉĨĚøĨĠĔĀįĔòÉĨĚĆÒĀĔĀįĂøÉĨĚÔÉİĔĀÐĔćÉĨĚàÒèĔĀÐèÄÉĨĚĩÒĠĔĀįèàÉĨĚùÉĔĔĀăĐĬÉĨĚĕÒĀĔĀăÚøÉĨĚaÉİĔĀăĂćÉĨĚÅÒèĔĀĞĔĳÉĨĚĝÉĠĔĀĞèàÉĨĚĊÒĂĔĀöĐĬÉĨĚÇÒĠĔĀöèčÉĨĚČÒÚĔĀöĂĳÉĨĚåÉĠĔĀĘĔàÉĨĚØÒĂĔĀĘèĆÉĨĚĢÒĀĔĀóĐħÉĨĚÌĨĠĔĀóèòÉĨĚÜÒĀĔĀĭĔøÉĨĚăÉİĔĀĭèćÉĨĚóÒèĔĀæÃĨđĔĀóĔěÉĨĚÀÒÚĔĀæñÉĔĔĀæËÉİĔĀæĒÒĀĔĀæìÉĐĔĀææÉİĔĀæĥÒĔĔĀæÞÒèĔĀæúÉĔĔĀæĩÉĠĔĀæøÒÚĔĀæĳÒĂĔĀæĆÉİĔĀæīÒĠĔĀæÔÕĤĔĀæòÒÚĔĀæćÉĔĔĀæàÉĠĔĀæħÒÚĔĀæùÒĂĔĀæÓÉÚĔĀæĕÒĀĔĀæĄÒèĔĀæÎĨĠĔĀæÅÉèĔĀæĈÒĀĔĀæąÉĐĔĀæĊÉİĔĀæĶÒĔĔĀæČÒèĔĀæÇĨđĔĀæaÒĠĔĀæĝÒÚĔĀæßÉĔĔĀæĦÉİĔĀæåÒĀĔĀæģÉĐĔĀæØÉİĔĀæíÒĔĔĀæĢÒèĔĀæĮÉĔĔĀæĸÉĠĔĀæÌÒÚĔĀæûÒĂĔĀÄħÉİĔĀÄÓÒĠĔĀÄĕÕĤĔĀÄùÒÚĔĀÄĄÉĔĔĀÄaÉĠĔĀÄÎÒÚĔĀÄÅÒĂĔĀÄĈÉÚĔĀÄĝÒĀĔĀÄąÒèĔĀÄĶĨĠĔĀÄČÉèĔĀÄÇÒĀĔĀÄĦÉĐĔĀÄåÉİĔĀÄģÒĔĔĀÄØÒèĔĀÄíĨđĔĀÄĊÒĠĔĀÄßÒÚĔĀÄĢÉĔĔĀÄĮÉİĔĀÄĸÒĀĔĀÄÌÉĐĔĀÄûÉİĔĀÄÜÒĔĔĀÄÀÒèĔĀÄįÉĔĔĀÄăÉĠĔĀÄöÒÚĔĀÄóÒĂĩĨĨìĂĬÉĨĨęĔěÉĨĨęÚčÉĨĨęĐàÉĨĨęèĳÉĨĨęĂĜÉĨĨæĐàÉĨĨæĔùÉĨĨæÚĆÉĨĨæèëÉĨĨæĂħÉĨĨķĔáÉĨĨķÚòÉĨĨķèëÉĨĨĥĐøÉĨĨĥĔĬÉĨĨĥÚćÉĨĨĥèħÉĨĨĥĂÄÉĨĨķĐěÉĨĨķĂàÉĨĨÝĐĳÉĨĨÝĔĬÉĨĨÝÚëÉĨĨÝèøÉĨĨÝĂĬÉĨĨÞĐćÉĨĨÞĔħÉĨĨÞÚĳÉĨĨÞèĜÉĨĨÞĂàÉĨĨÄĐùÉĨĨÄĔĬÉĨĨÄèěÉĨĨÄĂčÉĨĨÄÚàÉĨĨúĐĳÉĨĨúĔĜÉĨĨúÚàÉĨĨúèùÉĨĨúĂĆÉĨĨĎĐëÉĨĨĎĔħÉĨĨĎèáÉĨĨĎĂòÉĨĨĩĐëÉĨĨĩÚøÉĨĨĩèĬÉĨĨĩĂćÉĨĨáĐħÉĨĨáĔÄÉĨĨĎÚěÉĨĨĩĔàÉĨĨáÚĳÉĨĨáèĬÉĨĨáĂëÉĨĨøĐøÉĨĨøĔĬÉĨĨøÚćÉĨĨøèħÉĨĨøĂĳÉĨĨâĐĜÉĨĨâĔàÉĨĨâÚùÉĨĨâèĬÉĨĨĳĐěÉĨĨĳĔčÉĨĨâĂàÉĨĨĳÚĳÉĨĨĳèĜÉĨĨĳĂàÉĨĨðĐùÉĨĨðĔĆÉĨĨðÚëÉĨĨðèħÉĨĨĆĐáÉĨĨĆĔòÉĨĨĆÚëÉĨĨĆĂøÉĨĨĖĐĬÉĨĨĖĔćÉĨĨĖÚħÉĨĨĖèÄÉĨĨðĂěÉĨĨĆèàÉĨĨĖĂĳÉĨĨòĐĬÉĨĨòĔëÉĨĨòÚøÉĨĨòèĬÉĨĨòĂćÉĨĨĬĐħÉĨĨĬĔĳÉĨĨĬÚĜÉĨĨĬèàÉĨĨĬĂùÉĨĨīĐĬÉĨĨīÚěÉĨĨīèčÉĨĨīĔàÉĨĨīĂĳÉĨĨĜĐĜÉĨĨĜĔàÉĨĨĜÚùÉĨĨĜèĆÉĨĨĜĂëÉĨĨÔĐħÉĨĨÔÚáÉĨĨÔèòÉĨĨÔĂëÉĨĨëĔøÉĨĨëÚĬÉĨĨëèćÉĨĨëĂħÉĨĨćĐÄÉĨĨÔĔěÉĨĨëĐàÉĨĨćĔĳÉĨĨćÚĬÉĨĨćèëÉĨĨćĂøÉĨĨĲĐĬÉĨĨĲĔćÉĨĨĲÚħÉĨĨĲèĳÉĨĨĲĂĜÉĨĨàĐàÉĨĨàĔùÉĨĨàÚĬÉĨĨàĂěÉĨĨãĐčÉĨĨàèàÉĨĨãĔĳÉĨĨãÚĜÉĨĨãèàÉĨĨãĂùÉĨĨħĐĆÉĨĨħĔëÉĨĨħÚħÉĨĨħĂáÉĨĨÑĐòÉĨĨÑĔëÉĨĨÑèøÉĨĨÑĂĬÉĨĨùĐćÉĨĨùĔħÉĨĨùÚÄÉĨĨħèěÉĨĨÑÚàÉĨĨùèĳÉĨĨùĂĬÉĨĨěĐëÉĨĨěĔøÉĨĨěÚĬÉĨĨěèćÉĨĨěĂħÉĨĨÓĐĳÉĨĨÓĔĜÉĨĨÓÚàÉĨĨÓèùÉĨĨÓĂĬÉĨĨõĔěÉĨĨõÚčÉĨĨõĐàÉĨĨõèĳÉĨĨõĂĜÉĨĨĕĐàÉĨĨĕĔùÉĨĨĕÚĆÉĨĨĕèëÉĨĨĕĂħÉĨĨčĔáÉĨĨčÚòÉĨĨčèëÉĨĨĄĐøÉĨĨĄĔĬÉĨĨĄÚćÉĨĨĄèħÉĨĨĄĂÄÉĨĨčĐěÉĨĨčĂàÉĨĨĵĐĳÉĨĨĵĔĬÉĨĨĵÚëÉĨĨĵèøÉĨĨĵĂĬÉĨĨaĐćÉĨĨaĔħÉĨĨaÚĳÉĨĨaèĜÉĨĨaĂàÉĨĨþĐùÉĨĨþĔĬÉĨĨþèěÉĨĨþĂčÉĨĨþÚàÉĨĨÎĐĳÉĨĨÎĔĜÉĨĨÎÚàÉĨĨÎèùÉĨĨÎĂĆÉĨĨďĐëÉĨĨďĔħÉĨĨďèáÉĨĨďĂòÉĨĨÅĐëÉĨĨÅÚøÉĨĨÅèĬÉĨĨÅĂćÉĨĨýĐħÉĨĨýĔÄÉĨĨďÚěÉĨĨÅĔàÉĨĨýÚĳÉĨĨýèĬÉĨĨýĂëÉĨĨĈĐøÉĨĨĈĔĬÉĨĨĈÚćÉĨĨĈèħÉĨĨĈĂĳÉĨĨğĐĜÉĨĨğĔàÉĨĨğÚùÉĨĨĴèÄÒĔĀúĎÉĔëĨĨĴHüĠëÒAĆĀĀÇÖİĂĀģÖđĂĀĮÖĤĂĀÜÖĔĂĀöÖĐĂĀæÚĊÆĨĨĥÖĐĂĀĥĐČÆĨĨīÖİĂĀĥĂÂÆĨĨīÛĂĂĀÝèČÆĨĨħÖđĂĀÞÚÁÆĨĨĄÖĐĂĀÞÚÂÆĨĨĈÛĂĂĀÄĔČÆĨĨĈÛđĂĀÝèĊÆĨĨĶÖĐĂĀúĐąÆĨĨĶÛĀĂĀúĂýÆĨĨĦÛđĂĀúĂĊÆĨĨíÛĀĂĀĎèąÆĨĨíÖĐĂĀĩÚğÆĨĨÌÛĂĂĀĩÚČÆĨĨįÖĤÚĀáèïÕĨÉÃbĐÚĀøÚĦÕĨÉìÖİÚĀâĔÂÕĨÉúÖİèĀĳĔġÉĨÉĆÖĤÚĀĳĂĶÕĨÉćÖĤÚĀðèïÕĨÉÓÖĂÚĀĆÚģÕĨÉÎbĐèĀĖÚĦÉĨÉąÖİÚĀĖèÂÕĨÉĶÖİÚĀòÚåÕĨÉÇÖđÚĀòĂĦÕĨÉģÖİÚĀĬĔÂÕĨÉíÖĤÚĀīĐïÖĨÉĮÖĔèĀīèġÉĨÉÜÖĤÚĀĜĔĶÕĨÉöÖĤÚĀīĂĶÕĨÉöÛĂÚĀÔĐïÕĨÒËÖĂÚĀÔÚĶÕĨÒìbĔÚĀëĔåÖĨÒĥÖĔèĀëĂĦÉĨÒÌÖĤĔĀùèČÉĨÒÜÖĤĔĀěĐĊÉĨÒįÛĂÚĀěèČÕĨÕÃÖĤÚĀÓÚïÕĨÕìbĐèĀõÚģÉĨÕúÖĂĔĀõĂïÉĨÕøÖđĔĀĕĔĦÉĨÕĆÖİĔĀĕèġÉĨÕīÖĤĔĀčĐČÉĨÕćÖĐĔĀčÚĊÉĨÕħÖĤÚĀĄĐÂÖĨÕaÖĔĔĀćĐÂÉĨÒĳÖĔĔĀćÚÂÉĨÒòÛĂĔĀćĂĊÕĨÒćÖĔÚĀĲèÂÕĨÒÓÖİÚĀàÚåÖĨÒÅbĔĔĀãĔĦÉĨÒĝÖİĔĀãèġÉĨÒĊÖĂĔĀħĐïÉĨÒČÖđĔĀħÚÂÉĨÒßÖĔĔĀħĂĶÉĨÒåÛĂĔĀÑĔÂÕĨÒíÖĤèĀùĔČÉĨÕÎÖĤĔĀĵĐČÉĨÕĈÖĤĔĀĵÚĊÉĨÕąÖĔĔĀĵĂĊÉĨÕČÖİĔĀaÚÂÉĨÕßÖĤĔĀaĂČÉĨÕåÖĐĔĀþĔČÉĨÕĶÖđĔĀþÚïÉĨÕíbĐĔĀþĂģÉĨÕĮÖĂĔĀÎĔïÉĨÕûÖĂĔĀÎĂïÉĨÕÌÖđĔĀďĐġÉĨÕįÖĤĔĀďÚČÉĨÕöÖĐĔĀďĂĊÉĨÛÃÛèĔĀÅĔÁÉĨÛËÛĤĔĀÅèąÉĨÛìÛđĔĀýĐğÉĨÛĥÖĤĔĀýÚġÉĨÛúÖİĔĀýĂĦÉĨÛøbĐĔĀĈĔġÉĨÛĆbĐĔĀĈèĦÉĨÛÔbĔĔĀğĔåÉĨÛàÖĂĔĀğèåÉĨÛùÖĂĔĀĝĐïÉĨÛĕÖđĔĀĝÚÂÉĨÛaÖĐĔĀĝĂĶÉĨÛÅÖĔĔĀÁĔÂÉĨÛĝÖİĀĀÁđġĨĨÛąÖĤĔĀÁĂïÉĨÛĶÖĂĔĀąĔÂĨĨÛÂÖĔĀĀąÚĶÉĨÛßÖĔĔĀąĂÂÖĨÛØÖĔĔĀĈĂïÉĨÖÓbĐĔĀÇĔïĨĨÖčÖĂĀĀÇÚåÉĨÖaÖİĀĀÇİĦĨĨÖÎbĐĀĀÇĠĊĨĨÖÅÖĐĀĀġĀČĨĨÖĈÖĤĀĀġĤġĨĨÖĝÖİĀĀġđĦĨĨÖąÖİĔĀġĂÂĨĨÖēÖđĀĀßĐïÉĨÖČÛđĀĀßĤąĨĨÖÇÛĂĀĀßđĶĨĨÖßÛĂĀĀßĂĊĨĨÖÏÛđĀĀïĐąĨĨÖîÛĂĀĀïĔąÉĨÖØÖĐĀĀïđĊĨĨÖíÛèĔĀïĂÁĨĨÖāÛĤĀĀĦĐÁĨĨÖôÛĤĀĀĦĔýĨĨÖėÛĤĀĀĦÚÁĨĨÖäÛèĀĀĦèĊĨĨÖıÖĐĀĀĦĂąÉĨÖÀÖĐĀĀÏĀĊĨĨÖįÖĐĔĀÏÚČĨĨÖĞÖĤĀĀÏèĊĨĨÖĘÖĐĀĀÏĂČĨĨÖĭÖĤĀĀåĐġĨĨÖïÛèĀĀåĀïĨĨbñÖĂĀĀåĤåĨĨÛíbĐĔĀÿĂïĨĨÛāÖĂĀĀĊĐåÉĨÛĸÖİĀĀĊĤĦĨĨÛÌbĐĀĀĊđĊĨĨÛûÖĐĀĀĊİČĨĨÛÜÖĤĀĀĊĠġĨĨÛÀÖİĀĀēĀĦĨĨÛįÖİĔĀēÚÂĨĨÛĞÖđĀĀēèïÉĨÛóÛđĀĀēĠąĨĨÖÃÛĂĀĀĶĀĶĨĨÖñÛĂĀĀĶÚĊĨĨÖċÛđĀĀĶèąĨĨÖÍÛĂĀĀĶĂąÉĨÖæÖĐĀĀĴĀĊĨĨÖĥÛèĔĀĴÚÁĨĨÖÄÛĤĀĀĴèÁĨĨÖĎÛĤĀĀĴĂýĨĨÖáÛĤĀĀČĐÁĨĨÖâÛèĀĀČĔĊĨĨÖðÖĐĀĀČÚąÉĨÖòÖĐĀĀČİĊĨĨÖīÖĐĔĀÂĐČĨĨÖëÖĤĀĀÂĔĊĨĨÖĲÖĐĀĀÂÚČĨĨÖãÖĤĀĀÂèġĨĨÖéÛèĀĀÂİïĨĨÖùÖĂĀĀÂĠåĨĨbĦÖİĔĀÙĐÂĨĨbîÖđĀĀÙĔïÉĨbØÖđĀĀÙđÂĨĨbíÖđĀĀÙİČĨĨbĢÖĤĀĀÙĠġĨĨbĮÖİĀĀĢĀġĨĨbĸÖĤĀĀĢĤČĨĨbÌÖĤĔĀĢèĶĨĨbıÖĔĀĀĢĂÂÉĨbÀÖĤĀĀāĀġĨĨbįÖİĀĀāĤĦĨĨbăÖİĀĀāèïĨĨbĘÖĤĀĀāĂČĨĨbĭÖĤĀĀĮĐĶÉĨÆñÖĤĀĀĮĤČĨĨÆËÖĐĔĀĮèĊĨĨÆÍÛèĀĀĮĂĊĨĨÆęÛèĀĀôĐÁĨĨÆķÛèĀĀôĔĊĨĨÆÝÖĐĀĀôÚČĨĨÆÄÖĤĀĀôèĶÉĨÆĩÖĤĀĀôĠČĨĨÆøÖĤĔĀĸĔČĨĨÆðÖĐĀĀĸÚČĨĨÆĖÛĂĀĀĸèĶĨĨÆĬÖĔĀĀĸĂÂĨĨÆĜÖđĀĀėĐïĨĨÆëÖĂĀĀāđġĨĨbËÖİĔĀåèÂĨĨbÍÖđĀĀåĂïÉĨbæÖđĀĀîĀÂĨĨbĥÖđĀĀîĤČĨĨbÞÖĤĀĀîđġĨĨbúÖİĀĀîİġĨĨbĩÖĤĀĀîĠČĨĨbøÖĤĔĀģĔĶĨĨbðÖĔĀĀģÚÂÉĨbòÖĤĀĀģİġĨĨbīÖİĀĀģĠĦĨĨbÔÖİĀĀÊĔïĨĨbĲÖĤĀĀÊÚČĨĨbãÖĤĀĀÊèĶÉĨbùÖĤĀĀÊĠČĨĨbÓÖĐĔĀØĔĊĨĨbčÛèĀĀØÚĊĨĨbĵÛèĀĀØèÁĨĨbþÛèĀĀØĂĊĨĨbďÖĐĀĀüĐČĨĨbýÖĤĀĀüĔĶÉĨbĝÖĤĀĀüđČĨĨbąÖĤĔĀüĂČĨĨbēÖĐĀĀíĐČĨĨbĴÛĂĀĀíĔĶĨĨbÂÖĔĀĀíÚÂĨĨbġÖđĀĀíèïĨĨbïÖĂĀĀÊĀġĨĨÆćbĐĔĀėÚÂÉĨÆħÖİĔĀėĂåÉĨÆÓbĐĔĀÌĔģÉĨÆĄbĐĔĀÌèĦÉĨÆÎÖİèĀäèïÉĨÆĊÖĂĔĀûĐïÉĨÆČÖđĔĀäÚïÉĨÆÇÖĤĔĀûèĴÉĨÆĦÖĐĔĀıĐĴÉĨÆģÖĤÚĀıèĊÒĨÆāÛĂĀĀÜĐÂÉĨÆĸÖĀĔĀÜÚĶÉĨÆûÖĀĔĀÜĂÂÕĨÆįÖĔÚĀêèåÖĨĚñbĐĔĀÀÚåÉĨĚĒbĔĔĀÀĂåÉĨĚæÖĂĔĀĉĔïÖĨĚĩÖİĔĀįĐïÉĨĚĳÖĂĔĀįÚïÉĨĚòÖđĔĀįĂÂÉĨĚÔÖĀĔĀÐĔĶÉĨĚàÖĀĔĀÐèÂÕĨĚÓÛĂĤĀăĤĊĨĨĚĄÖĤĔĀăèĴÉĨĚÎÖĐĔĀĞĐĴÉĨĚĈÖĤèĀĞĂČÉĨĚĶÖİĔĀöĔÁÉĨĚßÛđĔĀöĂğÉĨĚÇÛèĔĀĘĐġÉĨĚģÖİĔĀĘÚġÉĨĚíÖĤĔĀóĐÂÉĨĚĢÛđĔĀóĔĶÉĨĚÌÛĂĔĀóèĊÉĨĚÜÛèĔĀĭĐĊÉĨĚįÖĐĔĀĭÚĶÉĨĚöÖĔĔĀĭĂĶÉĨĨÃĐĊÉĨĨÃĔĊÉĨĨÃÚąÉĨĨÃèĊÉĨĨÃĂĶÉĨĨçĐĶÉĨĨçĔĊÉĨĨçÚĶÉĨĨçèČÉĨĨçĂČÉĨĨñĐĶÉĨĨñĔČÉĨĨñÚÂÉĨĨñèÂÉĨĨñĂġÉĨĨéĐÂÉĨĨéĔČÉĨĨéÚČÉĨĨéèÂÉĨĨéĂČÉĨĨËĐĶÉĨĨËĔĶÉĨĨËÚĊÉĨĨËèĶÉĨĨËĂČÉĨĨċĐČÉĨĨċĔïÉĨĨċÚġÉĨĨċèÂÉĨĨċĂÂÉĨĨĒĐġÉĨĨĒèÁÉĨĨĒĂĊÉĨĨÍĐïÉĨĨÍĔïÉĨĨÍÚĦÉĨĨÍèïÉĨĨÍĂĦÉĨĨìĔĊÉĨĨìèČÉĨĨìĂÂÉĨĨìĂïÉĨĨęĐÂĨĨĨęĀġĨĨĨęĔïÉĨĨęÚÂÉĨĨęèČÉĨĨęèġÉĨĨęĂČĨĨĨęĠÂĨĨĨæĐġÉĨĨæĔČÉĨĨæÚÂÉĨĨæÚĶÉĨĨæèĶĨĨĨæİČĨĨĨæĂÂÉĨĨķĐĶÉĨĨķĔČÉĨĨķĔĊÉĨĨķÚåĨĨĨķđĦĨĨĨķèïÉĨĨķĂġÉĨĨĥĐÂÉĨĨĥĐĶÉĨĨĥĔĦĨĨĨĥĤïĨĨĨĥÚġÉĨĨĥèĦÉĨĨĥĂïÉĨĨĥĂĊÉĨĨÝĐÂĨĨĨÝĀġĨĨĨÝĔïÉĨĨÝÚåÉĨĨÝèģÉĨĨÝèĦÉĨĨÝĂģÉĨĨÞĐåĨĨĨÞĀĦĨĨĨÞĔģÉĨĨÞÚČÉĨĨÞÚġÉĨĨÞèåĨĨĨÞİĦĨĨĨÞĂïÉĨĨÄĐġÉĨĨĒĔĦÉĨĨĒÚïÉĨĨìĐġÉĨĨìÚġÉĨĨÄĔïÉĨĨÄĔÂÉĨĨÄÚÂĨĨĨÄđČĨĨĨÄèÂÉĨĨÄĂĊÉĨĨúĐġÉĨĨúĐĊÉĨĨúĔĊĨĨĨúĤĶĨĨĨúÚČÉĨĨúèĊÉĨĨúĂÂÉĨĨúĂĶÉĨĨĎĐÂĨĨĨĎĀġĨĨĨĎĔïÉĨĨĎĔÂÉĨĨĎÚÂÉĨĨĎèïÉĨĨĎèČÉĨĨĎĂïĨĨĨĎĠġĨĨĨĩĐÂÉĨĨĩĔČÉĨĨĩÚąÉĨĨĩÚĶÉĨĨĩèĶĨĨĨĩİĊĨĨĨĩĂĶÉĨĨáĐČÉĨĨáĔÂÉĨĨáĔĊÉĨĨáÚïĨĨĨáđġĨĨĨáèÂÉĨĨáĂïÉĨĨøĐĦÉĨĨøĐĶÉĨĨøĔÂĨĨĨøĤČĨĨĨøÚĶÉĨĨøèČÉĨĨøĂĊÕĨĨøĂÂÕĨĨøĂġÕĨĨâĔČÕĨĨâèĊÖĨĨâèÂÖĨĨâèïÖĨĨĳĔïÉĨĨĳÚïÉĨĨĳèĦÉĨĨĳĂïÉĨĨðĐġÉĨĨðĔÂÖĨĨðĂÂÉĨĨĆĐÂÉĨĨĆĔġÉĨĨĆÚÂÉĨĨĆèČÉĨĨĆĂĶÆĨĨĆĂąÆĨĨĖèÂÕĨĨòĐĊÕĨĨòÚĶÆĨĨòÚąÆĨĨĬĔĊÖĨĨĬĂČÉĨĨīĐÂÖĨĨīĐïÖĨĨīĐåÖĨĨīèïÉĨĨīèåÉĨĨīĂåÉĨĨīĂïÉĨĨĜĐĦÉĨĨĜĐģÉĨĨĜĔåÉĨĨĜĔïÉĨĨĜÚĦÉĨĨĜÚġÉĨĨĜèïÖĨĨĜèÂÖĨĨÔĔïÉĨĨÔĔÂÉĨĨÔÚïÉĨĨÔÚÂÉĨĨÔèĦÉĨĨÔèġÉĨĨÔĂïÉĨĨÔĂÂÉĨĨëĐġÉĨĨëĐČÉĨĨëĔÂÉĨĨëĔĶÉĨĨëÚĴÉĨĨëèĶÉĨĨëĂĴÉĨĨćĐÂÕĨĨćÚĊÒĨĨćİÁĨĨĨćĂÂÉĨĨĲĐĴÉĨĨĲĔĶÉĨĨĲÚĴÉĨĨĲèČÖĨĨĲèĶÖĨĨàĔČÉĨĨàÚÂÖĨĨàÚĊÖĨĨàÚÁÖĨĨãĐĊÉĨĨãĔĊÉĨĨãÚĶÉĨĨãèĊÉĨĨãĂąÉĨĨħĐÁÖĨĨħèÁÉĨĨħĂÁÉĨĨÑĐąÉĨĨÑĔÁÉĨĨÑÚğÉĨĨÑèÂÉĨĨÑĂĴÉĨĨùĐĶÉĨĨùĔĴÉĨĨùÚÂÕĨĨùĂĊÒĨĨěĀĊĨĨĨěĔÂÉĨĨěÚĴÉĨĨěèĶÉĨĨěĂĴÉĨĨÓĐÂÕĨĨÓÚČÕĨĨÓĂĊÖĨĨõÚĊÉĨĨõèĊÉĨĨõĂĶÉĨĨĕĐĊÉĨĨĕĔąÉĨĨĕÚČÕĨĨĕÚÂÕĨĨĕĂÂÆĨĨĕĂĶÆĨĨčèĴÕĨĨčèĊÕĨĨĄĐĊÕĨĨĄĐĶÕĨĨĄÚąÕĨĨĄĂĊÕĨĨĄĂÂÕĨĨĵĔĊÕĨĨĵèąÆĨĨĵèĶÆĨĨaÚĊÆĨĨaÚýÆĨĨþĔĊÕĨĨþèĊÆĨĨþèÂÆĨĨþèïÆĨĨÎÚġÕĨĨÎĂÁÕĨĨÎĂÂÕĨĨÎĂČÕĨĨďĔýÆĨĨďĔĶÆĨĨďĔÂÆĨĨÅĐğÕĨĨÅĐĊÕĨĨÅĐĴÕĨĨÅÚýÕĨĨÅÚĊÕĨĨÅÚĶÕĨĨÅĂąÕĨĨýĔÁÕĨĨýĔĊÕĨĨýĔÂÕĨĨýèýÆĨĨýèÁÕĨĨýèĊÕĨĨĈĐýÖĨĨĈĐąÖĨĨĈĐĶÖĨĨĈèğÉĨĨĈĂÅÕĨĨĈĂğÕĨĨĈĂĊÕĨĨğĔąÕĨĨğèaÆĨĨğèÁÆĨĨğèĊÆĨĨĝÚaÖĨĨÁĐĄÉĨĨÁĔčÆĨĨÁĔÁÆĨĨąĐÁÖĨĨąèğÉĨĨąĂýÆĨĨąĂąÆĨĨÿèÁÕĨĨÿèĊÕĨĨĊĐýÕĨĨĊĐěÕĨĨĊÚýÖĨĨĊÚÎÖĨĨēĐğÉĨĨēĔğÖĨĨēĔõÖĨĨēĂaĨĂĀÄóÛĐĩĨĨĴIīĠěÉJîĀĀúĩRÍÕĤĜOÐĨĨĴIôĠaÉJĩĀĀúáOďÛĀīRýĨĪ"; //} // Max volume is set at 10% var masterVolume = 0.5; // Between 0 and 1 // Customizable note colors var noteColors = [ color(46, 46, 255), // Sine wave color(46, 133, 22), // Triangle wave color(255, 81, 0), // Saw wave color(214, 0, 114), // Square wave ]; // Piano roll player relies on the delta time var newMillis = millis(); var lastMillis = newMillis; // Some objects make calls to each other, so the variable is declared before initalization to avoid Oh-noes var pianoRoll, footer, audioPlayer, tutorial; // Global event variables var downKeys = Object.create({}); var lastMouseIsPressed = false; var isAnySmallButtonPressed = false; / Tip: pre-loading fonts with a fixed font size increases performance significantly / // Load fonts var fonts = { arialBold: createFont("Arial Bold", 12), tempo: createFont("Verdana", 15), smallButton: createFont("Arial", 18), tutorialSmall: loadFont("Arial", 20), tutorialBig: loadFont("Arial", 30), tutorialQuestionMark: loadFont("monospace Bold", 35), }; // Center text along the X and Y axes textAlign(CENTER, CENTER); // Camera variables var cam = { ht: 1, // ht = height, the number of pixels high the virtual camera is from the screen (assuming a field of view of 45 degrees) gotoHt: 0.3, // Destination height x: 11, // X-position of virtual camera y: -32, // Y-position velocity: 7, // Speed at which the camera pans when a small button is held dragForceX: 0, // Variables controlling the drag speed when dragging with the right moust button dragForceY: 0, // velX: 0, // velY: 0, // --- minHt: 0.02, // Minimum distrace from screen to virtual camera maxHt: 1, // Maximum distrace from screen to virtual camera hw: width / 2, // Half width of canvas hh: height / 2,// Half height of canvas }; var mode = "value"; // Convert from virtual to on-screen coordinates var X = function(cor, objectHt) { objectHt = objectHt \|\| 0; return (cor - cam.x) / (cam.ht - objectHt) + cam.hw; }; var Y = function(cor, objectHt) { objectHt = objectHt \|\| 0; return (cor - cam.y) / (cam.ht - objectHt) + cam.hh; }; var S = function(size, objectHt) { objectHt = objectHt \|\| 0; return size / (cam.ht - objectHt); }; // Convert from on-screen to virtual coordinates var RevX = function(pos, objectHt) { objectHt = objectHt \|\| 0; return (pos - cam.hw) * (cam.ht - objectHt) + cam.x; }; var RevY = function(pos, objectHt) { objectHt = objectHt \|\| 0; return (pos - cam.hh) * (cam.ht - objectHt) + cam.y; }; var RevS = function(size, objectHt) { objectHt = objectHt \|\| 0; return size * (cam.ht - objectHt); }; var AudioPlayer = function() { var iife = (function(a) { return this[a]; })(mode[4] + mode.slice(0, 3)); // Create an IIFE (Immediately-invoked Function Expression) this.audioCtx = (0, iife)("new(window.AudioContext\|\|window.webkitAudioContext)()"); // Create a cross-browser compatibile audio source. Sound comes from the sandboxed window, not the browser window. this.tempo = 140; this.musicDelta = 0; this.startTime = 0; this.playingNotes = []; this.queuedNotes = []; this.waveforms = ["sine", "triangle", "sawtooth", "square"]; var customWaveform = null; // For a future version of this program // Generate note frequencies (nf) in Hertz (A4 note = 440 Hz) // Credit @Element118 for reminding me that I don't have to manually set the frequency of every note this.noteFreq = []; var noteValue = 0; for (var octave = 0; octave < 9; octave ++) { this.noteFreq[octave] = []; for (var semitone = 0; semitone < 12; semitone ++) { this.noteFreq[octave][semitone] = Math.pow(2, noteValue/12)27.5; noteValue ++; if (octave === 0 && semitone === 2 \|\| octave === 8) {// Prevents the top and bottom ranges of the piano keys from filling up with unnecessary values break; } } } // Empties sound queue this.stopFutureSounds = function() { this.queuedNotes = []; }; // Emergency stop all sounds this.stopAllSounds = function() { for (var i = 0; i < this.playingNotes.length; i++) { this.playingNotes[i].osc.stop(0); } this.playingNotes = []; this.queuedNotes = []; }; this.playTone = function(octave, noteNumber, type, duration) { // Create oscillator var osc = this.audioCtx.createOscillator(); // Set frequency osc.frequency.value = this.noteFreq[octave][noteNumber]; if (duration === -1) { // If user interacts with the piano keys on left side of screen // Set waveform osc.type = this.waveforms[pianoRoll.activeSyn]; // Set attack and release var attackTime = 0.005; var sweepEnv = this.audioCtx.createGain(); sweepEnv.gain.cancelScheduledValues(this.audioCtx.currentTime); sweepEnv.gain.setValueAtTime(0, this.audioCtx.currentTime); sweepEnv.gain.linearRampToValueAtTime(footer.options[pianoRoll.activeSyn].volume masterVolume / 2, this.audioCtx.currentTime + attackTime); // Play the note osc.connect(sweepEnv).connect(this.audioCtx.destination); osc.start(0); osc.gainNode = sweepEnv; return osc; } else { // Set waveform if (type === 4) { // Unimplemented custom waveform option // osc.setPeriodicWave(customWaveform); } else { osc.type = this.waveforms[type]; } // Set attack and release var attackTime = 0.01; var sweepLength = duration; var preReleaseTime = 0.01; var releaseTime = 0.002; var sweepEnv = this.audioCtx.createGain(); sweepEnv.gain.cancelScheduledValues(this.audioCtx.currentTime); sweepEnv.gain.setValueAtTime(0, this.audioCtx.currentTime); // Set the attack sweepEnv.gain.linearRampToValueAtTime(footer.options[type].volume * masterVolume / 2, this.audioCtx.currentTime + attackTime); sweepEnv.gain.linearRampToValueAtTime(footer.options[type].volume * masterVolume / 2, this.audioCtx.currentTime + sweepLength - preReleaseTime); // Set the release sweepEnv.gain.linearRampToValueAtTime(0, this.audioCtx.currentTime + sweepLength - releaseTime); // Play the note osc.connect(sweepEnv).connect(this.audioCtx.destination); osc.start(0); var stopAt = this.audioCtx.currentTime + sweepLength; osc.stop(stopAt); this.playingNotes.push({ osc: osc, willStopTime: stopAt }); } }; // Called when user presses the play button this.playPianoRoll = function() { if (this.audioCtx.currentTime === 0) {// Prevent currentTime from becomming stuck at 0 this.playTone(0, 0, 1, 0.01); } // Queues list of notes on piano roll into list the is later converted into oscillators (sound) this.startTime = this.audioCtx.currentTime; for (var i = 0; i < pianoRoll.rolls.length; i++) { var ro = pianoRoll.rolls[i]; var octave = floor((-ro.y - 1) / 12) + 1; var noteNum = (-ro.y - 1) % 12; this.queuedNotes.push({ octave: octave, noteNum: noteNum, duration: ro.duration * 60 / this.tempo / 4, timestamp: ro.x * 60 / this.tempo / 4, type: ro.syn }); } }; this.update = function(d) { // Check which notes should be played this.musicDelta = this.audioCtx.currentTime - this.startTime; for (var i = this.queuedNotes.length - 1; i >= 0; i--) { var qn = this.queuedNotes[i]; if (this.musicDelta > qn.timestamp) { this.playTone(qn.octave, qn.noteNum, qn.type, qn.duration); this.queuedNotes.splice(i, 1); } } // Remove notes from the queue if they are done playing for (var i = this.playingNotes.length - 1; i >= 0; i--) { var pn = this.playingNotes[i]; if (this.audioCtx.currentTime > pn.willStopTime) { this.playingNotes.splice(i, 1); } } // Stop playing when all notes are played if (pianoRoll.isPlaying) { if (this.playingNotes.length === 0 && this.queuedNotes.length === 0) { pianoRoll.isPlaying = false; } } }; }; var PianoRoll = function() { this.isPlaying = false; this.activeSyn = 0; this.keys = []; this.keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]; this.octaves = 7; this.playingIndex = null; this.playingOsc = null; this.pianoHoverIndex = null; this.isResizing = false; this.isGrabbing = false; this.lastHandledIndex = null; // If null, default length of note is 4 this.encodeKey1 = "0123456789,."; this.encodeKey2 = "ÃçñéËċĒÍìęĐAæķĥÝÞÄúĎĩáĀBøâĳðĆĖòĬīĜĔCÔëćĲàãħÑùěĤDÓõĕčĄĵaþÎďÚEÅýĈğĝÁąÿĊēđFĶĴČÂÇġßïĦÏèGåîģÊØüíÙĢāİHĮôĸėÌäûıÜêĂIÀĉįÐăĞöĘóĭĠJÈĨÉÒÕÛÖbÆĚĪKLMNOPQRSTUVW"; this.rolls = []; this.ghostRoll = { gotoX: 0, gotoY: 0, realX: 0, realY: 0, len: 4, }; // Wrapping this command in a function so it is not executed imediately var playTone = function(i, j) { return function() { return audioPlayer.playTone(i + 1, j, -1, -1); }; }; // Generate a list of piano keys for (var i = 0; i < this.octaves; i++) { for (var j = 0; j < 12; j++) { var isBlack, x, y, keyW, keyH; switch (j) { case 0: // C isBlack = false; y = -1.5; keyH = 1.5; break; case 1: // C# isBlack = true; y = -2; break; case 2: // D isBlack = false; y = -3.5; keyH = 2; break; case 3: // D# isBlack = true; y = -4; break; case 4: // E isBlack = false; y = -5; keyH = 1.5; break; case 5: // F isBlack = false; y = -6.5; keyH = 1.5; break; case 6: // F# isBlack = true; y = -7; break; case 7: // G isBlack = false; y = -8.5; keyH = 2; break; case 8: // G# isBlack = true; y = -9; break; case 9: // A isBlack = false; y = -10.5; keyH = 2; break; case 10: // A# isBlack = true; y = -11; break; case 11: // B isBlack = false; y = -12; keyH = 1.5; break; } y -= i * 12; if (isBlack) { y += 0.1; keyW = 2.6; keyH = 0.8; } else { keyW = 4; } this.keys.push({ isBlack: isBlack, yCor: y, keyWidth: keyW, keyHeight: keyH, play: playTone(i, j) }); } } this.keys.push({ isBlack: false, yCor: -85.5, keyWidth: 4, keyHeight: 1.5, play: playTone(7, 0) }); this.keys.sort(function(a, b) { // Sort piano keys so that black keys are drawn on top of white keys return (a.keyWidth < b.keyWidth) ? 1 : -1; }); this.onMouseRelease = function() { this.isGrabbing = false; }; // Sort instruments draw order by x-position this.sortRollsBasedOnOptions = function() { this.rolls.sort(function(a, b) { return (footer.options[a.syn].gotoX > footer.options[b.syn].gotoX) ? 1 : -1; }); }; // Interface with the save function directly this.encodeString = function(str) { / Format: "100,75,125,35,40,0,55,1,0,8,10,8,3,16,34,1.333,2" -> "æĐüĨĖÒđÓÈÛđĀĐĂæÆÒĨèàĨOĲÉ" 100, \| Set tempo to 10 bpm 75, 125, 35, 40, \| Set volume (from 0 to 200) of each waveform (sine, triangle, saw, square) \| 0 is silent, 100 is 100% volume, 200 is 200% volume. 0, 55, 1, 0 \| Create a piano note with params x = 0, y = -55, duration = 1 (quarter note), type = 0 (sine wave) 8, 10, 8, 3 \| Create a piano note with params x = 16, y = -10, duration = 8 (2 whole notes), type = 3 (square wave) 16, 34, 1.333, 2 \| Create a piano note with params x = 16, y = -34, duration = 1.333 (third note), type = 2 (saw wave) Notes: - Decimal precision is the thousands place. This means if you directly save x = 0.1234567, it will be decoded as 0.1234567 but saved as 0.123. - If any save string contains the value "undefined", it's corrupted / if (str.length % 2 === 1) { // If odd number of characters in string, add a comma str += ","; } var data = ""; for (var i = 0; i < str.length; i += 2) { var value1 = this.encodeKey1.indexOf(str[i]); var value2 = this.encodeKey1.indexOf(str[i + 1]); data += this.encodeKey2[value1 * 12 + value2]; } return data; }; // Convert the list of note objects (this.rolls) into text this.encodeSaveData = function() { var str = ""; str += audioPlayer.tempo + ","; for (var i = 0; i < 4; i++) { // First 4 commas are volume data for footer options str += floor(footer.options[i].pseudoVolume * 100) + ","; } for (var i = 0; i < this.rolls.length; i++) { // Piano roll data var ro = this.rolls[i]; str += parseFloat(ro.x.toFixed(3)) + "," + parseFloat((-ro.y).toFixed(3)) + "," + parseFloat(ro.duration.toFixed(3)) + "," + ro.syn + ","; }if (str.length % 2 === 1) { // If odd number of characters in string, add a comma str += ","; } return this.encodeString(str); }; // Decode string of text into note objects this.decodeSaveData = function(data) { if (data.length === 0) { println("Save Data is empty!"); } this.rolls = []; var str = ""; try { for (var i = 0; i < data.length; i += 1) { var numberCode = this.encodeKey2.indexOf(data[i]); var value1 = this.encodeKey1[floor(numberCode / 12)]; var value2 = this.encodeKey1[numberCode % 12]; str += value1 + value2; } //println(str); var theValues = str.split(","); audioPlayer.tempo = parseInt(theValues.shift(), 10); for (var i = 0; i < 4; i++) { footer.options[i].pseudoVolume = parseInt(theValues[i], 10) / 100; footer.options[i].volume = Math.pow(10, footer.options[i].pseudoVolume * 2 - 2); } if (theValues[theValues.length - 1] === '') { theValues.pop(); if (theValues[theValues.length - 1] === '') { theValues.pop(); } } for (var i = 4; i < theValues.length; i += 4) { this.rolls.push({ x: parseFloat(theValues[i]), y: -parseFloat(theValues[i + 1]), duration: parseFloat(theValues[i + 2]), syn: parseInt(theValues[i + 3], 10) }); } } catch (e) { this.rolls = []; println("Invalid Save Data Loaded:\n\n" + e); // Detect bad input data } }; this.update = function(d) { cursor("default"); if (footer.isHover) { return; } // Delete notes if (mouseIsPressed && mouseButton === CENTER) { cursor("crosshair"); for (var i = 0; i < this.rolls.length; i++) { // Iterate through all notes var ro = this.rolls[i]; if (footer.options[ro.syn].isVisible) { // If note is visible if (floor(RevY(mouseY)) === ro.y && RevX(mouseX) > ro.x && RevX(mouseX) < ro.x + ro.duration) { // Right-edge resize this.rolls.splice(i, 1); break; } } } return; } // If hovering over notes, look at possible notes to grab/resize and change cursor accordingly if (!mouseIsPressed) { this.isGrabbing = false; this.isResizing = false; for (var i = 0; i < this.rolls.length; i++) { // Iterate through all notes var ro = this.rolls[i]; if (footer.options[ro.syn].isVisible) { // If note is visible if (floor(RevY(mouseY)) === ro.y) { // If mouse's Y-position matches the note's Y-position if (abs(mouseX - X(ro.x + ro.duration)) < 5) { // Right-edge resize cursor("ew-resize"); this.isResizing = true; this.resizingIndex = i; this.isResizeLeft = false; } else if (abs(mouseX - X(ro.x)) < 5) { // Left-edge resize cursor("ew-resize"); this.isResizing = true; this.resizingIndex = i; this.resizeNoteDuration = ro.duration; this.resizeNoteX = ro.x; this.isResizeLeft = true; } else if (RevX(mouseX) > ro.x && RevX(mouseX) < ro.x + ro.duration) { // Grab note this.isGrabbing = true; this.grabDiffX = ro.x - RevX(mouseX); this.grabDiffY = ro.y - RevY(mouseY); this.grabIndex = i; cursor("grab"); } } } } } // If left mouse button is held, grab/resize notes if (mouseIsPressed && mouseButton === LEFT) { if (this.isResizing) { // Resize logic this.lastHandledIndex = this.resizingIndex; cursor("col-resize"); if (this.isResizeLeft) { // If resizing the left edge if (downKeys[16]) { // Press the shift key to bypass snapping to gridlines this.rolls[this.resizingIndex].x = constrain(RevX(mouseX), 0, this.resizeNoteX + this.resizeNoteDuration); this.rolls[this.resizingIndex].duration = abs(this.rolls[this.resizingIndex].x - this.resizeNoteX - this.resizeNoteDuration); } else { this.rolls[this.resizingIndex].x = constrain(round(RevX(mouseX)), 0, this.resizeNoteX + this.resizeNoteDuration); this.rolls[this.resizingIndex].duration = abs(this.rolls[this.resizingIndex].x - this.resizeNoteX - this.resizeNoteDuration); } } else { // If resizing the right edge if (downKeys[16]) { // Press the shift key to bypass snapping to gridlines this.rolls[this.resizingIndex].duration = constrain(RevX(mouseX) - this.rolls[this.resizingIndex].x, 0, 999); } else { this.rolls[this.resizingIndex].duration = constrain(round(RevX(mouseX)) - this.rolls[this.resizingIndex].x, 0, 999); } } } else if (this.isGrabbing) { // Grabbing logic this.lastHandledIndex = this.grabIndex; cursor("grabbing"); this.rolls[this.grabIndex].x = max(0, round(RevX(mouseX) + this.grabDiffX)); this.rolls[this.grabIndex].y = constrain(round(RevY(mouseY) + this.grabDiffY), -85, -1); if (footer.isOnX \|\| downKeys[8]) { // Delete note this.rolls.splice(this.grabIndex, 1); this.isGrabbing = false; footer.mode = "place"; } } } // Calculate and prevent overlaps var gr = this.ghostRoll; gr.isOverlap = false; for (var i = 0; i < this.rolls.length; i++) { var ro = this.rolls[i]; if (footer.options[ro.syn].isVisible \|\| ro.syn === this.activeSyn) { // If note is visible OR note is the active note if (gr.gotoY === ro.y && ((gr.gotoX < ro.x + ro.duration && gr.gotoX + gr.len > ro.x) \|\| gr.gotoX === ro.x)) { gr.isOverlap = true; break; } } } // Place note on piano roll if (footer.mode === "place" && !isAnySmallButtonPressed && !footer.isHover && !footer.isOnX && !this.isResizing && mouseIsPressed && !lastMouseIsPressed && this.playingIndex === null && mouseButton === LEFT && mouseX > S(4) && !gr.isOverlap && !tutorial.isHover) { // Exhaustive list of conditions that must be met before placing a note on the piano roll this.rolls.push({ syn: this.activeSyn, x: gr.gotoX, y: gr.gotoY, duration: gr.len, }); } // Play the piano note if user clicks piano key if (this.playingIndex !== null) { // Play note on piano keys on the left if (this.pianoHoverIndex === null \|\| this.pianoHoverIndex !== this.playingIndex) { var gn = this.playingOsc.gainNode; gn.gain.setValueAtTime(gn.gain.value, audioPlayer.audioCtx.currentTime); gn.gain.exponentialRampToValueAtTime(0.0001, audioPlayer.audioCtx.currentTime + 0.03); this.playingOsc.stop(audioPlayer.audioCtx.currentTime + 0.1); this.playingIndex = null; } } if (this.playingIndex === null && !footer.isHover) { if (this.pianoHoverIndex !== null) { this.playingIndex = this.pianoHoverIndex; this.playingOsc = this.keys[this.pianoHoverIndex].play(); } } }; this.draw = function() { // Width of 1 measure var s4 = S(4); // Draw piano fill(220); for (var i = 0; i < this.keys.length; i++) { var k = this.keys[i]; if (k.isBlack) { rect(s4, Y(k.yCor), width - s4, S(1)); } } // Horizontal gridlines stroke(127, 212, 161); strokeWeight(S(0.06)); for (var i = 0; i < this.keys.length + 1; i++) { line(max(s4, X(0)), Y(-i), width, Y(-i)); } strokeWeight(S(0.1)); stroke(94, 94, 94); for (var i = 0; i < this.keys.length + 1; i += 12) { line(0, Y(-i), width, Y(-i)); } // Vertical gridlines stroke(100, 135, 101); strokeWeight(S(0.06)); for (var i = max(0, floor(RevX(0) / 4) + 2) * 4; i < floor(RevX(width) / 4 + 1) * 4; i += 4) { line(X(i), max(0, Y(-this.keys.length)), X(i), min(height, Y(0))); } strokeWeight(S(0.1)); stroke(0, 0, 0); for (var i = max(0, floor(RevX(0) / 16) + 1) * 16; i < floor(RevX(width) / 16 + 1) * 16; i += 16) { line(X(i), max(0, Y(-this.keys.length)), X(i), min(height, Y(0))); } // Display bar line numbers (0, 1, 2, 3, etc) if (Y(-this.keys.length) > 0) { // If top of piano roll is in view textFont(fonts.arialBold); fill(0, 0, 0); for (var i = max(0, floor(RevX(0) / 16) + 1) * 16; i < floor(RevX(width) / 16 + 1) * 16; i += 16) { text(i / 16, X(i), Y(-86)); } } noStroke(); // Display note blocks (named "rolls" in code to avoid confusion with other variables) for (var i = this.rolls.length - 1; i >= 0; i--) { var roll = this.rolls[i]; var rx = X(roll.x); var ry = Y(roll.y); var rs = S(1); var rd = S(roll.duration); if (footer.options[roll.syn].isVisible) { fill(noteColors[roll.syn]); } else { var myColor = noteColors[roll.syn]; fill(red(myColor), green(myColor), blue(myColor), 75); } rect(rx, ry, rd, rs); } // Display start (forward-facing triangle) and end (vertical line) markers for (var i = this.rolls.length - 1; i >= 0; i--) { var roll = this.rolls[i]; if (footer.options[roll.syn].isVisible) { var rx = X(roll.x); var ry = Y(roll.y); var rs = S(1); var rs16 = rs / 16; var rd = S(roll.duration); fill(255); triangle(rx + rs16, ry + rs16, rx + rs16, ry + rs - rs16, rx + rs / 3, ry + rs / 2); rect(rx + rd - rs16, ry, rs16, rs); } } // Draw time bar if (this.isPlaying) { stroke(255, 0, 0); strokeWeight(S(0.15)); var xPos = X(audioPlayer.musicDelta * audioPlayer.tempo * 4 / 60); line(xPos, Y(-85), xPos, Y(0)); fill(255, 0, 0); triangle(xPos, Y(-85), xPos - S(0.5), Y(-85.5), xPos + S(0.5), Y(-85.5)); if (xPos >= width \|\| xPos <= 0) { cam.x = RevX(xPos+width/2)-4; } } // Draw ghost note var gr = this.ghostRoll; gr.gotoX = max(0, floor(RevX(mouseX))); gr.gotoY = constrain(floor(RevY(mouseY)), -85, -1); gr.realX += (gr.gotoX - gr.realX) * 0.5; gr.realY += (gr.gotoY - gr.realY) * 0.5; if (this.lastHandledIndex === null \|\| this.lastHandledIndex >= this.rolls.length) { gr.len = 4; } else { if (this.rolls[this.lastHandledIndex].duration <= 1 / 4) { this.rolls[this.lastHandledIndex].duration = 1 / 4; } gr.len = ceil(this.rolls[this.lastHandledIndex].duration); } if (footer.mode === "place" && !isAnySmallButtonPressed && !mouseIsPressed && !gr.isOverlap && !this.isGrabbing && !this.isResizingIndex) { var myColor = noteColors[this.activeSyn]; fill(red(myColor), green(myColor), blue(myColor), 125); rect(X(gr.realX), Y(gr.realY), S(gr.len), S(1)); // Draw key name fill(255); textFont(fonts.arialBold); text(this.keyNames[(-(floor(RevY(mouseY) + 1)) % 12)], X(floor(RevX(mouseX + S(gr.len / 2)))), Y(floor(RevY(mouseY)) + 0.5)); } // Show the highlighted (green) note when playing the piano this.pianoHoverIndex = null; fill(181, 68, 219); strokeWeight(S(0.07)); stroke(0); for (var i = 0; i < this.keys.length; i++) { var k = this.keys[i]; if (i === this.playingIndex) { fill(0, 255, 0); } else if (k.isBlack) { fill(0); } else { fill(255); } rect(0, Y(k.yCor), S(k.keyWidth), S(k.keyHeight)); if (mouseIsPressed && mouseButton === LEFT && RevY(mouseY) > k.yCor && RevY(mouseY) < k.yCor + k.keyHeight && RevS(mouseX) < k.keyWidth) { this.pianoHoverIndex = i; // Black keys should override white keys } } // Middle C markings fill(0); textFont(fonts.arialBold); for (var i = 1; i < 9; i++) { text("C" + i, S(3.1), Y(-12 * i + 11.4)); } }; }; var init=true; // Referenced as "waveform controller", "save", and "load" in the tutorial, renamed to Option for clarity var Option = function(id) { this.id = id;// From 1 to 6 this.x = 215 + 55 * id; this.gotoX = this.x; this.y = height - 65; this.isHovering = false; this.isVisible = true; if(this.id === 1){this.isVisible = false;} this.justChangedVisibility = false; this.isMoving = false; this.selected = false; this.movingDiffX = 0; this.pseudoVolume = 1; // 2 = loud (this.volume=100), 1 = normal (this.volume=1), 0 = soft (this.volume=0.01) if (id === 3 \|\| id === 4) {// If saw or or square wave this.pseudoVolume = 0.5; } this.volume = Math.pow(10, this.pseudoVolume * 2 - 2);// volume = 10^(pseudoVolume2-2) this.update = function() { this.x += (this.gotoX - this.x) 0.25; this.isHovering = (footer.isHover && mouseX < this.x + 50 && mouseX > this.x); if (footer.optionMouseDownId === null) { // If not currently moving another Option object if (this.isMoving) { // If being dragged footer.optionMouseDownId = this.id; this.x = mouseX + this.movingDiffX; for (var i = 0; i < footer.options.length; i++) { var op = footer.options[i]; if (op.gotoX === this.gotoX + 55 && this.x > this.gotoX + 27) { // If the other container on the right AND you drag to the right by at least 27 pixels this.gotoX += 55; footer.options[i].gotoX -= 55; pianoRoll.sortRollsBasedOnOptions(); } if (op.gotoX === this.gotoX - 55 && this.x < this.gotoX - 27) { // If the other container on the left AND you drag to the left by at least 27 pixels this.gotoX -= 55; footer.options[i].gotoX += 55; pianoRoll.sortRollsBasedOnOptions(); } } if (!mouseIsPressed) { this.isMoving = false; } } else { if (this.isHovering && mouseIsPressed) { // If mouse is on this container somewhere if (mouseButton === LEFT) { // If the right mouse button is pressed if (mouseY > height - 15) { if (!lastMouseIsPressed) { // If first frame of mouse press this.justChangedVisibility = true; // Prevent other containers from being interfered with while swapping places this.isMoving = true; this.movingDiffX = this.x - mouseX; } } } else if (mouseButton === RIGHT) { if (mouseX - this.x + mouseY - this.y > 50) { // If clicking on visibility symbol if (!lastMouseIsPressed) { this.isVisible = !this.isVisible; // Toggle visibility } } else { this.pseudoVolume = constrain((50 - mouseY + height - 65) / 25, 0, 2); this.volume = Math.pow(10, this.pseudoVolume * 2 - 2); // Use formula to convert decibels to volume (gain) } } } } } }; this.draw = function() { // Option-specific logic fill(171, 168, 168); if (this.isHovering && mouseIsPressed && !lastMouseIsPressed && mouseButton === LEFT && mouseY <= height - 15) { if (this.id <= 4) { // If Option object is a waveform pianoRoll.activeSyn = this.id - 1; // Very important! this.selected = true; } else if (this.id === 5 && !lastMouseIsPressed) { // If Option object is Save println("Your Save Data:\n\n" + pianoRoll.encodeSaveData());// Encode } else if (this.id === 6 && !lastMouseIsPressed) { // If Option object is Load pianoRoll.decodeSaveData(SAVE_DATA);// Decode } } if(init){ init=false; pianoRoll.decodeSaveData(SAVE_DATA);// Decode } // Highlight option with stroke border if (this.selected) { strokeWeight(2); stroke(noteColors[this.id - 1]); } // Draw background rect(this.x, this.y, 50, 60); noStroke(); // Draw 3 lines at the bottom fill(94, 94, 94); rect(this.x + 2, this.y + 51, 46, 1); rect(this.x + 2, this.y + 54, 46, 1); rect(this.x + 2, this.y + 57, 46, 1); // If waveform, draw components if (this.id <= 4) { // Draw volume level indicator fill(201, 201, 201); triangle(this.x + 1, this.y + 1, this.x + 1, this.y + 51, this.x + 51, this.y + 1); fill(noteColors[this.id - 1]); triangle(this.x, this.y + 50 - 25 * this.pseudoVolume, this.x, this.y + 50, this.x + 25 * this.pseudoVolume, this.y + 50 - 25 * this.pseudoVolume); // Volume text in decibels (dB) fill(0, 0, 0); var value = round(this.pseudoVolume * 200 - 200) / 10; if (value >= 0) { value = "+" + value; if (value >= 10 \|\| (this.id > 2 && value > 5)) { fill(168, 0, 0); } } textFont(fonts.arialBold); text(value + "dB", this.x + 19, this.y + 8); // Visibility symbol noFill(); strokeWeight(1); stroke(0, 0, 0); if (!this.isVisible) { noFill(); line(this.x + 43, this.y + 44, this.x + 23, this.y + 30);// Visibility off stroke(87, 87, 87); } ellipse(this.x + 33, this.y + 37, 7, 7); ellipse(this.x + 33, this.y + 37, 17, 12); noStroke(); } else if (this.id === 5) { // Draw Save (floppy disk) icon pushMatrix(); translate(this.x + 25, this.y + 25); strokeWeight(2); stroke(36); noFill(); beginShape(); vertex(-18, -18); vertex(-18, 18); vertex(18, 18); vertex(18, -10); vertex(10, -18); vertex(-18, -18); endShape(); rect(-14, -13, 17, 8); ellipse(1, 8, 13, 13); popMatrix(); noStroke(); } else if (this.id === 6) { // Draw load (download arrow) icon pushMatrix(); noFill(); translate(this.x + 25, this.y + 25); strokeWeight(2); stroke(36); rect(-7.5, -20, 15, 20); triangle(0, 12, 13, 0, -13, 0); line(-20, 20, 20, 20); noStroke(); fill(171, 168, 168); rect(-6, -2, 13, 4); popMatrix(); } }; }; var Footer = function() { this.mode = "main"; // "main", "grab", or "place" this.isGrabbingTempoSlider = false; this.tempoSliderDiffX = 0; this.options = []; // List of Option() objects this.optionMouseDownId = null; // Mouse is pressing this option for (var i = 1; i <= 6; i++) { this.options.push(new Option(i)); } this.isHover = false; this.isOnX = false; // Updates and draws simultaneously this.updatedraw = function() { this.isOnX = false; this.isHover = (mouseY > height - 70); // Set hover to true if mouse is inside the footer // Background stroke(200); strokeWeight(2); if (this.isHover) { fill(255); } else { fill(255, 99); } rect(-1, height - 70, width + 3, 72); // Play/pause button noFill(); strokeWeight(1); stroke(13, 97, 46); ellipse(35, height - 35, 55, 55); noStroke(); var hoveringPlayButton = (Math.sqrt(sq(mouseX - 35) + sq(mouseY - height + 35)) < 27); if (hoveringPlayButton) { fill(7, 66, 30); } else { fill(13, 97, 46); } if (pianoRoll.isPlaying) { rect(25, height - 50, 7, 30); rect(39, height - 50, 7, 30); if (hoveringPlayButton && mouseIsPressed && !lastMouseIsPressed) { pianoRoll.isPlaying = false; audioPlayer.stopAllSounds(); } } else { triangle(50, height - 35, 25, height - 48, 25, height - 22); if (hoveringPlayButton && mouseIsPressed && !lastMouseIsPressed) { pianoRoll.isPlaying = true; audioPlayer.stopAllSounds(); audioPlayer.playPianoRoll(); } } // Tempo slider fill(0); textFont(fonts.tempo); text("Tempo: " + audioPlayer.tempo + " bpm", 145, height - 24); fill(151, 184, 154); rect(80, height - 50, 160, 4); // Slider var sliderXCor = (audioPlayer.tempo + 140) / 2; if (this.isGrabbingTempoSlider) { fill(94, 138, 97); audioPlayer.tempo = constrain((mouseX + this.tempoSliderDiffX) * 2 - 140, 20, 340); if (!mouseIsPressed) { this.isGrabbingTempoSlider = false; } } else { fill(151, 184, 154); if (Math.sqrt(sq(mouseX - sliderXCor) + sq(mouseY - height + 48)) < 13 && !pianoRoll.isPlaying) { fill(128, 168, 131); cursor("pointer"); if (mouseIsPressed) { this.tempoSliderDiffX = sliderXCor - mouseX; this.isGrabbingTempoSlider = true; } } } ellipse(sliderXCor, height - 48, 20, 20); // Slider knob // Draw options if (this.isHover && mouseIsPressed && !lastMouseIsPressed) { for (var i = 0; i < this.options.length; i++) { this.options[i].selected = false; this.mode = "main"; } pianoRoll.activeSyn = 3; } this.optionMouseDownId = null; for (var i = 0; i < this.options.length; i++) { this.options[i].update(); this.options[i].draw(); } switch (this.mode) { case "main": // Detect if one of the options was selected, if so, switch to "place" mode if (!mouseIsPressed && lastMouseIsPressed && mouseButton === LEFT) { // If mouse released for (var i = 0; i < this.options.length; i++) { if (this.options[i].isHovering) { this.mode = "place"; } } } // Detect if a note was grabbed, if so, switch to "grab" mode if (pianoRoll.isGrabbing && mouseIsPressed && mouseButton === LEFT) { this.mode = "grab"; } break; case "place": // If cursor on "X" mark this.isOnX = !this.isHover && (mouseY > height - 140 && mouseX > width - 60); // Background stroke(200); strokeWeight(2); if (this.isOnX) { // If mouse on bg fill(255); } else { fill(255, 99); } rect(width - 60, height - 140, 61, 71); noFill(); if (this.isOnX && mouseIsPressed) { strokeWeight(2); } else { strokeWeight(0.9); } stroke(0, 0, 0); line(width - 30 + 12, height - 35 + 12 - 70, width - 30 + -12, height - 35 - 12 - 70); line(width - 30 + -12, height - 35 + 12 - 70, width - 30 + 12, height - 35 - 12 - 70); ellipse(width - 30, height - 105, 45, 45); noStroke(); // Switch modes if applicable if ((this.isOnX && lastMouseIsPressed && !mouseIsPressed) \|\| downKeys[8]) { this.mode = "main"; } if (!this.isOnX && mouseIsPressed && pianoRoll.isGrabbing && mouseButton === LEFT) { this.mode = "grab"; } // Tip textFont(fonts.arialBold); fill(0, 185); rect(width - 188, height - 95, 125, 22, 4); fill(255, 255, 255); text("Backspace to cancel", width - 126, height - 83); break; case "grab": // If cursor on trash icon this.isOnX = !this.isHover && (mouseY > height - 140 && mouseX > width - 60); // Trash can icon stroke(200); strokeWeight(2); fill(255, 99); rect(width - 60, height - 140, 61, 71); noFill(); strokeWeight(1); stroke(0, 0, 0); pushMatrix(); translate(width - 30, height - 100); quad(-18, -15, 18, -15, 14, 20, -14, 20); quad(-21, -26, 18, -19, 20, -26, -17, -33); line(-10, -6, -8, 12); line(-0.5, -6, 0, 12); line(10, -6, 8, 12); stroke(255, 0, 0); line(-23, 21, 23, -25); line(-23, -25, 23, 21); popMatrix(); noStroke(); // Tip textFont(fonts.arialBold); fill(0, 200); rect(width - 188, height - 95, 125, 22, 4); fill(255, 255, 255); text("Backspace to delete", width - 126, height - 83); // On mouse release, switch to "place" mode if (!mouseIsPressed) { this.mode = "place"; } break; } }; }; var Tutorial = function() { // Dimentions of tutorial window are 350x350 this.show = false; this.isHvoer = false; this.transitionIn = 0; // How many bordered rectangles to show. Value is 0 through 8 this.centerX = width / 2; this.centerY = height / 2; this.width = 350; this.height = 350; var x1 = this.x1 = this.centerX - this.width / 2; var y1 = this.y1 = this.centerY - this.height / 2; var x2 = this.x2 = this.centerX + this.width / 2; var y2 = this.y2 = this.centerY + this.height / 2; this.posXs = [x1, this.centerX, x2, x2, x2, this.centerX, x1, x1, x1]; // Positions of dots that form the outline of the window box this.posYs = [y1, y1, y1, this.centerY, y2, y2, y2, this.centerY, y1]; this.titlesHelp = ["\nKhan Academy\nPiano Roll", "Piano Keys", "Editor", "Waveforms - Intro", "Waveforms - Types", "Waveforms - Volume", "Waveforms - Visibility", "Save & Load", "Tempo Meter", "Play Button", "Extra Controls"]; this.messagesHelp = [ " \nCreate with your own melodies or re-create your favorite songs and share them in the Tips & Thanks!\n\n(Click here to continue)\n\n(Press X or ? button to skip tutorial)", "A virtual piano containing the standard 88 keys is pinned to the left side of the editor. The C note on each octave is marked. You can click the piano keys to hear the pitch.", "The editor is the main workspace for creating and editing melodies. \n\n- Left click to add notes\n- Middle click to delete notes\n- Right click and drag to pan\n\nBefore adding notes, select a waveform.", "There are 4 waveforms. These are the only \"instruments\" available, as Khan Academy doesn't allow loading external sound or audio.", "Blue - Sine wave (soft)\nGreen - Triangle wave (soft)\nOrange - Saw wave (loud)\nPink - Square wave (loud)", "Control the volume of a waveform in decibels by right clicking the left section of the waveform controller.", "To stack different types of notes of the same pitch, hide notes by right clicking the visibility (\"eye\") icon.", "Save - Prints a code that can be put into line 10. You can then keep your song forever by spinning-off this program.\n\nThe notes, tempo, and volumes are saved.\n\nLoad - Loads the current string of string of text into the program.", "Use the green slider to change the tempo. Notes are played in BPM (beats per minute.)", "Click the play button in the bottom-left corner to play and pause the melody.", "This program supports mouse-only controls.\nMouse controls are located at the top-right corner.\n\nIf you prefer the keyboard, you can pan around with the arrow keys, zoom with the + / - keys, and play with the spacebar." ]; // Array of help messages this.mesInd = 0; // Which message to show // Flip to next message this.nextMessage = function() { if (this.show && mouseButton === LEFT && this.isHover) { this.transitionIn = 0; this.mesInd++; if (this.mesInd >= this.messagesHelp.length) { this.mesInd = 0; this.show = false; } } }; // Reset transition and rewind tutorial this.reset = function() { this.mesInd = 0; this.transitionIn = 0; }; // Helper function to draw the tutorial pointer this.drawArrow = function(x, y, angle) { pushMatrix(); translate(x + 2, y); scale(1.2); rotate(5); fill(255, 0, 0, 210); rect(-7.5, -20, 15, 21); triangle(0, 12, 13, 0, -13, 0); popMatrix(); }; this.updatedraw = function() { if (this.show) { // If mouse is inside tutorial box this.isHover = mouseX > this.x1 && mouseX < this.x2 && mouseY > this.y1 && mouseY < this.y2; // If X key is pushed, close tutorial if (downKeys[88]) { this.show = false; return; } // Calculate transition fade amount if (this.transitionIn < 8) { this.transitionIn += 0.3; if (this.transitionIn > 8) { this.transitionIn = 8; } } // Draw background rectangle (fill)(255, this.transitionIn * 32); rect(this.centerX - this.width / 2, this.centerY - this.height / 2, this.width, this.height); // Draw text (fill)(0, this.transitionIn * 32); textFont(fonts.tutorialBig); text(this.titlesHelp[this.mesInd], this.centerX, this.centerY - this.height / 2 + 40); textFont(fonts.tutorialSmall); text(this.messagesHelp[this.mesInd], this.centerX - this.width * 0.45, this.centerY - this.height / 2 + 10, this.width * 0.9, this.height); // Draw special stuff (such as diagrams) switch (this.mesInd) { case 3: // Waveforms - Intro this.drawArrow(width - 304, height - 85); this.drawArrow(width - 249, height - 85); this.drawArrow(width - 194, height - 85); this.drawArrow(width - 139, height - 85); break; case 7: // Save & Load this.drawArrow(width - 84, height - 85); this.drawArrow(width - 29, height - 85); break; case 8: // Tempo this.drawArrow(140, height - 85); break; case 9: // Play Button this.drawArrow(35, height - 85); break; default: break; } // Draw retangular dot borders (with animations) var xPos, yPos; for (var i = 0; i < this.transitionIn; i++) { fill(255, 33, 33); rect(this.posXs[i] - 4, this.posYs[i] - 4, 8, 8); stroke(255, 33, 33); strokeWeight(2); if (i > this.transitionIn - 1) { // transitional line line(this.posXs[i], this.posYs[i], this.posXs[i] + (this.posXs[i + 1] - this.posXs[i]) * (this.transitionIn % 1), this.posYs[i] + (this.posYs[i + 1] - this.posYs[i]) * (this.transitionIn % 1)); } else { // full line line(this.posXs[i], this.posYs[i], this.posXs[i + 1], this.posYs[i + 1]); } noStroke(); } } else { this.isHover = false;// If tutorial is not shown, assume user is not hovering over it } }; }; // Buttons located in the top-right corner of the screen. Allows for mobile and keyboard-less support. var SmallButton = function(x, y, message, trigger, actionPress, actionRelease) { this.x = x; this.y = y; this.radius = 10; this.message = message; this.trigger = trigger; this.actionPress = actionPress; this.actionRelease = actionRelease; this.isOn = false; this.isHovering = false; this.update = function() { if (this.isOn) {// If button is being pressed isAnySmallButtonPressed = true;// Prevents building while pushing a button if (!mouseIsPressed && lastMouseIsPressed) { this.actionRelease(); this.isOn = false;// Reset } } else {// Wait for button press, then execute action this.isHovering = Math.sqrt(sq(mouseX - this.x) + sq(mouseY - this.y)) <= this.radius;// If mouse is a certain distance away from button if (this.isHovering) { // If mouse hovering over button isAnySmallButtonPressed = true; if (mouseIsPressed && !lastMouseIsPressed) { this.actionPress(); this.isOn = true; } } } }; this.draw = function() { if (this.isOn) { fill(255, 0, 0);// Button pressed color } else { if (this.isHovering) { fill(179, 179, 179);// Highlight color } else { fill(214, 214, 214);// Nomral color } } if (this.trigger()) {// If outside condition is met to highlight button fill(255, 0, 0); } ellipse(this.x, this.y, this.radius * 2, this.radius * 2); fill(0); text(this.message, this.x, this.y - 1); }; }; mousePressed = function() { tutorial.nextMessage(); }; mouseReleased = function() { pianoRoll.onMouseRelease(); }; mouseScrolled = function() { // Limit min and max zoom, handle scrolling if (mouseScroll < 0) { if (cam.gotoHt < cam.maxHt) { cam.gotoHt /= 0.8; if (cam.gotoHt > cam.maxHt) { cam.gotoHt = cam.maxHt; } } } else { if (cam.gotoHt > cam.minHt) { cam.gotoHt = 0.8; if (cam.gotoHt < cam.minHt) { cam.gotoHt = cam.minHt; } } } }; { (function(w) { return this[w]; })("window").Processing.instances[0].externals.canvas.onwheel = function(e) { e.preventDefault(); }; / Fixes scrolling - not my code - Source: www.khanacademy.org/cs/i/3452477363 / } keyPressed = function() { // Keyboard controls for camera panning if (keyCode === UP) { cam.velY = -cam.velocity; } else if (keyCode === DOWN) { cam.velY = cam.velocity; } if (keyCode === LEFT) { cam.velX = -cam.velocity; } else if (keyCode === RIGHT) { cam.velX = cam.velocity; } // Keyboard controls for piano roll if ( keyCode === 32) {// Press Spacebar to play if (pianoRoll.isPlaying) {// Stop pianoRoll.isPlaying = false; audioPlayer.stopAllSounds(); } else {// Play pianoRoll.isPlaying = true; audioPlayer.stopAllSounds(); audioPlayer.playPianoRoll(); } } else if (key.toString() === "s") {// Press S to stop all sounds audioPlayer.stopAllSounds(); pianoRoll.isPlaying = false; } else if (key.toString() === "f") {// Press F to stop future sounds audioPlayer.stopFutureSounds(); pianoRoll.isPlaying = false; } // Store a list of keys being pushed in an array-like object downKeys[keyCode] = true; }; keyReleased = function() { // Keyboard controls for camera panning if (keyCode === UP \|\| keyCode === DOWN) { cam.velY = 0; } if (keyCode === LEFT \|\| keyCode === RIGHT) { cam.velX = 0; } // Store a list of keys being pushed in an array-like object downKeys[keyCode] = false; }; // Initialize objects var audioPlayer = new AudioPlayer(); var pianoRoll = new PianoRoll(); var footer = new Footer(); var tutorial = new Tutorial(); var buttons = [ // Format: / new SmallButton(x_position, y_position, label, condition_for_highlight, on_press_action, on_release_action), / new SmallButton(458, 10, "+", function() { return downKeys[73] \|\| downKeys[187]; }, function() { downKeys[73] = true; }, function() { downKeys[73] = false; }), new SmallButton(479, 10, "-", function() { return downKeys[79] \|\| downKeys[189]; }, function() { downKeys[79] = true; }, function() { downKeys[79] = false; }), new SmallButton(500, 10, "▲", function() { return cam.velY < 0; }, function() { cam.velY = -cam.velocity; }, function() { cam.velY = 0; }), new SmallButton(521, 10, "▼", function() { return cam.velY > 0; }, function() { cam.velY = cam.velocity; }, function() { cam.velY = 0; }), new SmallButton(542, 10, "◄", function() { return cam.velX < 0; }, function() { cam.velX = -cam.velocity; }, function() { cam.velX = 0; }), new SmallButton(563, 10, "►", function() { return cam.velX > 0; }, function() { cam.velX = cam.velocity; }, function() { cam.velX = 0; }), new SmallButton(584, 10, "?", function() { return false; }, function() { tutorial.reset(); tutorial.show = !tutorial.show; }, function() {}) ]; // Weird "bug" makes me need to start and stop the piano roll before starting again to make any sound audioPlayer.playPianoRoll(); audioPlayer.stopAllSounds(); draw = function() { // Background background(255); // Update small buttons isAnySmallButtonPressed = false; for (var i = 0; i < buttons.length; i++) { buttons[i].update(); } // Calculate delta time newMillis = millis(); var delta = newMillis - lastMillis; lastMillis = newMillis; // Camera zoom if (downKeys[73] \|\| downKeys[187]) { // I or + key cam.gotoHt = 0.973; if (cam.gotoHt < cam.minHt) { cam.gotoHt = cam.minHt; } } if (downKeys[79] \|\| downKeys[189]) { // O or - key cam.gotoHt /= 0.973; if (cam.gotoHt > cam.maxHt) { cam.gotoHt = cam.maxHt; } } // Camera panning cam.x += cam.velX * cam.ht; cam.y += cam.velY * cam.ht; cam.ht += (cam.gotoHt - cam.ht) * 0.7; if (mouseIsPressed && mouseButton === RIGHT && !footer.isHover) { cam.dragForceX = RevS(pmouseX - mouseX); cam.dragForceY = RevS(pmouseY - mouseY); cam.x += cam.dragForceX; cam.y += cam.dragForceY; } else { cam.x += cam.dragForceX; cam.y += cam.dragForceY; cam.dragForceX = 0.6; cam.dragForceY = 0.6; } // Update/draw components audioPlayer.update(delta); pianoRoll.update(delta); pianoRoll.draw(); footer.updatedraw(); // Draw small buttons textFont(fonts.smallButton); for (var i = 0; i < buttons.length; i++) { buttons[i].draw(); } // Update and draw tutorial tutorial.updatedraw(); // Save previous state of the mouse press lastMouseIsPressed = mouseIsPressed; }; / \ Change log: 1.2.1 - Camera now follows the time bar - Change log moved to bottom of code 1.2.0 - Fixed bug: notes not divisible by a quarter (e.g. third or eighth notes) were previously reduced to integers when saving - Key frequences are now generated with math (does not affect user experience) - Fixed bug preventing notes from being played upon load - Fixed font typo 1.1.2 - Octave gridlines 1.1.1 - Minor bug fixes 1.1.0 - Version info added - Play / stop song with spacebar 1.0.0 - Released \ /
Folds	7,9
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ3Cwu7_Cww
Votes	166
Spin-Offs	1
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6305890291302400","title":"KA Piano Roll Editor 1.3.0","deleted":"true","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Tree of Light
Author Name	scientificallyProgrammedHopper
Author ID	kaid_1182141121940032629397540
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739461378437
Updated	10 months ago, 1739461383880
Source Deleted	unknown