Christmas with Processing

If you usually write only data manipulation and user interface programs, you sometimes want to write programs that have nothing to do with your work. That's why this time, let's draw a little Christmas-like picture with Processing.

What is Processing?

Processing is a programming language and integrated development environment for electronic art and visual design. It may seem a little difficult to write like this, but I think it's okay if you think about it enough to draw a picture by writing a program. Since the changes caused by the written program can be seen immediately, the difference in execution results is easier to understand than in a program that manipulates data.

Processing is made in Java, and the program is basically written in Java, but it can also be written in Python or JavaScript by adding a mode. Try Processing in the programming language you are interested in.

Let's install

To install Processing, simply download the ZIP file from the page below, unzip it, and then double-click Processing.exe on Windows or Processing.app on Mac.

https://processing.org/download/

When you start Processing, the following IDE will be displayed.

Let's draw something at once. Please copy the program below, paste it into the IDE, and run it. Execute is the button with the triangle on the upper left.

size(300,250);
background(255);
stroke(0);

fill(255);
ellipse(150,160,100,100); // body
line(110,130,70,100); // left arm
line(190,130,230,100); // right arm
ellipse(150,100,60,60); // head
arc(150, 106, 30, 25, -TWO_PI, -PI); // mouth

fill(0);
rectMode(CENTER);
rect(150,65,34,20); // hat
line(125,75,175,75); // brim
ellipse(142,92,5,5); // left eye
ellipse(158,92,5,5); // right eye

noStroke();
fill(255,100,0); 
ellipse(150,102,7,7); // nose

Sample program

This time I will not mention how to write a Processing program. You can find many ways to write Processing and sample programs by searching the Web. By copying the sample program or rewriting it and moving it, you will understand how to write the program immediately, so it is recommended to move a lot of sample programs. Here are some sample programs.

illumination

If you feel that the room is bleak even though it's Christmas, turn your PC display into Christmas illuminations. Try adjusting the drawing area and the size of the circle in the sample program to make the display gorgeous. All I'm doing is using random numbers to change the coordinates, circle size, color, and transparency. setup () is run only once at the beginning, and draw () is run repeatedly on a regular basis.

void setup() {
  size(700,400);
  background(0);
  smooth();
}

void draw() {
  float r = random(255);
  float g = random(255);
  float b = random(255);
  float a = random(255);
  float x = random(width);
  float y = random(height);
  float diameter = random(20);
  
  noStroke();
  fill(r,g,b,a);
  ellipse(x,y,diameter,diameter);
}

Draw a tree with fractal shapes

A fractal figure is "a figure whose part and the whole are self-similar (recursive)". There are many types of fractal shapes, but let's draw something like a tree after the Christmas tree.

int angle = 110;

void setup() {
  background(255);
  size(600, 600, P2D);
  
  tree(300, 600, 0.0, radians(0), radians(angle), 200, 10);
  tree(300, 600, 0.0, radians(angle), radians(0), 200, 10);
}

void tree(float posX, float posY, float angle, float forkRight, float forkLeft, float length, int counter) {
  if (counter == 0) {
    return;
  }

  float nextX = posX + length * sin(angle);
  float nextY = posY - length * cos(angle);

  line(posX, posY, nextX, nextY);
  
  tree(nextX, nextY, angle + forkRight, forkRight, forkLeft, length*0.6, counter - 1);
  tree(nextX, nextY, angle - forkLeft,  forkRight, forkLeft, length*0.6, counter - 1);
}

It may be difficult to read if you are not familiar with recursive processing, but the same shape is reduced and drawn repeatedly a certain number of times. If you change the value of angle, the shape of the tree will change, so let's try it. The following is the drawing result when size = 80.

Draw a snowflake with a fractal shape

A type of fractal figure is the Koch curve. The following figure can be created by dividing the line segment into three equal parts and repeating the drawing of an equilateral triangle with the two divided points as vertices infinitely.

If you place this Koch curve in an equilateral triangle, a figure like a snowflake will appear. This shape is called a Koch snowflake.

The sample below is a program that creates Koch snowflakes step by step. Let's actually move it and see how Koch snowflakes are made.

int depth = -1;

void setup(){
  background(255);
  size(400, 400);
  frameRate(1);
}

void draw() {
  background(255);
  depth++;
  if (depth > 5) {
    depth = 0;
  }

  int border = (int) (width * 0.8);
  int triangleHeight = (int) (border * Math.sin(Math.toRadians(60.0)));
  
  Point p1 = new Point(width / 2, 10);
  Point p2 = new Point(width / 2 - border / 2, 10 + triangleHeight);
  Point p3 = new Point(width / 2 + border / 2, 10 + triangleHeight);

  drawKochCurve(depth, p1, p2);
  drawKochCurve(depth, p2, p3);
  drawKochCurve(depth, p3, p1);
}

void drawKochCurve(int count, Point p1, Point p2) {
  stroke(0);

  if (count == 0) {
    line(p1.x, p1.y, p2.x, p2.y);
  } else {
    int deltaX = p2.x - p1.x;
    int deltaY = p2.y - p1.y;
    
    double cosConst = Math.cos(Math.toRadians(30.0));
    int zx = (int)((p1.x + p2.x)/2 + cosConst * (p1.y - p2.y)/3.0);
    int zy = (int)((p1.y + p2.y)/2 + cosConst * (p2.x - p1.x)/3.0);
    
    Point x = new Point(p1.x + deltaX / 3, p1.y + deltaY / 3);
    Point y = new Point(p1.x + deltaX * 2 / 3, p1.y + deltaY * 2 / 3);
    Point z = new Point(zx, zy);

    drawKochCurve(count - 1, p1, x);
    drawKochCurve(count - 1, x, z);
    drawKochCurve(count - 1, z, y);
    drawKochCurve(count - 1, y, p2);
  }
}

class Point {
  int x;
  int y;
 
  Point(int x, int y){
    this.x = x;
    this.y = y;
  } 
}

The Nature of Code How was it so far? I hope you will be interested in Processing as much as possible. Finally, let me introduce you to "The Nature of Code". "The Nature of Code" is a book about how to use Processing to describe the rules of nature such as the laws and formulas of physics and mathematics. The fractal figures introduced this time are also described in detail, so please read them if you are interested.

https://www.amazon.co.jp/Nature-Code-Processingではじめる自然現象のシミュレーション-ダニエル・シフマン/dp/4862462456

The English version can be viewed for free from the following site.

https://natureofcode.com

Have a nice Christmas, everyone.