Category Archives: Mathematics

Work in progress: Skyline

One of the features I want on my webpage is the silhouette of a skyline to use as background image. This project is aimed at allowing the user to draw a complex skyline, with the possibilty for animation.

Links

Live page
GitHub repository

Overview

The user can create individual “buildings” with many layers, and then arrange the buildings into a skyline to generate an image. If possible, the user can animate the image (for example adding lights at night, allowing the sky to change to match the time of day.)

The design would take place on the canvas, with a suite of tools to allow the user to correctly determine the size of buildings, add arches, spires etc. A second layer would allow the user to add windows, and a third layer would allow them to add other features. These would then be saved to file and a script would read the file to render the images on screen. The images would be rendered on a canvas that sits behind the main content of the page. This project is largely a problem of geometry.

Challenges

Challenge: Initially I wanted to set the canvas as the background of the page.
Solution: There are methds of taking the content of a canvas and using it to draw images that can be used with the DOM. I tried to use Javascript to change the source of the background image to match the canvas, but this lead to “flickering” effects, even when to canvases were used. As a result this was not a viable option. (Abandoned)
Challenge: The user needs a simple and intuitive interface.
Solution: This project allows the user to draw wire frames for the buildings. They can draw straight lines, circle arcs, and quadratic curves. The interface is not perfect, but it is easy enough to quickly make buildings. A grid is also provided so the user can keep track of sizes. (Resolved)
Challenge: This projects needs to be able to calculate interections and unions of polygons.
Solution: One of the hardest problems to solve is the interserction and union of two shapes, so that the user can make complex shapes. This is a non-trivial problems of geometry and finding solutions online was not east. I honest cannot remember if I completely solved this problem or not. (Resolved, to be revisited)
Challenge: This project would ideally respond to the client’s time.
Solution: Animation and time dependence has not been implemented yet, but eventually the colour of the sky and weather would chance, lights would turn on and off, and vehicles would move. This should be relatively simple to implement, once I find the time. (To do)

Sample output

Sample skyline.
Sample skyline.

LHC Driver

I wanted to make a “steady hand” game and realised I could make one based on the beams of the LHC. In this game the player(s) have to control magnets in the \(x\) and \(y\) directions to keep the beams on target. This eventually lead on to the Science Shift Simulator games.

Links

Live page
GitHub repository

Overview

Both beams have a random walk that moves them around the canvas. The player(s) can affect the forces that act on the beam(s) in the \(x\) and \(y\) directions and have to keep the beams within the valid range of the canvas. If the beams are close to each other then the instantaneous luminosity increases, and the integrated luminosity is a measure of the score. When the beams get dumped there is the customary toilet flush!

Challenges

Challenge: I had to make sliders to control the forces.
Solution: This is the first time I made some sliders (that I would later reuse in the Mandelbrot project) and it was trickier than I thought it would be. The event listeners need to keep track of all mouse and keyboard actions to use the slides properly and intuitively. (Resolved.)
Challenge: This was the first two player game I made.
Solution: Making a game that two players can play is a bit tricky, since their controls cannot be allowed to interfere with each other. This was achieved by moving both with the keyboard. (Resolved.)

Screenshots

Here is a screenshot of the game in its current form:

Screenshot of the LHC Driver game
Screenshot of the LHC Driver game

I don’t usually show screenshots of previous stages of development, but here is the first version of the game:

Screenshot of the previous version of the LHC Driver game
Screenshot of the previous version of the LHC Driver game

Spectrum

This project was made around the same time as the Reflections project, but I cannot remember which was written first.

Links

Live page
GitHub repository

Overview

This project takes a parametric equation provided by the user and then makes pretty curves, where the colours reflect the values of the parameters. This is performed in much the same way as in the Reflections project, except this time the user has complete freedom of the form of the expressions. This is achieved by writing the expressions directly as a Javascript macro embedded in the SVG. This way the expensive and potentially dangerous eval function is avoided, as it is in the Inverter project.

The \((x,y)\) values are determined using functions of a variable, \(t\), and a parameter, \(q\):

\(x = f(t;q)\), \(y = g(t;q)\), where the different colours correspond to different values of \(q\).

This project was used to make the icon for the LGBT CERN Twitter and Facebook accounts.

Challenges

Challenge: This project needed to have SVG and Javascript working together.
Solution: This is not easy! When embedding Javascript inside SVG is must be properly wrapped, and cannot use any external files. As a result that SVG file is often cumbersome and any libraries have to be written to the SVG file, making excessive use of Javascript unreasonable. (Although this didn’t stop me from trying to write an SVG based platform game.) (Resolved)
Challenge: This project required a smooth colour gradient for best effect.
Solution: This was one of the first times I needed to make a smooth colour gradient, and it is not as trivial as I might like. I found a way to quickly create an arbitrary colour gradient, which would help with many projects in the future, especially those that involve fractals. (Resolved)

