Create images using math equations

This is a free online tool to generate images from mathematical formulas.

You can use a math equation for each RGB color channel (red, green and blue), or a math equation for each HSL component (hue, saturation and lightness).

The equations will be used to determine the color of each pixel in the image, based on "x" and "y" position of the pixel in the image.

The equations can contain the variables "x", "y", and math functions, like "sin()", "cos()", "sqrt() and "random()".

To learn more, read the documentation below and the list of math functions. Also, look at the examples below and learn how they were created.

How to use this online tool

  1. Choose the image width and height.
  2. Choose a color representation (RGB or HSL).
  3. If using RGB, type the math equations for the "red", "green" and "blue" color channels.
  4. If using HSL, type the math equations for the "hue", "saturation" and "lightness".
  5. Choose the desired behaviour when the result of an equation is a value outside the accepted range. You can choose "bounce" (recommended), "clamp" or "remainder".
  6. Optionally choose the coordinates offset (x and y) and zoom.
  7. Click "download image" to download the image in PNG format.

Options

Image size
Math equations
Color representation
Additional configuration
Behaviour when RGB value is outside range [0-255]
Behaviour when saturation value is outside range [0-100]
Behaviour when lightness value is outside range [0-100]
Coordinates offset
You can also change the offset by clicking and dragging your mouse on the canvas.
Zoom
You can also change zoom by scrolling the mouse wheel on the canvas.

Generated image:

Examples

Below are some examples of images generated with this online tool.

Click on any image below to edit the equations and parameters.

Documentation

Image size

FieldDescription
Image widthThe width of the image, in pixels.
Image heightThe height of the image, in pixels.

Math equations

Before choosing the math equations, you must select the type of color representation to use to create the image (RGB or HSL).

FieldDescription
Color representationCan be RGB (red, green, blue) or HSL (hue, saturation, lightness).

If you choose RGB, you can choose the math equations for red, green and blue.

FieldDescription
RThe equation for the red color channel.
GThe equation for the green color channel.
BThe equation for the blue color channel.

If you choose HSL, you can choose the math equations for hue, saturation and lightness.

FieldDescription
HThe equation for hue.
SThe equation for saturation.
LThe equation for lightness.

In any equation, you can use variables "x" and "y" (pixel coordinates).

You can also use Javascript math functions, like "sin()", "cos()", "sqrt() and "random()".

Additional configuration

FieldDescription
Behaviour when value is outside RGB range [0-255]

The equations for R (red), G (green) and B (blue) must evaluate to numbers in the range between 0 and 255, for any pixel in the image.

For any pixel in the image, if an equation evaluates to a value outside this range, the value will be automatically adjusted to be in that range, based on the selected configuration (bounce, clamp or remainder).

This parameter determines how the values will be adjusted to belong to the range, when needed.

OptionDescription.
BounceThe value will keep "bouncing" between the min and max values (between 0 and 255).
ClampIf the value is lower than 0, it will be changed to 0 and if the value is greater than 255 it will be changed to 255.
RemainderIt will be applied the modulo (division remainder).

FieldDescription
Behaviour when saturation value is outside range [0-100]

The equations for S (saturation) must evaluate to numbers in the range between 0 and 100, for any pixel in the image.

For any pixel in the image, if an equation evaluates to a value outside this range, the value will be automatically adjusted to be in that range, based on the selected configuration (bounce, clamp or remainder).

This parameter determines how the values will be adjusted to belong to the range, when needed.

OptionDescription.
BounceThe value will keep "bouncing" between the min and max values (between 0 and 100).
ClampIf the value is lower than 0, it will be changed to 0 and if the value is greater than 100 it will be changed to 100.
RemainderIt will be applied the modulo (division remainder).

FieldDescription
Behaviour when lightness value is outside range [0-100]

The equations for L (lightness) must evaluate to numbers in the range between 0 and 100, for any pixel in the image.

For any pixel in the image, if an equation evaluates to a value outside this range, the value will be automatically adjusted to be in that range, based on the selected configuration (bounce, clamp or remainder).

This parameter determines how the values will be adjusted to belong to the range, when needed.

OptionDescription.
BounceThe value will keep "bouncing" between the min and max values (between 0 and 100).
ClampIf the value is lower than 0, it will be changed to 0 and if the value is greater than 100 it will be changed to 100.
RemainderIt will be applied the modulo (division remainder).

Coordinates offset

FieldDescription
Offset xThe "x" coordinate offset, in pixels. It determines the horizontal position of the "camera". Adjusting this offset lets you easily shift the view or "move" the camera without changing the math equations.
Offset yThe "y" coordinate offset, in pixels. It determines the vertical position of the "camera". Adjusting this offset lets you easily shift the view or "move" the camera without changing the math equations.

Zoom

FieldDescription
ZoomThe zoom. Changing this parameter allows you to easily "zoom in" or "zoom out" without changing the math equations.

Useful math functions

Below are some examples of useful Javascript mathematical functions that you can use in the equations.

You can use the Javascript functions like this:

Math.sin(x + y)

Or the short version, without the "Math.", like this:

sin(x + y)

Math functionEquivalent Javascript math functionDescriptionUsage example
sin()Math.sin()Returns the sine of a number in radians.sin(x/20) * 255
cos()Math.cos()Returns the cosine of a number in radians.cos(0.01 * y) * 255
atan()Math.atan()Inverse tangent, in radians.atan(0.01 * x) * 255
atan2()Math.atan2()Returns the angle in the plane (in radians) between the positive x-axis and the ray from (0, 0) to the point (x, y), for Math.atan2(y, x).atan2(y, x) * 255
pow()Math.pow()Returns the value of a base raised to a power.pow(x, y)
random()Math.random()Returns a pseudo-random number that's greater than or equal to 0 and less than 1, with approximately uniform distribution over that range.random() * 255
sqrt()Math.sqrt()Returns the square root of a number.sqrt(x) * 100
tan()Math.tan()Returns the tangent of a number in radians.tan(x*0.01) * 255
min()Math.min()Returns the smallest of the numbers provided as input parameters.min(x, y)
max()Math.max()Returns the largest of the numbers provided as input parameters.max(x, y)

For a full list of Javascript mathematical functions, check Javascript documentation here and here.

Related tools

Create images using Neural Networks

Create images using Neural Networks

Generate abstract images with this generative art tool.
Procedural Image Generator

Procedural Image Generator

Create images procedurally from basic shapes and mathematical formulas.
Procedural Animation Generator

Procedural Animation Generator

Create animations from basic shapes and mathematical formulas.
Turtle Graphics

Turtle Graphics

Easily create Turtle Graphics images and animations.
Huegene

Huegene

Create images and animations inspired by huegene cellular automata.
Spirograph

Spirograph

Create spirograph images and animations.

RGB Formula Editor

Edit images using math equations. Transform images by applying custom RGB formulas to each pixel.