Anyone can be an Artist!

A CS109 Challenge entry by Allison Tee

Choose your distribution:

Normal

The poster child of distributions. Shows up the most often.

2022-05-30

The Normal disribution, AKA Gaussian or bell curve, dictates many natural phenomena such as height (most people are around average height, with fewer tall and short people), IQ, shoe size, etc. The graph of sample measures from even the weirdest distributions also tend towards the Normal (something called the Central Limit Theorem).

Creating (Better Than) Normal Art:

The Normal can be defined using two parameters: mean (the average value of something) and variance (how spread out the distribution is– though for our purposes, we’ll use the standard deviation, which is the square root of the variance). You can use normal distributions and a bit of computer magic to create unique, probabilistic art! Experiment with the parameters and colors below to create your colony of living 2D normal distributions:

See the Pen Living Normal by Ari (@worldsenddunce) on CodePen.

Notice that brighter colors correspond with denser parts of the distribution. The densest part of the normal is always around your specified mean location (the horizontal and vertical positioning). You can shrink or grow the width of your normal by changing the standard deviation as well.



Check out the generative art of other distributions!

Exponential

The distribution for the amount of time before something occurs.

2022-05-29

The graph of the exponential distribution is a steep, downward slope. It has one parameter: the number of times something usually occurs in one unit of time. More intuitively, this is the reciprocal of the amount of time it usually takes before the event happens. The situations this distribution models are usually framed as “Time until the next X,” such as the time until the next major earthquake, how long your phone battery lasts (time until it dies), and the time until your next nap.

Your own Mondrian (kind of)

Here’s a visual example of the exponential distribution at work. On average, this exponential draws lines a bit left of center (and repeats it in the horizontal direction), but the lines are quite spread out!

See the Pen Untitled by Ari (@worldsenddunce) on CodePen.

Notice that the timing of the drawn lines is also exponentially distributed– the closer to the left (or top) a line is, the faster it’s drawn onto the canvas!



Check out the generative art of other distributions!

Uniform

The most 'boring' distribution. Literally a rectangle.

2022-05-28

Imagine every event in a collection of events occuring with the same chance. That’s the uniform distribution. Examples of this would be each outcome for a die roll, fair coin flip, or random pick from a deck of cards.

A lovely, (un)uniform quilt

Although the uniform distribution is very graphically predictable, we can still create art with it in the form of a probabilistic quilt! In this scenario, you’re a quilt-maker with fabric of every imaginable color available to you. You close your eyes and randomly point to and select one color of fabric for each quilt patch, roll a die to choose one of six patterns for the patch, spin a spinner with three options to choose among three shapes for your patch (circle, diamond, or none), and roll another die and pick another random color if you chose a shape. Repeat this process for each patch, and the result would look something like this:

See the Pen Uniform Quilt by Ari (@worldsenddunce) on CodePen.





Check out the generative art of other distributions!

Poisson

Despite its name, this distribution is not toxic. Measures the amount of times something occurs within a given period.

2022-05-27

The Poisson distribution is discrete, and it has one parameter: the expected amount of times something occurs in a given timeframe (lambda). It models the respective probabilities of an event occuring any whole number of times. The number of times you greet someone you know in a day, stub your toe in a month, or yawn in a long meeting or lecture are just a few examples of Poissons in everyday life.

One Poisson, Two Poisson…

Did you know that poisson means fish in French? This means we can use the poisson to model the number of “poisson” that swim by in a given window. Try it yourself, and notice that as the lambda parameter gets bigger, the average number of fish that show up increases as well:

See the Pen Bugless Poisson by Ari (@worldsenddunce) on CodePen.

(The fishies like to jump out of the pond quite a bit– it’s a “feature,” not a bug)



Check out the generative art of other distributions!

Binomial

Normal's discrete cousin. The number of times something occurs in a set number of trials.

2022-05-26

The Binomial and Geometric distributions are both made up of the same fundamental unit: trials. Each trial is an attempt at a task that can result in a success or failure. The Binomial models the probability of the number of successes in n trials (giving us the probability of 0 up to n successes occurring). Examples of the binomial are the number of hoops you make if you shoot a basketball n times, the number of orange M&M’s you find in any given packet of M&M’s, or the number of times you flip heads in n coin flips.

Binomial Joy

The binomial has a nice, symmetric shape. It has two parameters: n, the number of trials you’re attempting, and p, the probability of success for any given trial. The center and spread of a distribution changes as you tweak with these two parameters. Try creating some jagged, binomial art:

See the Pen Binomial Joy by Ari (@worldsenddunce) on CodePen.

The mean of a binomial is n*p, so it decreases and increases with p. You can see this change in mean represented by the peak of the binomial shifting left and right as you change p!



Check out the generative art of other distributions!

Geometric

'At first you don't succeed, try, try again.' This distribution maps the number of times you need to attempt something before finally succeeding.

2022-05-25

The geometric distribution is discrete, so it deals with natural numbers. It has only one parameter, p, the probability of a “success” on a given attempt. The distribution graphs the probability that you succeed on a given trial.
The simple structure of scenarios that follow the geometric distribution is “number of X until you Y”. Some examples are: the number of coin flips until you get heads (a Geometric with probability 0.5), the number of die rolls until you roll a 6 (p = 1/6), the number of basketball shots attempted until you make it (let’s say you’re really good at basketball, so your probability of making any given shot is 0.8), and there is even Geometric to be found in the popular TV show Squid Game.

Geometree-c art

Try creating a forest of trees that follows the geometric distribution. In this special, enchanted probability forest, each tree starts at the same height. A tree has a probability of p of growing one additional unit. For instance, if p = 0.5, then around 50% of all trees would be the minimum height, 50% of the remaining taller trees would be one unit above the minimum height, 50% of the trees that grow past that would be two units above the minimum height, and so on. Basically, at each growing phase, there’s a probability of p that a tree stops growing.

See the Pen Geometree-c by Ari (@worldsenddunce) on CodePen.

Notice that as p gets larger, on average, the trees get shorter.



Check out the generative art of other distributions!