Screenshot

Here is the output for \(x = 3\sin(q+2t\pi)\), \(y=t^2\), \(-1\lt t \lt 1\), \(0\lt q \lt 1\)

Screenshot for a Spectrum
Screenshot for a Spectrum

Iterated path

In 2014 the CMS experiment at CERN released their 2010 data to the public for analysis. As a quick exercise I decided to analyse the dimuon mass spectrum to show that this could be done in a reasonable amount of time.

Links

Live page
GitHub repository

Overview

The input file is the 2010 Run B comma separated values file. The python script then produces mass spectra for same sign and opposite sign mass spectra and zooms in on the interesting regions.

Challenges

Challenge: The main challenge was that this project was made as quickly as possible.
Solution: This project uses python and existing ROOT libraries for the maximal development speed. The other data format available was using CMSSW and a virtual machine. In principle using CMSSW should be straightforward, but I decided against using this because the software was already four years old and support would be minimal or non-existant, even to current CMS physicsts. (Resolved)

Sample output

Output for cosine(x)
Output for cosine(x)

Complex polynomial

On the Numberphile YouTube channel I saw a video that gave a proof that all complex polynomials have at least one solution. The method involved moving one point about the complex plane while another is mapped around a path elsewhere in the plane. I decided to map this out using Javascript!

Links

Live page
GitHub repository

Overview

The proof states that for a reduced polynomial \(f\) of order \(n\), for values of \(u = re^{i\theta} \in \mathcal{C}, |r| \gg 1 \), the function \(z = f(u)\), \(z\in\mathcal{C}\) will take values of the order \( |z| \sim r^n\). The value of \(r\) is then slowly and smoothly reduced, as \(\theta\) is allowed to increase at a constant rate. After many iterations the value of \(z\) will tend towards a constant value, which is the constant term in the polynomial. As a result the path traced out by \(z\) will pass through the origin, giving at least one solution to the polynomial.

This is handled in Javascript by making finite steps in \(r\) and \(\theta\), with small steps in time. Both paths are animated, to show the behaviour of \(z\) as a function of \(r\) and \(\theta\). The results can be quite beautiful!

Challenges

Challenge: This project requires timed Javascript and complex number manipulationn.
Solution: Both these problems have been overcome many times before in other projects, so they weren’t a problem here! (Resolved)

Screenshot

Paths in parts of the complex plane
Paths in parts of the complex plane

Update: tricolor

Today I refactored much of the tricolor project (live page), a cellular automata simulator. It’s one of those projects that had a great scope for improvement and extension, and was actually an offshoot of the Conway’s Game of life project.

The most significant improvements were:

  • Giving the user more control over the parameters. Many new variables were added that the user can edit, including the number of “breeds” of cells, number of “families”, the size of the cells, how the play area wraps around in the \(x\) and \(y\) directions, the base health of the cells, and after how long they start to decay (a new feature.)
  • Addition of the history bar. This records the recent evolutiom of the simulation, allowing the user to see how changing the different varaibles affects the overall stability of the populations.
  • Refactoring to object oriented code. Initially the code borrowed from Conway’s Game of Life, where the history of the cells was not important. As a result the code was simply a two dimensional array of states. As the tricolor cellular automata became more sophisticated it became necessary to introduce a class to handle the cells. This simplified the code greatly.
  • The user can now view the “health” of the cells. Each cell has a health associated with it, and turning on the option to see the health clarifies where most of the changes are taking place. The regions close to the boundaries have less health, giving a dark outline. Large areas without any “food” lose health, making the decay more obvious/
  • The layout of the page was tidied up significantly. There is less whitespace and better use of existing space. There is still room for improvement though, as a single button should be used for changing all settings, and a description of all the parameters should be given. It should also be made explicit which changes of settings require the play area to be completely redrawn.

Screenshots

Sample screenshot
Sample screenshot
Example history showing transient behaviour.
Example history showing transient behaviour.

pi estimation

This project was put together quickly while waiting for a physics job to finish. It was an exercise to see how quickly I could make a useful page with my current setup on my website. Including time to research, write, upload, and test the page it took around 20 minutes.

Links

Live page
GitHub repository

Overview

This page uses a Monte Carlo method to estimate π. This is a pure method in that it does not rely on knowledge of π to make the estimate, as some methods do. It throws random numbers in a two dimensional area and counts how many lie within the circle of radius \(1\) compared to a square of side \(2\).

Challenges

Challenge: This was all about speed.
Solution: I already knew everything I needed to put this page together, so it was simply a matter of how quickly I did it. I’m quite happy with the end result of 1020 seconds. (Resolved)

Sample output

Sample Monte Carlo output
Sample Monte Carlo output

