I’m going to keep this tutorial light on math, because the goal is just to give a general understanding. Monte Carlo methods originated from the Manhattan Project, as a way to simulate the distance neutrons would travel through various materials [1]. Ideas using sampling had been around for a little while, but they took off in the making of the atomic bomb, and have since appeared in lots of other fields. The idea is this—generate some random samples for some random variable of interest, then use these samples to compute values you’re interested in. I know, super broad. The truth is because Monte Carlo has a ton of different applications, it’s hard to get a more precise definition. It’s used in product design, to simulate variability in parts manufacturing. It’s used in biology, to simulate average distance of a bird from its nest, which would allow a scientist to calculate energy expended. It can be used in AI for games, for example, the chinese game Go. And finally, in finance, to evaluate financial derivatives or option pricing [1]. In short—it’s used everywhere. The big advantage with Monte Carlo methods is that they inject randomness and real-world complexity into the model. They are also more robust to adjustments such as applying a distribution to the random variable you are considering. The justification for a Monte Carlo method lies in the law of large numbers. I’ll elaborate in the first example. Estimating Pi We can use something called the random darts method, a Monte Carlo simulation, to estimate pi. Here is my R code for this example. The logic goes as follows— If we inscribe a circle in a square, where one side length of the square equals the diameter of the circle we can easily calculate the ratio of circle area to square area. Now if we could estimate this value, we would be able to estimate pi. We can do this by randomly sampling points in the square, and calculating the proportion of those inside the circle to the total points. So I just calculate red points over total points, and multiply by 4. We can see that as the number of points increases, the closer our value will get to pi. This is the law of large numbers at work. This is a simple example of a Monte Carlo method at work. We had some value we wanted to estimate, and we…

Read More## Curves in Processing, Part 1. Arcs

There are three types of curves in Processing—arcs, spline curves and bèzier curves. These two posts will describe them in depth. You can grab the code for the bigger examples on my Github, although it’s right below too. If you don’t know what Processing is, or need help downloading, go here. Part 1. Arcs Arcs are the simplest of the 3 types of curves in Processing. The arc function is described below.

1 |
arc(x, y, width, height, start, stop) |

The x, y, width, and height are pretty intuitive. It’s a little box that your curve fits into. Start is the starting angle (in radians!) for your curve, and stop (also in radians!) is the ending angle. Below is a simple example of an arc.

1 2 3 4 5 6 7 8 |
size(300,300); smooth(); background(255); noFill();</code> <code>int x = 150 int y = 150; int wide = 200; int high = 100; arc(x, y, wide, high, PI/2, 3*</code>PI/2); |

Note – the start and stop points must be in numerical order. Recall the unit circle. You can’t go from 2pi to pi, BUT, you can go from 2pi to 3pi, which is the same from a visual standpoint. Arches Example Let’s explore the geometry a little more. The color array is just an array of hex codes, so I can access them later in the code. In the void setup() block of code, nothing too crazy is happening. We should note that noFill() is critical here, otherwise your arc will have a white fill. The draw block is where everything is happening. I randomly set the stroke, indexing my array. I have to continuosly reset the strokeWeight to 2, since I change it later in the draw method. The possible x values start are from [0,800] incrementing by 50. The possible w values are [100,800] incrementing by 100. So the arc function has a unique width and x value each time, but everything else remains fixed. The little block of code starting with stroke(#FFFFFF) makes those little white dots. Notice the for loop is just like java.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// Thanks to Jon in the comments for catching my stupid mistakes! color[] atlas = {#59AEE1, #7A102D, #1581C4, #C6B32E, #1581C4, #7A102D, #59AEE1}; int x; int w; void setup() { size(800,525); smooth(); background(180); noFill(); }; void draw() { stroke(atlas[int(random(7))]); strokeWeight(2); // choosing the x value! x = 50*(int(random(17))); w = 100*int(random(1, 9)); // int w = 500; // Another cool option! arc(x, 450, w, 750, PI, 2*PI); stroke(#FFFFFF); // stroke = white strokeWeight(14); // These are the white points. for (int i = 50; i <= 800; i = i + 50) { point(0, 450); point(i, 450); } } |

And the output should look like this! Be sure to play around with the code a bit! That picture at the top is what happens when you mess with the code, something cool that you didn’t plan for. I’ll have part two up soon.

Read More## Getting Started With Processing

Processing is a language for visualization. It started as a tool to bring designers into the world of coding, but ended up being super useful and attracting more attention. It’s free, easy to use, and can produce some beautiful visualizations. Also, it’s based in Java, so if you know Java, this will be intuitive. If not, it’s a great way to get your feet wet. If you find yourself becoming Processing obsessed, go to the source. Go here for downloading information. First example Open Processing, click File -> New. Then you can simply copy and paste this code into the IDE!

1 2 3 4 5 6 7 8 9 10 11 |
size(600,200); // sets size of window frame background(150); // background color o a 0-255 grayscale</code> <code>stroke(#0BE2FF); // color of borders strokeWeight(15); // size of the borders</code> <code>point (100,100); // the coordinates of the points. point (150,100); point (200,100); point (250,100); point (300,100); point (350,100); point (400,100); point (450,100); point (500,100); |

Really simple. Play with the coordinates, the hex code, the strokeWeight. Second Example The ellipse function is used to make a circle. It follows the format ellipse(x, y, width, height). So if width and height are different, it’s not a circle, it’s an ellipse. Notice that we can make circles using really big points (a high strokeWeight), or using the ellipse function. It also worth noting that as y gets larger, the object will go down in the window frame.

1 2 3 4 5 6 7 8 9 10 11 12 |
size(650,800); smooth(); // raises quality of visual background(180);</code> <code>noStroke(); // declares no borders, just fill. fill(#49B648); ellipse(100, 100, 100, 100); // the first of many circles. </code> <code>fill(#F8B417); ellipse(250, 100, 100, 100);</code> <code>fill(#ED1C24); ellipse(400, 100, 100, 100);</code> <code>fill(#232564); ellipse(550, 100, 100, 100);</code> <code>fill(#ED1C24); //start of second row ellipse(100, 250, 100, 100);</code> <code>fill(#49B648); ellipse(250, 250, 100, 100);</code> <code>fill(#4AC7EF); ellipse(400, 250, 100, 100);</code> <code>fill(#F8B417); ellipse(550, 250, 100, 100); |

Again, pretty simple. Third Example Time to get a little more tricky. First let’s introduce setup() and draw(). setup() designates a block of code that will be run once by the program. draw() designates a block of code that will be run continuously by the program. The default “frame rate” is 60 times per second. The circles are different sizes because each frame the parameters are being randomly re-chosen. Lastly, the color palette. It’s a simple idea. We just fill an array with some hex codes of colors we like, then index it to get the color, instead of repeating the hex code each time!

1 2 3 4 5 6 7 8 9 10 11 12 13 |
color[] palette = {#1A4F7A, #DC5E4B, #59C0E1, #9BA6B9, #261C1A}; </code> <code>void setup() { size(600,200); smooth(); noFill(); strokeWeight(5); };</code> <code>void draw() { float x = random(width); float y = random(height); float d = random(5, 100); stroke(palette[(int(random(5)))]); ellipse(x,y,d,d); }; |

Some other basic Processing functions include rect() and line(). Using these functions is trivial, combining them in a cool way is the harder part. And that’s all for tonight! I promise I have cooler things than this coming.

Read More