Simple Shape Grid

A grid of simple geometric shapes

Log in to post a comment.

// You can find the Turtle API reference here: https://turtletoy.net/syntax
// Setup
Canvas.setpenopacity(1);
const turtle = new Turtle();

// Canvas is 200x200
const canvas_size = 200;

// Number of rows/columns in the grid
const size = 6; // min=1, max=12, step=1

// Size of each box in the grid
const box_size = canvas_size / size;

// Border surrounding each shape within each box
const border = 2; // min=0, max=8, step=1

// Size of each shape accounting for borders
const shape_size = box_size - border * 2;

// Array of shape drawing functions
let shape_functions = [
    circle_large, circle_small, circle_donut,
    square_large, square_small, square_donut,
    triangle, hourglass,
    curve, two_curves,
    three_bars,
    plus
];

// Array of offsets and headings to allow for randomizing shape orientations
let shape_orientations = [
    { dx: 0, dy:0, heading:0 },
    { dx: shape_size, dy: 0, heading:90 },
    { dx: shape_size, dy: shape_size, heading:180 },
    { dx: 0, dy: shape_size, heading:270 }
];

// Walk the grid, drawing each shape
function walk(i) {
    let x = parseInt(i / size, 10);
    let y = parseInt(i % size, 10);
    let shape_orientation = random_array_item(shape_orientations);

    // Move to adjuseted "top left" of the shape area of the grid box
    turtle.jump(x * box_size - canvas_size / 2 + border + shape_orientation.dx,
                y * box_size - canvas_size / 2 + border + shape_orientation.dy)
    turtle.setheading(shape_orientation.heading)

    // Pick a random shape and draw it
    let shape_func = random_array_item(shape_functions);
    shape_func(shape_size);

    // Check if this is the last grid box
    return i < (size * size) - 1;
}

// Pick a random item from an array
function random_array_item(array) {
    return array[parseInt(Math.random() * array.length, 10)];
}

function draw_box(length, width) {
    turtle.forward(length)
    turtle.right(90)
    turtle.forward(width)
    turtle.right(90)
    turtle.forward(length)
    turtle.right(90)
    turtle.forward(width)    
    turtle.right(90)
}

function square_large(size) {
    draw_box(size, size)
}

function square_small(size) {
    turtle.penup()
    turtle.forward(size / 3)
    turtle.right(90)
    turtle.forward(size / 3)
    turtle.left(90)
    turtle.pendown()
    
    draw_box(size / 3, size / 3)
}

function square_donut(size) {
    square_large(size);
    square_small(size);
}

function circle_large(size) {
    turtle.penup()
    turtle.forward(size / 2)
    turtle.pendown()
    turtle.circle(size / 2)
    turtle.penup()
    turtle.backward(size / 2)
    turtle.pendown()
}

function circle_small(size) {
    turtle.penup()
    turtle.forward(size / 2)
    turtle.right(90)
    turtle.forward(size / 4)
    turtle.left(90)
    turtle.pendown()
    turtle.circle(size / 4)
}

function circle_donut(size) {
    circle_large(size)
    circle_small(size)
}

function triangle(size) {
    let pos = turtle.pos()

    turtle.forward(size)
    turtle.right(90)
    turtle.forward(size)
    turtle.goto(pos)
}

function hourglass(size) {
    let diagonal = Math.sqrt(size * size * 2)
    turtle.forward(size)
    turtle.right(135)
    turtle.forward(diagonal)
    turtle.left(135)
    turtle.forward(size)
    turtle.left(135)
    turtle.forward(diagonal)
}

function curve(size) {
    turtle.circle(size, 90)
    turtle.right(90)
    turtle.forward(size)
    turtle.right(90)
    turtle.forward(size)
}

function two_curves(size) {
    turtle.circle(size / 2, 180)
    turtle.right(90)
    turtle.forward(size)
    turtle.penup()
    turtle.right(90)
    turtle.forward(size)
    turtle.right(90)
    turtle.pendown()
    turtle.forward(size)
    turtle.right(90)
    turtle.circle(size / 2, 180)
}

function three_bars(size) {
    draw_box(size, size / 5)
    turtle.right(90)
    turtle.penup()
    turtle.forward(size / 5 * 2)
    turtle.left(90)
    turtle.pendown()
    draw_box(size, size / 5)
    turtle.right(90)
    turtle.penup()
    turtle.forward(size / 5 * 2)
    turtle.left(90)
    turtle.pendown()
    draw_box(size, size / 5)    
}

function plus(size) {
    let len = size / 3;
    
    turtle.penup();
    turtle.forward(len);
    turtle.pendown();
    
    for (i = 0; i<4; i++) {
        turtle.forward(len)
        turtle.right(90)
        turtle.forward(len)
        turtle.left(90)
        turtle.forward(len)
        turtle.right(90)
    }
}