Snowflake App

We’re going to use for loops to draw some patterns. Fork this replit project to begin: https://replit.com/@buckldav/SnowflakeStarter#script.js.

The two functions that we will be modifying are:

function snowflake(x, y, radius, branches) {
  // TODO
}

function drawSnowflakes() {
  // TODO
}

Loop the Branches

Here is code to draw a single branch of a snowflake.

function snowflake(x, y, radius, branches) {
  branch(x, y, radius, branches)
}

function drawSnowflakes() {
  fill("cyan")
  stroke("blue")
  strokeWeight(5)
  snowflake(150, 150, 60, 6)
}

We need to modify snowflake() to call branch() branches times. To repeat the call of branch(), we can use a for loop.

For Loop

A for loop repeats a certain number of times. It is made of 4 parts:

for (initialization; condition; increment) {
  // body
}

• The initialization is where we declare a variable i to count up as we loop. let i = 0;
• The condition specifies when we stop the loop. i < 3;
• The increment specifies how much to increase i by each time through the loop. i++

// i++ means increment or increase i by 1 each time
for (let i = 0; i < 3; i++) {
  console.log(i)
}

Output:

0
1
2

There is no 3 printed because once i = 3, the condition becomes false (3 < 3) and the loop stops.

Snowflake For Loop

Here’s how we could apply a for loop to snowflake() to draw a branch branches amount of times.

function snowflake(x, y, radius, branches) {
  for (let i = 0; i < branches; i++) {
    branch(x, y, radius, branches)
  }
}

Add Some Randomness

When we call snowflake() in drawSnowflake(), we could use p5’s random function to randomize each parameter.

function drawSnowflakes() {
  fill("cyan")
  stroke("blue")
  strokeWeight(5)
  snowflake(random(100, 400), random(100, 400), random(40, 80), random(4, 6))
}

Floating Point vs. Integer Numbers

You’ll notice that your snowflake probably looks a little off. This is because random() produces a floating-point (decimal) number instead of an integer (whole number). This only affects us significantly for the branches parameter. To convert that floating-point number to the nearest integer, we can use p5’s int() function.

// Cast the branches random number to an int
snowflake(random(100, 400), random(100, 400), random(40, 80), int(random(4, 6)))

Draw Lots of Snowflakes

You can copy and paste your snowflake function calls like so…

function drawSnowflakes() {
  fill("cyan")
  stroke("blue")
  strokeWeight(5)
  snowflake(random(100, 400), random(100, 400), random(40, 80), int(random(4, 6)))
  snowflake(random(100, 400), random(100, 400), random(40, 80), int(random(4, 6)))
  snowflake(random(100, 400), random(100, 400), random(40, 80), int(random(4, 6)))
}

But now we have loops so there’s a better way! Remove the copy and pasted function calls and replace them with a for loop. Try it on your own, and if you can’t figure it out, check the answer.

function drawSnowflakes() {
  fill("cyan")
  stroke("blue")
  strokeWeight(5)

  // draw 3 snowflakes
  for (let i = 0; i < 3; i++) {
    snowflake(random(100, 400), random(100, 400), random(40, 80), int(random(4, 6)))
  }
}

Result: