{"id":25531272,"url":"https://github.com/willkirkmanm/music-visualiser","last_synced_at":"2026-06-18T09:32:31.677Z","repository":{"id":277233298,"uuid":"931766320","full_name":"WillKirkmanM/music-visualiser","owner":"WillKirkmanM","description":"3-Dimensional Music Visualiser in P5.js ","archived":false,"fork":false,"pushed_at":"2025-05-14T20:09:47.000Z","size":4112,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-22T09:40:55.118Z","etag":null,"topics":["music","p5-js","visualiser"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WillKirkmanM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-12T20:25:19.000Z","updated_at":"2025-05-14T20:09:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a5e75e4-1cee-4ba0-be6a-c47d3d762cfd","html_url":"https://github.com/WillKirkmanM/music-visualiser","commit_stats":null,"previous_names":["willkirkmanm/music-visualiser"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WillKirkmanM/music-visualiser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillKirkmanM%2Fmusic-visualiser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillKirkmanM%2Fmusic-visualiser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillKirkmanM%2Fmusic-visualiser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillKirkmanM%2Fmusic-visualiser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WillKirkmanM","download_url":"https://codeload.github.com/WillKirkmanM/music-visualiser/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillKirkmanM%2Fmusic-visualiser/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34485163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["music","p5-js","visualiser"],"created_at":"2025-02-20T00:48:02.414Z","updated_at":"2026-06-18T09:32:31.655Z","avatar_url":"https://github.com/WillKirkmanM.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://avatars.githubusercontent.com/u/138057124?s=200\u0026v=4\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eMusic Visualiser\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n  \u003ca href=\"https://willkirkmanm.github.io/music-visualiser/\"\u003eVisual Demo\u003c/a\u003e\n\u003c/h4\u003e\n\n![image](https://github.com/user-attachments/assets/845b9a55-5a56-4ec6-a888-13ca15cdf69a)\n\n## Audio visualiser\n\nIn this case study you will be completing a simple music visualisation\nprogram that contains three separate visualisations.\n\nTo turn the sound into something that can be visualised p5.js provides\na Fast Fourier Transform object. Take a look at its description in the\n[p5.sound documentation](https://p5js.org/reference/#/p5.FFT).\n\nFor todays exercise you don’t need to be able to understand the full\ntechnicalities of this object or its methods. However, in putting\nthis case study together we have used the following methods.\n\n- `FFT.analyze()` returns an array of 1024 values between 0\n  and 255. Each value represents the amplitude (loudness) of a small\n  frequency range (pitch of the sound).\n\n- `FFT.waveform()` returns an array of 1024 values between -1\n  and 1. Each value represents the amplitude of the sound for a tiny\n  portion of time.\n\n- `FFT.energy(freq1, [freq2])` returns the volume of the sound at\n  frequency range specified by the `freq1` and `freq2` parameter. You\n  can specify `freq1` as a number or p5.js provides strings for common\n  values such as “bass” and “treble”, and leave `freq2` empty.\n\n### Tasks\n\nDownload the music visualiser project template from the bottom of this\npage and look over the code.\n\n#### Playback and fullscreen [2 marks]\n\nIn the `ControlsAndInput` constructor function (in the\ncontrolsAndInput.js file) complete `this.mousePressed()`.\n\n- Using the `playbackButton` object check if the mouse click is on the\n  play button (check out the `PlaybackButton` constructor function and\n  find the method which does this). When you have called this method\n  clicking the playback button should start the music and display a\n  visualisation.\n- If the click isn’t on the playback button toggle the display between\n  window and fullscreen (check out the p5.js documentation on how to\n  do this.)\n\n#### Visualisation menu [2 marks]\n\nIn the `ControlsAndInput` constructor function complete\n`this.menu()`. Write a `for` loop that iterates over the array stored\nin the `visuals` property of the `Visualisations` object, which itself\nis stored in the global `vis` variable declared in sketch.js, writing\neach visualisation name to the screen. You can check if your menu is\ndisplayed correctly by pressing the space bar while the app is\nrunning. When complete it should look like the following:\n\n![menu](https://www.doc.gold.ac.uk/~jfort010/ip/case-studies/music-vis/figures/menu.png)\n\n#### Spectrum analyser [4 marks]\n\nTake a look at the `Spectrum()` constructor function. The fast Fourier\ntransform analyse function (i.e. `p5.FFT.analyse()`) returns an array of\namplitude values for 1024 audible frequency values. The amplitude\nvalue is between 0 and 255. The visualisation draws a rectangle for\neach of these frequencies, the height of the rectangle is determined\nby the amplitude value for that frequency.\n\n- Change the visualisation so that visualisation is horizontal not\n  vertical. Therefore, the bars emerge from the left hand side of the\n  screen not from the bottom, as in the following image. You should do\n  without using the rotate() function [2 marks]\n\n  ![menu](https://www.doc.gold.ac.uk/~jfort010/ip/case-studies/music-vis/figures/spec.png)\n\n- Change the colour of each bar such that it gradually changes from\n  green to red based on the amplitude value [2 marks]. For example\n  - An amplitude value of 0 the colour values are R:0, G:255 and B:0.\n  - An amplitude value of 127 colour values are R:127, G:127 and B:0\n  - An amplitude value of 255 colour values are R:255, G:0 and B: 0\n\n- HINT: Both amplitude and colour are represented using the same range\n  of numbers (0–255). So the amplitude number can be passed directly\n  as an argument to the `red` parameter to control the amount of red\n  colour. For the `green` argument you will need to calculate the\n  correct value from the amplitude number.\n\n#### Needle plots [2 marks]\n\nThe `Needles` constructor function draws a visualisation that displays\nvolume values for 4 frequency bands: bass, mid-low, mid-high and\ntreble. When it is complete it looks like the image below:\n\n![menu](https://www.doc.gold.ac.uk/~jfort010/ip/case-studies/music-vis/figures/needles.png)\n\nAll the trigonometry has been done for you :)\n\nWithin the needles.js file, complete the nested `for` loop in the\n`this.draw()` function.\n\n- Assign values to the `x`, `y`, `w` and `h` variables so the plot is\n  drawn at the right location and correct size.\n- On line 49 call the `this.ticks(centreX, bottomY, freqLabel)`\n  function correctly specifying the arguments. This will add the ticks\n  to the graph. The comments above the `ticks` function should help\n  you work out what each parameter does.\n- On line 54 call the `this.needle(energy, centreX, bottomY)`\n  function. Specifying the correct parameters.\n\nTo get full marks on the needles display your output should look\nexactly the same as the image and resize correctly when switching\nbetween full screen and windowed modes.\n=======\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillkirkmanm%2Fmusic-visualiser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillkirkmanm%2Fmusic-visualiser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillkirkmanm%2Fmusic-visualiser/lists"}