Mandelbrot explorer

This project estimates the Mandelbrot set using the HTML5 canvas. It’s one of my longest running projects that has been implemented in PHP, SVG, HTML5 canvas, HTML tables, and even in ROOT.

Links

Live page
GitHub repository

Overview

This projects presents a wide range of different challenges. The aim is to create a fractal browser that pushes the operating environment to the limit in terms of performance, while still being user friendly and responsive. In its current iteration the user clicks on the region of the fractal they wish to explore and the project zooms in to that region. The user can change the way the fractal is coloured by changing the palette its properties. They can also move from the Mandelbrot set to the corresponding Julia set. There is also the option to explore the cubic Mandelbrot set. Past iterations have included even more fractals, including Newton iterations and generalised Julia sets. However these have been removed in this iteration as they should be refactored into a separate fractal class rather than inserted by hand.

Challenges

Challenge: The algorithm must be responsive and make reasonable use of memory.
Solution: The iterations used in the algorithm can be expensive when the image approaches several hundred thousand pixels. Currently the algorithm uses a pixel object to manage the colour at a given point, and for arbitrarily large images a single pixel object is used in order to reduce the cost of creating and storing large numbers of these objects. The current iteration uses Javascript in the user’s browser, and most modern browsers deal with excessive memory usage sensibly, killing particularly bad cases. It is not desirable to cap a user’s capabulities when it comes to image size, so instead the algorithm forces the browser to fail relatively safely and without major inconvenience. Previously this project ran on PHP on a shared server, so memory use had to be monitored and was formally enforced on the server, making failure modes potentially dangerous. Once the canvas became available I switched to using it very quickly. Even so, running PHP locally overnight to generate very large images is still a sensible use of resounces. There are probably other areas where savings could be made. (Resolved, to be revisited)
Challenge: The algorithm must make reasonable use of CPU.
Solution: In many cases the fractals take several tens of thousands of iterations per pixel for several thousand pixels, leading to large CPU usage. In the context of Javascript this can cause serious performance issues for the user, affecting their whole computing experience and not just that associated with the browser session. To mitigate this the iterations are interrupted every \(100 ms\) and forced to wait for \(10 ms\) before continuing. In addition when several small canvases are populated they are pushed into a queue which is processed serially with interruptions. This reduces the impact on the user’s CPU significantly leading to much smoother performance and better response to user input. Even so, this should be revisited to make further savings and be more responsive to the user’s inputs. (Resolved, to be revisited)
Challenge: The user interface must be intuitive.
Solution: In some senses it will never be possible ot make the user interface entirely transparent, given the technical nature of the fractal’s inner workings. In spite of this the way the user navigates is relativelt straightforward, but more improvments can and should be made. (Resolved, to be revisited)
Challenge: The palettes should be easy to edit.
Solution: The asethetic properties of the fractals often depend on the choice of palette. The palette scales can be manipulated, using slders on the log scale. This solution borrows from another project being developed in parallel, and leads to an easier interpretation of the scaling and distorting of the palette scale. This method should be tested in a “focus group” style environment. The user should be able to create and store a palette from scratch with their own choice of colours stops. (Resolved, to be revisited)
Challenge: The user should be able to store fractals.
Solution: The user can currently choose to save a fractal to the server, storing the \((x,y)\) coordinates, zoom, and other factors. This uses AJAX requests with a PHP and MySQL backend, which has become fairly standard in my projects by now. This comes with the usual MySQL injection overheads and PHP safety issues. In the future, as the number of fractals in the gallery increases, the gallery should be orgainsed in some manner to reduce bandwidth and CPU usage. (Resolved, to be revisited)
Challenge: The project should support arbitrary fractals for future expansion.
Solution: At the moment the fractal algorithms are hard coded into the project. This needs to be more object oriented in the future so that other developers can contribute their own fractals. (Partially resolved, to be revisited)

Sample output

Mandelbrot explorer output
Mandelbrot explorer output

Wolfram rules

I enjoy playing with recreational mathematics and the Wolfram rules are a rich source of complex behaviour from simple rules. So I created this project to explore how the rules can lead to different patterns.

Links

Live page
GitHub repository

Overview

This project allows the user to input different rules to create different patterns. The results are displayed in an HTML table which is automatically generated. I cannot remember the motivation for using an HTML table rather than the canvas, as there are obvious disadvantages to using a table, even if it does arrange the results in a semantic manner.

Challenges

Challenge: The interface has to be relatively intuitive.
Solution: Although the interface is simple, I am not satisfied that it is intuitive enough for someone new to Wolfram rules. This may need to be revisited, with some example rules explained to show how the game works. (Resolved, to be revisited)

Sample output

A rather interesting Wolfram pattern
A rather interesting Wolfram pattern