This was my final project while I was at General Assembly. I decided to explore and experiment with a few libraries while learning React.
HTML, CSS, JS, React, React Router, P5.js. Tone.js, Particle.js, OpenWeather API.
In the site I included links to my other GA projects, which are all available to view on GitHub. Where things got really fun though was when I started making things specifically in React. I made a number of apps:
- Todo List: A bright and simple todo list. Add items or cross them off.
- Sketch: Using P5.js to continuously create a random sketch with a random colour. P5 doesn't play nicely with React because of how it manipulates the DOM so I had to use a P5wrapper to make it work.
- Clock: A blurry, stylised analogue clock that fades in and out of focus.
- Synth: This was my first dabble with Tone.js which is an incredibly powerful sound library. The frequency of the sound manipulates the display.
- Arp: Another app made with Tone.js. The is a keyboard that when clicked, adds the note to the pattern. You can choose the waveform and how the pattern will behave (up, down, down-up etc). Clear the pattern while it's playing to add melodies on top of the existing one.
- Particles: I had fun playing around with the Particles.js library. Click over the window for mouse interaction.
- Weather: A weather app using the Open Weather API. Shows the current weather, determined by user's current location.
- The main problem was using the external libraries in React. Given how React treats the DOM, it was hard learning React and these libraries at the same time.
- Given the time constraints, I didn't manage to flesh out some of these apps as much as I would have liked. I would like to make more of a traditional synth, with ADSR sliders and detune, seperate volumes and effects. This will be something I'll carry on experimenting with.
- I would also have liked to have a daily forecast with the weather app but unfortunately that is now a paid feature on OpenWeatherAPI now.