# 「Processing」「P5.js」Matrix arrangement calculation difference

**URL:** <https://discourse.processing.org/t/processing-p5-js-matrix-arrangement-calculation-difference/32265>\
**Category:** Beginners\
**Created:** [September 15, 2021, 8:27am UTC](https://discourse.processing.org/t/processing-p5-js-matrix-arrangement-calculation-difference/32265 "2021-09-15T08:27:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [September 15, 2021, 8:27am UTC](https://discourse.processing.org/t/processing-p5-js-matrix-arrangement-calculation-difference/32265/1 "2021-09-15T08:27:16Z")

</div>

The same calculation method gets different results in 「processing」 and 「P5.js」.

## Processing:

```auto
int total;
float itemSize;

void setup() {
  size(400, 400);

  total = 6;
  itemSize = width/total;
}

void draw() {
  clear();

  for (int i = 0; i < sq(total); i ++) {
    float x = i % total * itemSize + itemSize/2;
    float y = i / total * itemSize + itemSize/2;
    fill(-1);
    circle(x, y, 30);
  }
}

```

Result：

 ![Snipaste_2021-09-15_16-17-24](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/413cc38a958e5d407a66119d8f3ac4587c075248.jpeg)

## P5.js

```auto
let total;
let itemSize;

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

  total = 6;
  itemSize = width / total;
}

function draw() {
  background(220);

  for (let i = 0; i < sq(total); i++) {
    let x = i % total * itemSize + itemSize / 2;
    let y = i / total * itemSize + itemSize / 2;

    circle(x, y, 30);
  }
}

```

Result：

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cbb9ab69cdf2a77f2eb01100f959553e92d67f7b.png)

I think the problem may appear in the “integer” and “floating point” issues, but it still can’t be solved after adjusting on P5.js.

Why does this happen? Very grateful for your help!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [September 15, 2021, 10:41am UTC](https://discourse.processing.org/t/processing-p5-js-matrix-arrangement-calculation-difference/32265/2 "2021-09-15T10:41:14Z")

</div>

In p5.js (JavaScript) numbers are all floats. So `i / total` can take value like 0.5 (when i is 3, for example)

However in processing, because you are using `int`, the result above will be 0 instead of 0.

You can use `floor(i / total)` to fix it in p5.js.

---

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [September 15, 2021, 10:47am UTC](https://discourse.processing.org/t/processing-p5-js-matrix-arrangement-calculation-difference/32265/3 "2021-09-15T10:47:10Z")

</div>

@micuat The problem was solved smoothly with your help, thank you very much!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2c0a726e341e01ae23cbe135430d82e1ad5de092.png)

This is the adjustment I made：

```auto
let total;
let itemSize;

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

  total = 6;
  itemSize = width / total;
}

function draw() {
  background(220);

  for (let i = 0; i < sq(total); i++) {
    let x = floor(i % total) * itemSize + itemSize / 2;
    let y = floor(i / total) * itemSize + itemSize / 2;

    circle(x, y, 30);
  }
}

```