textOutput() describes position incorrectly

[nickmcintyre]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.9.0

Web browser and version

Chrome 118, Firefox 120, Safari 17

Operating System

macOS

Steps to reproduce this

Steps:

1. Draw a circle at the center of the canvas.
2. Call textOutput(LABEL) and view the results.
3. Move the circle to the top-left to test an idea.
4. Call pixelDensity(1) to test the idea a little more.

Original

function setup() {
  createCanvas(400, 400);
  textOutput(LABEL);
}

function draw() {
  background(220);
  circle(200, 200, 50);
}

The sketch above produces the following description:

Text Output

Your output is a, 400 by 400 pixels, white canvas containing the following shape:

• white circle, at bottom right, covering 1% of the canvas.

white circle location = bottom right area = 1%

Move the circle to the top-left

function setup() {
  createCanvas(400, 400);
  textOutput(LABEL);
}

function draw() {
  background(220);
  circle(100, 100, 50);
}

The sketch above produces the following description:

Text Output

Your output is a, 400 by 400 pixels, white canvas containing the following shape:

• white circle, at middle, covering 1% of the canvas.

white circle location = middle area = 1%

Change the pixel density

function setup() {
  createCanvas(400, 400);
  textOutput(LABEL);
  pixelDensity(1);
}

function draw() {
  background(220);
  circle(200, 200, 50);
}

The sketch above produces the following description:

Text Output

Your output is a, 400 by 400 pixels, white canvas containing the following shape:

• white circle, at middle, covering 1% of the canvas.

white circle location = middle area = 1%

[nickmcintyre]

@calebfoss, @cosmicbhejafry, @apoorva-a98, @tedkmburu, @Zarkv, @SkylerW99, @itsjoopark, @hannahvy, @nhasalajoshi what do y'all think?

[ujjwaleee26]

@nickmcintyre can you assign this issue to me, I would love to work on this issue

[Qianqianye]

Thanks @nickmcintyre. I think @lm-n might have some thoughts on this too!

[umangutkarsh]

I think modying the function _shapeDetails() in textOutput.js will work.
I have solution for this, but I'm not able to test it since not able setup the dev environment. Can anyone help me out with this?
@Qianqianye

[umangutkarsh]

I think modying the function _shapeDetails() in textOutput.js will work. I have solution for this, but I'm not able to test it since not able setup the dev environment. Can anyone help me out with this? @Qianqianye

function _shapeDetails(idT, ingredients) {
  let shapeDetails = '';
  let shapeNumber = 0;
  // goes through every shape type in ingredients
  for (let x in ingredients) {
    // and for every shape
    for (let y in ingredients[x]) {
      // it creates a table row
      let row = `<tr id="${idT}shape${shapeNumber}"><th>${
        ingredients[x][y].color
      } ${x}</th>`;
      if (x === 'line') {
        row =
          row +
          `<td>location = ${ingredients[x][y].pos.x}, ${ingredients[x][y].pos.y}</td><td>length = ${
            ingredients[x][y].length
          } pixels</td></tr>`;
      } else {
        row = row + <td>location = ${ingredients[x][y].pos.x}, ${ingredients[x][y].pos.y}</td>;
        if (x !== 'point') {
          row = row + <td> area = ${ingredients[x][y].area}%</td>;
        }
        row = row + '</tr>';
      }
      shapeDetails = shapeDetails + row;
      shapeNumber++;
    }
  }
  return shapeDetails;
}

[ujjwaleee26]

@umangutkarsh Have you figured out a way of testing your code, Can you tell me please? been struggling for a while

[umangutkarsh]

@umangutkarsh Have you figured out a way of testing your code, Can you tell me please? been struggling for a while

@ujjwaleee26 even I'm not able to figure out, since the url in the readme is redirecting to 404 page. And after doing npm ci. It is not written how to start on localhost

[ujjwaleee26]

@umangutkarsh Have you figured out a way of testing your code, Can you tell me please? been struggling for a while

@ujjwaleee26 even I'm not able to figure out, since the url in the readme is redirecting to 404 page. And after doing npm ci. It is not written how to start on localhost

I asked on forum , but these commands dont work

[umangutkarsh]

@umangutkarsh Have you figured out a way of testing your code, Can you tell me please? been struggling for a while

@ujjwaleee26 even I'm not able to figure out, since the url in the readme is redirecting to 404 page. And after doing npm ci. It is not written how to start on localhost

I asked on forum , but these commands dont work

This means we don't have to run the local server. right? Can you share the link of this answer here?

[ujjwaleee26]

@umangutkarsh Have you figured out a way of testing your code, Can you tell me please? been struggling for a while

@ujjwaleee26 even I'm not able to figure out, since the url in the readme is redirecting to 404 page. And after doing npm ci. It is not written how to start on localhost

I asked on forum , but these commands dont work

This means we don't have to run the local server. right? Can you share the link of this answer here?

Yes but he says refer the bundle to testing webpage, how to do that

[limzykenneth]

@nickmcintyre The position used in these functions are calculated through applying the current transformation matrix of the canvas, for 2D it is this.drawingContext.getTransform(), to the passed in coordinate. Since with pixelDensity > 1 we are effectively creating a larger canvas and displaying it smaller on screen, this.drawingContext.getTransform() will have the transform value for the larger canvas. This can possibly be solved by scaling the resulting transformed coordinate back down by pixel density, which from my test seems to work, although will need to confirm whether there are edge cases.

For 3D it seems a bit more complicated but I'm still testing a few things out so see how it works.

@umangutkarsh @ujjwaleee26 The contributor docs 404 is due to your ISP DNS blocking Github's resource URL, changing your DNS setting to use a third party DNS provider will solve it, otherwise you can read the contributor docs directly on Github here: https://github.com/processing/p5.js/tree/main/contributor_docs

[limzykenneth]

From my test, WebGL probably never worked with Web Accessibility before and although some lines of code seems to try to account for it, it probably isn't fully tested. The main thing in terms of positioning is that it still assumes (0, 0) is at the top left corner instead of being in the middle of the canvas. It is possible to account for it but we may need to review the overall WebGL support of p5.js Web Accessibility first.

[calebfoss]

Oops! I introduced this bug. I opened #6649 to fix it.

@limzykenneth yeah I brought up the issues with WEBGL in #6126. I had planned to add in an error when trying to set up outputs in WEBGL mode, but I got stuck on trying to do that with the friendly error system.