NAVIGATOR

Motion Graphics

Lyric Video 歌词动画视频制作
Music, text, & graphics 音乐,字体,与动画相结合
Pitch & Image 声调与影像
Music Imagery Programing 音乐影像程序

Using HTML, CSS, p5.js

编程过程中遇到很多问题,几小时的尝试之后有时还解决不了,最终在不断地尝试新思路后终于能够解决问题。

Computer Keyboard --> Piano keyboard 电脑键盘变成钢琴键盘

Many people want to be able to play the song they hear, but unfortunately not everyone has perfect pitch. This program aims to train the user to associate each note with a color and a moving graphic that increases speed and complexity as pitch goes higher,

This can be eventually turned into a function where a user of a music app finds a song they want to hear by playing (or singing if the technology is good enough) because many times they might not know the artist name or the song name. They can even play a melody and the system finds any existing songs that is similar to that melody in different categories. This would increase discovery of new artists and gives users a new sense of fun when using music apps.

对于会弹钢琴的人来说,发现电脑键盘可以像钢琴一样弹无疑是一件很开心的发现。利用四排键盘,我将他们设置成两个八度,带有黑键。每一个音符都可以以一种程序生成的影像出现,音调越高,影像中的物体颜色会越来越浅,选装速度会越来越快,象征着高频率的震动。

同时这也可以是一个音乐软件的概念:许多时候人们想要具有听到旋律就能找到音准的能力,他们可以通过键盘程序来学习听音弹音的能力。许多人听到一首歌不知道名字,这样他们就能通过音准来找到歌曲。

File Instructions:

  1. Download the entire folder 下载整个文件夹
  2. Drag the entire folder into terminal 将整个文件夹拖进Terminal(mac 终端机)
  3. Type “python -m SimpleHTTPServer" then hit "Enter" 输入“python -m SimpleHTTPServer" 然后回车
  4. 将文件夹里的index.html在网页中打开
  5. 在网址区域输入localhost:8000
  6. 从键盘“Q”开始(Q是音符C,2是C#,etc)
  7. 没声音的话打开Inspect刷新几次
No items found.