Jesper Eklund - Web projects

Blood sugar web logging system

This is a complete single user web system to log blood sugar levels, the current insulin level and enter a note for each measurement if needed.

The backend is written in PHP and MySQL and the frontend in vanilla HTML, CSS and JavaScript.

To create or modify data, a secret token must be entered.

The form page contains a diagram showing the current prick spot on the finger, input fields and the latest measurements.

There is a page with a diagram showing the current insulin prick spot on the thigh.

Several aggregating graphs shows the levels over time. They have min max and mid readings.

There is a page with complete log in table format.

You can see the site (with my personal measurements) here

The source can be found here: github.com/jespereklund/blood-sugar-logger

Logging form with finger diagram and latest measurements.

Aggregated charts with blood sugar levels.

Smart SQL Grouping Data Zoom

This is a demonstration of an idea, to make a backend, that handles requests for a time-value chart, that always returns the same number of data rows, no matter the time period in the data.

This is done with some simple calculations and a GROUP BY clause in the SQL statement.

To calculate and use a numeric zoom factor, a unix timestamp is kept along the date in each row.

The demo dataset contains 32227 BTC prices and values.

The graph is using Chart.js and contains both the aggregated price and the aggregated volume.

There is a custom zoom level bar to show the selected period in the dataset.

The resulting SQL statement is send back to the client at can be monitored as the zoom level changes.

To use the chart, use the mouse to point where to zoom and use the mouse wheel to zoom in and out.

The source can be found here: github.com/jespereklund/sql-grouping-data-zoom

Synth: The Looper

The Looper is an polyphonic audio synthesizer that loops notes as if they were a single sample, giving them all different loop length, depending on the note, the higher, the shorter.

It contains of a volume knob for each note on a standard piano.

The timbre of the notes can be controlled with eight overtone knobs.

There is 10 out-of-the-box presets to choose from.

You can set the overall looping speed and the note decay.

Also, it has a variable reverberation.

The UI is written in Svelte and uses SVG to draw the knobs.

Utilizing the web standard Audio Worklet

The source can be found here: github.com/jespereklund/synth-the-looper

Synth: The Random Synth

The Random Synth is an polyphonic audio synthesizer that plays one or more random notes at an interval.

The note(s) can be quantized into a key and different harmonies, major, minor, chromatic, pentatone etc.

Portamento gives a gliding transition between the notes.

The Envelope shapes the dynamics of the notes.

The timbre of the notes is controlled by 9 overtone sliders

It has 10 presets out-of-the-box.

The UI is written in Svelte.

Utilizing the web standard Audio Worklet

The source can be found here: https://github.com/jespereklund/the-random-synth

Flyttemandsspillet (Rush Hour)

Classic puzzle game, where you have to get the red brick out in shortest number of moves, by dragging the bricks around.

There are 40 tracks and the score (lowest moves) is kept in local storage.

Written in vanilla JavaScript using HTML Canvas.

The source can be found here: https://github.com/jespereklund/flyttemandsspillet

Asteroids

This is my try on the classic Asteroids arcade game. It is written ground up with physics 'engine', collision-detection, splitting objects into more new objects, ufo behavior etc.

Written in vanilla JavaScript using HTML Canvas.

The source can be found here: https://github.com/jespereklund/asteroids

Fiskespillet (The Fishing Game)

This is a 2D physics game where you have to sort the fish in their correct baskets on time.

It uses matter.js for the physics, and has a highscore page with a simple PHP backend.

The source can be found here: https://github.com/jespereklund/fiskespillet

Fuglesymfoni (Bird Symphony)

This is an audio focused tile list of selected birds common in danish nature, where the volume of the song from each spices can be mixed together.

It has the option to choose all birds in a specific order or family.

Written in Svelte.

The source can be found here: https://github.com/jespereklund/fuglesymfoni

Wave Function Collapse

This is an extension of The Coding Trains Wave Function Collapse

Wave Function Collapse is a method to match different tiles together, so the borders are seamless and fit to each other.

The original code has been extended with several things, different tile sets, selectable tiles, adjustable size, start seed and a link to send the current configuration to a friend.

The source can be found here: https://github.com/jespereklund/wave-function-collapse

Fish Flocking (Boids)

This is an extension of The Coding Trains Flocking Simulation

It uses the HTML Canvas to draw the graphics.

I have extended the flock to have 4 different 'spices', each with a different color.

The spices have different behavior and speed. They try to avoid the other spices.

The overall behaviors can be set at the burger menu top left.

The source can be found here: https://github.com/jespereklund/boids

Asteroids

This is my try on the classic Asteroids arcade game. It is written ground up with physics 'engine', collision-detection, splitting objects into more new objects, ufo behavior etc.

Written in vanilla JavaScript using HTML Canvas.

The source can be found here: https://github.com/jespereklund/asteroids

Weather Station

This is a simple mashup to two public json api services from Open Meteo, a city lookup and a weather lookup.

It contains a smart roundtrip city search with national flags, and a responsive flex layout with the chosen cities.

The configuration i persistent using local storage.

Written in Svelte

The source can be found here: https://github.com/jespereklund/weatherstation

Aquarium

This pause aquarium contains 10 hand drawn and photoshopped fish with individual behaviors, adjustable population and an occasional submarine passing by...

To optimize loading time, all graphics is contained in one single sprite png file (with alpha), and the position and the orientation of each item is stored in an array.

Please don't tap on the glass!

The source can be found here: https://github.com/jespereklund/akvarium