CODEWITHSUNDEEP
p5.js
Soma Juice
Soma Juice

Reputation: 504

using functions or classes to create multiple prime spirals

Im trying to create several prime spirals, after inspiration from Dan Shiffmans coding challenge: https://www.youtube.com/watch?v=a35KWEjRvc0&t=716s&ab_channel=TheCodingTrain

I want the spirals to overlap each other, with a diffrent color and a offset in the starting point of the prime number sequence, to give each spiral a diffrent look. I would love to use OOP to solve this, but i cant get it to work with functions even, only one of the spirals is drawn.

I thought it could have something to do with the noLoop function , but removing it does not help.

And if you like the subject i can really recommend this numberphile video, going indepth on prime numbers:

// https://thecodingtrain.com/CodingChallenges/167-prime-spiral.html
// https://youtu.be/a35KWEjRvc0

let x, y;
let step = 1;
let stepSize = 20;
let numSteps = 1;
let state = 0;
let turnCounter = 1;
let totalSteps;
let offset = 0;

function isPrime(value) {
  if (value == 1) return false;
  for (let i = 2; i <= sqrt(value); i++) {
    if (value % i == 0) {
      return false;
    }
  }
  return true;
}

function setup() {
  createCanvas(500, 500);

  const cols = width / stepSize;
  const rows = height / stepSize;
  totalSteps = cols * rows;

  x = width / 2;
  y = height / 2;
  background(0);
}

function draw() {

  primeSpiral(20, 1)
  primeSpiral(30, 200)
  noStroke();
}


function primeSpiral(offset, color){
  if (!isPrime(step+offset)) {
    //might put something here

  } else {
    let r = stepSize * 0.5;
    fill(color, 99, 164);
    push();
    translate(x, y);
    rotate(-PI / 4);
    triangle(-r, +r, 0, -r, +r, +r);
    pop();
  }

  switch (state) {
    case 0:
      x += stepSize;
      break;
    case 1:
      y -= stepSize;
      break;
    case 2:
      x -= stepSize;
      break;
    case 3:
      y += stepSize;
      break;
  }

  if (step % numSteps == 0) {
    state = (state + 1) % 4;
    turnCounter++;
    if (turnCounter % 2 == 0) {
      numSteps++;
    }
  }
  step++;

  if (step > totalSteps) {
    noLoop();
  }
}

Upvotes: 0

Views: 58

Answers (1)

Josiah Leach
Josiah Leach

Reputation: 58

Your problem is that most of the variables should only be changed once both prime spirals have had a chance to draw a triangle.

"step" starts at 1. The first spiral checks if a triangle should be drawn with a "step" value of 1. Then "step" is increased by 1, and the other variables like "x" and "y" are changed accordingly. The second spiral then checks if it should draw a triangle with a "step" value of 2.

Because "step" is incremented every single time the primeSpiral() function is called, the second call to primeSpiral() every loop of the draw() function will always have an even "step" value. Since the "offset" value for this second call to primeSpiral() is also even, step+offset will always be even, therefore is will never be prime.

To fix this issue you must only change "step" once every frame. I have edited your code to fix this.

// https://thecodingtrain.com/CodingChallenges/167-prime-spiral.html
// https://youtu.be/a35KWEjRvc0

let x, y;
let step = 1;
let stepSize = 20;
let numSteps = 1;
let state = 0;
let turnCounter = 1;
let totalSteps;
let offset = 0;

function isPrime(value) {
  if (value == 1) return false;
  for (let i = 2; i <= sqrt(value); i++) {
    if (value % i == 0) {
      return false;
    }
  }
  return true;
}

function setup() {
  createCanvas(500, 500);

  const cols = width / stepSize;
  const rows = height / stepSize;
  totalSteps = cols * rows;

  x = width / 2;
  y = height / 2;
  background(0);
}

function draw() {

  primeSpiral(20, 1)
  primeSpiral(30, 200)
  
  incrementStep();
  
  noStroke();
}

function incrementStep()
{
  switch (state) {
    case 0:
      x += stepSize;
      break;
    case 1:
      y -= stepSize;
      break;
    case 2:
      x -= stepSize;
      break;
    case 3:
      y += stepSize;
      break;
  }

  if (step % numSteps == 0) {
    state = (state + 1) % 4;
    turnCounter++;
    if (turnCounter % 2 == 0) {
      numSteps++;
    }
  }
  step++;

  if (step > totalSteps) {
    noLoop();
  }
}

function primeSpiral(offset, color){
  if (!isPrime(step+offset)) {
    //might put something here

  } else {
    let r = stepSize * 0.5;
    fill(color, 99, 164);
    push();
    translate(x, y);
    rotate(-PI / 4);
    triangle(-r, +r, 0, -r, +r, +r);
    pop();
  }


}

The only changes I made were to remove all the code from the primeSpiral() function which were involved in changed the values of variables such as "step", "x", and "y" and moved that into a separate function called incrementStep(). This function is called once every frame, after both calls to primeSpiral().

Upvotes: 1

Related Questions