Back to

2D Colour Grapher

Enter the x and y parts a function in terms of x and y and press the button below. It will be plotted on the canvas below, with each pixel's colour being calculated by some simple rules. The hue is the angle of the point from the x-axis, and the brightness is the distance away from the origin. You can also imagine this as the function mapping each point from the domain to a corresponding point on a colour wheel. Black always means a magnitude of 0, but the brightness is normalized by dividing each magnitude by the maximum magnitude.

This can get some pretty cool-looking graphs :) Keep in mind that the function is evaluated for each pixel, which is 262,144 times, so don't do anything too resource-intensive. Also, these equations are interpreted as plain Javascript, so you can use all the standard functions you want. A few functions have shorthands defined, for example sin(x) instead of Math.sin(x).

As for what looks cool: trig functions and polynomials both tend to work pretty well. Also try x = sin((x*5) * (x*5) + (y*5) * (y*5)), y = cos((x*5) * (x*5) + (y*5) * (y*5)).

f(x, y)x =
f(x, y)y =
pixels per unit =
transformx =
transformy =