Pull Request for Utku Yakar

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.DS_Store
+.env
+.vscode/

README.md

@@ -1,64 +1,45 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
-
-For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser.
-
-- [Three.js Tutorial](https://github.com/jmcuneo/cs4241-guides/blob/master/using.three.md)
-- [WebAudio / Canvas Tutorial](https://github.com/jmcuneo/cs4241-guides/blob/main/using.webaudio_and_canvas.md)  
-- [SVG + D3 tutorial](https://github.com/jmcuneo/cs4241-guides/blob/main/using.svg_and_d3.md)  
-
-Baseline Requirements
----
-
-Your application is required to implement the following functionalities:
-
-- A server created using Express. This server can be as simple as needed.
-- A client-side interactive experience using at least one of the following web technologies frameworks.
-  - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences
-  - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations
-  - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers
-  - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML.
-  - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback.
-- A user interface for interaction with your project, which must expose at least four parameters for user control. [tweakpane](https://cocopon.github.io/tweakpane/) is highly recommended for this, but you can also use regular HTML `<input>` tags (the `range` type is useful to create sliders). You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that both mouse and touch events will both be supported in your app.
-- Your application should display basic documentation for the user interface when the application first loads.
-
-The interactive experience should possess a reasonable level of complexity. Some examples:
-### Three.js
-- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents.
-- A simple 3D game. You really want this to be a simple as possible or it will be outside the scope of this assignment.
-- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. 
-### Canvas
-- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using `<canvas>`; we'll be checking to ensure that your implementation is not a copy of these.
-- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience. 
-### Web Audio API
-- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis. If you want to use higher-level instruments instead of the raw WebAudio API sounds, consider trying the instruments provided by [Tone.js]() or [Gibber](https://github.com/charlieroberts/gibber.audio.lib).
-### D3.js
-- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-1. Test your project to make sure that when someone goes to your main page on Render, etc., it displays correctly.
-1. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-1. Fork this repository and modify the README to the specifications below. 
-1. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Grading
----
-Unlike previous assignments, this assignment will be solely graded on whether or not you successfully complete it. Partial credit will be generously given.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include the following:
-
-- the goal of the application
-- challenges you faced in realizing the application
-- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here.
+# A4 - Simple Audio Visualizer
+
+**Deployment** [Audio Visualizer - A4](https://a4-utku-yakar.vercel.app/)
+
+## What this is 
+A tiny Canvas + Web Audio API visualizer with a clean, minimal UI and a bottom player (play/pause/stop + seek bar). You load an audio file and tweak a few sliders to change the look/feel of the bars.
+
+## Why I built it this way
+Goal was to practice client-side multimedia (no frameworks) and keep the UI simple. I stuck to one visual mode (Bars) but gave it enough controls to feel interactive.\
+
+## Challenges I faced
+Getting the Web Audio API connected properly to the canvas took a bit of trial and error, especially figuring out FFT sizes and smoothing so the visuals looked good. I also had to debug file loading and make sure drag-and-drop, the progress bar, and the play/pause controls all stayed in sync.
+
+## Default settings
+- Mode: Bars
+- Bar/Point Count: 150
+- Sensitivity: 1
+- Smoothing: 0.92
+- FFT Size: 2048
+- Colors: Rainbow
+
+## Controls (≥4 exposed parameters)
+- Bar / Point Count (16–512)  
+- Sensitivity (0.5–3)  
+- Smoothing (0–0.98)  
+- FFT Size (512/1024/2048/4096)  
+- Colors (rainbow/mono/cool/warm)  
+- Bottom Player: Play • Pause • Stop • Seek (progress bar) • Time readout
+
+## How to use
+1. Click Load audio (or drag & drop a file anywhere).  
+2. Use the bottom player to Play/Pause/Stop. Drag the progress bar to scrub.  
+3. Adjust Bar/Point Count, Sensitivity, Smoothing, FFT Size, and Colors.  
+4. Tip: Spacebar toggles play/pause. Bigger FFT = more detail, higher smoothing = calmer motion.
+
+## Tech
+- Express server (serves /public, /health route).  
+- Canvas 2D for drawing.  
+- Web Audio API for frequency analysis.
+
+## Run it locally
+```bash
+npm install
+npm run dev
+# open http://localhost:3000