Drawing Triangles and Learning Processing part 1

I’ve spent about 20 hours now just drawing triangles using Processing. Processing is a programming language for drawing things with your computer. Recently, I’ve become more engrossed in the visual side of programming and exploring more of the intersection of the visual arts and technology. 

As with learning anything, the best way for me is to actually do something with it and figure it out as I stumble along. I have a concept for a triangle pattern that inspired me and I want to recreate it in Processing so I can make it interactive (more on that in a future post). 

Example (pardon the brutal colors):

How do you describe this pattern?

What I realized about visual programming is that I spend much more time thinking about how to explain the problem rather than figuring out how to code it. How do we explain this pattern? It’s a bunch of triangles, but if you just draw the same triangle over and over it won’t get that nice diamond pattern you see. You could break it down by line and you’ll find it’s two patterns that reflect each other. Or you could say that it has zig zags. After much pondering and help from a friend, we came up with an abstraction for explaining. Not as triangles, but as a square. 

Imagine a two dimensional grid with a 3 x 3 dot grid. Each of the rows in the list of numbers represents a triangle. This is actually the pattern we see repeating that creates that diamond effect. I can now abstract the x,y coordinates with zeroes and ones that we will translate to real x and y points on the canvas. 

There’s probably a mathematical formula here that could do this too, but that’s beyond my attention span. Instead we have a perfectly good abstraction of a single block that makes up an entire pattern. We can then replicate it on our canvas and achieve our pattern. 

The Code

void setup()
{
  size(800, 600);
  frameRate(1);
  noStroke();
}

boolean over = false;  // If mouse over

void randomFill()
{
  fill(color( random(20, 255), 
              random(0, 255), 
              random(100, 255)));
}

void draw_triangle( int dimension, int x1_coord, 
                    int y1_coord, int x2_coord, int y2_coord, 
                    int x3_coord, int y3_coord)
{
  // Set the points of the triangle
  int x1 = dimension * x1_coord;
  int y1 = dimension * y1_coord;
  int x2 = dimension * x2_coord;
  int y2 = dimension * y2_coord;
  int x3 = dimension * x3_coord;
  int y3 = dimension * y3_coord;
  randomFill();
  triangle(x1, y1, x2, y2, x3, y3);
}

// Draw the 8 triangle pattern
void pattern(int x, int y, int dimension)
{
  pushMatrix();
  translate(x, y);
  // Look familiar? It's our triangle point abstraction
  draw_triangle(dimension, 0, 0, 0, 1, 1, 0);
  draw_triangle(dimension, 0, 1, 1, 0, 1, 1);
  draw_triangle(dimension, 1, 0, 1, 1, 2, 1);
  draw_triangle(dimension, 1, 0, 2, 1, 2, 0);
  draw_triangle(dimension, 0, 1, 0, 2, 1, 2);
  draw_triangle(dimension, 0, 1, 1, 1, 1, 2);
  draw_triangle(dimension, 1, 1, 1, 2, 2, 1);
  draw_triangle(dimension, 1, 2, 2, 1, 2, 2);
  popMatrix();
}

void draw()
{
  background(100);
  fill( 0, 121, 184 );
  int dimension = 100;
  for (int i = 0; i < 800; i = i+200) {
    pattern(0, i, dimension);
    pattern(200, i, dimension);
    pattern(400, i, dimension);
    pattern(600, i, dimension);
  }
}

This is just an early sketch to prove we can make this pattern using the square abstraction (it can be cleaned up a good amount too). It’s pretty simple when you break a pattern into larger chunks. We basically had to figure it out once, then replicate it a bunch of times to fill the canvas. Eventually, I’ll add add interactivity and a way to randomly generate the filling of each triangle. I’m also going to do some math to fit the number of columns and rows and the size of the triangles based on the canvas size. I plan on porting this over to processing.js for use on a web page. Cool stuff!

5 Notes/ Hide

  1. alexkehayias posted this