WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

SOLVED: Project 9, part 3

Forums > 100 Days of SwiftUI

Hi,

I'm currently working on project 9 part 3. The code below produces a checkerboard with black and white squares. However it can't work out how?

  // loop over all rows and columns, making alternating squares colored
        for row in 0..<rows {
            for column in 0..<columns {
                if (row + column).isMultiple(of: 2) {
                    // this square should be colored; add a rectangle here
                    let startX = columnSize * CGFloat(column)
                    let startY = rowSize * CGFloat(row)

                    let rect = CGRect(x: startX, y: startY, width: columnSize, height: rowSize)
                    path.addRect(rect)
                }

Thanks,

Ed

1      

Hi Ed,

What can you not work out!

I assume you have the rest of the code in the tutorial Animating complex shapes with AnimatablePair

struct Checkerboard: Shape {
    var rows: Int
    var columns: Int

    func path(in rect: CGRect) -> Path {
        var path = Path()

        // figure out how big each row/column needs to be
        let rowSize = rect.height / CGFloat(rows)
        let columnSize = rect.width / CGFloat(columns)

        // loop over all rows and columns, making alternating squares colored
        for row in 0..<rows {
            for column in 0..<columns {
                if (row + column).isMultiple(of: 2) {
                    // this square should be colored; add a rectangle here
                    let startX = columnSize * CGFloat(column)
                    let startY = rowSize * CGFloat(row)

                    let rect = CGRect(x: startX, y: startY, width: columnSize, height: rowSize)
                    path.addRect(rect)
                }
            }
        }

        return path
    }
}

then you can use it your view

struct ContentView: View {
    @State private var rows = 4
    @State private var columns = 4

    var body: some View {
        Checkerboard(rows: rows, columns: columns)
            .onTapGesture {
                withAnimation(.linear(duration: 3)) {
                    self.rows = 8
                    self.columns = 16
                }
            }
    }
}

1      

Hey Ed,

The way nested for loops work is basically this: for each time you run through the outside loop (row) you run ALL inside loops (column). So to make things simple let's assume you wanted to draw a 3x3 grid.

for row in 1...3 {
    for column in 1...3 {
    // column stuff here
    }
}

So when row = 1, it then goes through all 3 columns and draws them accordingly. When that is finished, moves to the next iteration of row = 2, then again goes through all 3 columns. And so on, until all rows have been completed.

A loop operates on the principle that ALL code within it has to complete before it moves to the next iteration.

So in the project, we are essentially drawing 1 row at a time. until we have the desired amount.

As for startX, you are basically on the horizontal axis. So you account for the width of each column. And that gives the initial x point for each square.

startY is on the vertical axis, so we account for the width of each row. which gives us the initial y point for each square.

1      

Hi all, thank you for responding! I understand the nested look, what i don't understand is which bit of code causes the squares to be either black or white?

1      

Hi @tillsonej .... this is it right here:

          if (row + column).isMultiple(of: 2) {
              // this square should be colored; add a rectangle here

So every other square gets the rectangle drawn, and is colored. Where no rectangle is drawn, there is just whitespace. Make sense?

1      

Hacking with Swift is sponsored by Fernando Olivares

SPONSORED Fernando's book will guide you in fixing bugs in three real, open-source, downloadable apps from the App Store. Learn applied programming fundamentals by refactoring real code from published apps. Hacking with Swift readers get a $10 discount!

Read the book

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.