How would you go about recreating this artwork in processing? (or a similar one on concept)
I’ve been squeezing my brain around it but can’t find a good solution. Can somebody help me?
1 Like
It’s a grid of fields.
-
Each field is made from a horizontal line A (let’s start top left corner: here left from the line the rect is colored black, right white)
-
now the idea: the lower x-pos of the line is growing right when you follow the rects in the grid to the right. So one cell in the grid to the right increase x of A by 5. When x touches the right side of the cell, it goes up the right wall of the cell (y shrinks, x constant).
-
Similarly: when you follow the grid down from the top left corner: the UPPER x-pos of the line is shrinking. When it meets the left side of the cell, it’s going down (increasing y)
You can achieve this when using quad within the grid
Both x-pos (or start and end points of the line, PVectors) follow the same rule, they start with different angles. Calc x,y from angle
Create a PGraphics that is width/15 by height/15.
Loop over the 15x15 grid. In the PGraphics, translate to the middle and then rotate by -TAU/24 * (i+j-1), then draw a black background and a white rectangle on the right side big enough to span the square when rotated. image() the PGraphics to the right place.
1 Like
The problem is that when the line passes the 45’ rotation my quads start to be flipped. How do i solve it?
1 Like
Welcome to the forum. 
@scudly has provided a solution but it might be nice to see it visually.
You can either use a PGraphic for a tile as this would automatically trim the excess. or use clip() to restrict the area to the tile size.
1 Like
Yeah, clip() is the easier way to go. 14 lines of code using clip() vs 15 for the PGraphics. (Or one less on each if you leave out noStroke().)
Nice visualization.