# Display Issue - Same sketch displays diff on diff computers

**URL:** <https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305>\
**Category:** Beginners\
**Created:** [July 17, 2021, 5:25pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305 "2021-07-17T17:25:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BigBigRed](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Post date:** [July 17, 2021, 5:25pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305/1 "2021-07-17T17:25:23Z")

</div>

I have a p5js sketch that displays differently on my desktop computer than on my laptop computer.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/44edc938275f8dc36e62239801d9e3d9488f8a4c.png)  
The problem apparently comes from from the graphic(s) named Mandlebrot.  
On the laptop computer, the image for mandlebrot fills the 250 by 250 area correctly (as intended).  
on the desktop computer, the 250 by 250 area contains two reduced mandlebrots with the width height proportions changed.  
The sketch did work as intended on the desktop but does not now. I admit that I did change some display settings on the desktop recently. For the desktop, I have tried every ‘return to default settings’ button that I can find but I still see different displays/ pictures/ screens on the two computers.

The desktop computer is an i5-5257U CPU \* 2.7 Ghz, 8 Meg Ram installed, and Intel Iris graphics 6100 GPU, running Windows10.

Any insight would be appreciated. ?maybe I need to declare a renderer or something?

Sketch code is:

```auto
let myW, maxiterations;
let mandlebrot, dance;
let mandlebrotStart;
let currentLocation;
let danceScale;

function setup() {
  createCanvas(600, 450);
  mandlebrot = createGraphics( 250, 250);
  mandlebrotStart = createVector(width/2+20, 20);
  dance = createGraphics(mandlebrot.width, mandlebrot.height);

  background(0);
  mandlebrot.background( 30);
  // Establish a range of values on the complex plane
  // A different range will allow us to "zoom" in or out on the fractal

  // It all starts with the width, try higher or lower values
  myW = 4; // Number of units to display
  danceScale = int(dance.width/myW);
  const h = ( myW * mandlebrot.height) / mandlebrot.width;

  // Start at negative half the width and height
  const xmin = - myW/ 2;
  const ymin = -h/2;

  // Make sure we can write to the pixels[] array.
  // Only need to do this once since we don't do any other drawing.
  mandlebrot.loadPixels();

  // Maximum number of iterations for each point on the complex plane
  maxiterations = 60;

  // x goes from xmin to xmax
  const xmax = xmin + myW;
  // y goes from ymin to ymax
  const ymax = ymin + h;

  // Calculate amount we increment x,y for each pixel
  const dx = (xmax - xmin) / mandlebrot.width;
  const dy = (ymax - ymin) / mandlebrot.height;

  // Start y
  let y = ymin;
  for (let j = 0; j < mandlebrot.height; j++) {
    // Start x
    let x = xmin;
    for (let i = 0; i < mandlebrot.width; i++) {

      // Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
      let a = x;
      let b = y;
      let n = 0;
      while (n < maxiterations) {
        const aa = a * a;
        const bb = b * b;
        const twoab = 2.0 * a * b;
        a = aa - bb + x;
        b = twoab + y;
        // Infinty in our finite world is simple, let's just consider it 16
        if (dist(aa, bb, 0, 0) > 16) {
          break; // Bail
        }
        n++;
      }

      // We color each pixel based on how long it takes to get to infinity
      // If we never got there, let's pick the color black
      const pix = (i+j*mandlebrot.width)*4;
      const norm = map(n, 0, maxiterations, 0, 1);
      let bright = map(sqrt(norm), 0, 1, 0, 255);
      if (n == maxiterations) {
        bright = 0;
      } else {
        // Gosh, we could make fancy colors here if we wanted
        mandlebrot.pixels[pix + 0] = bright;
        mandlebrot.pixels[pix + 1] = bright;
        mandlebrot.pixels[pix + 2] = bright;
        mandlebrot.pixels[pix + 3] = 255;
      }
      x += dx;
    }
    y += dy;
  }
  mandlebrot.updatePixels();
  image( mandlebrot, mandlebrotStart.x, mandlebrotStart.y, mandlebrot.width, mandlebrot.height);
  print("DX is "+round(dx,4)+", DY "+round(dy, 4));
  print("Width is "+mandlebrot.width+", Height is "+mandlebrot.height);
  print ("Time to finish setup "+round(millis()/1000,2)+" seconds");
  dance.background(150);
  /// mandlebrot.save('Mandlebrot001.jpg');
}

function draw() {
  image( dance, 20, 20, dance.width, dance.height);
  
}

function mouseMoved() {
  
  if (mouseX>mandlebrotStart.x && mouseX< mandlebrotStart.x + mandlebrot.width && mouseY > mandlebrotStart.y && mouseY < mandlebrotStart.y + mandlebrot.height) {
  currentLocation = createVector(mouseX - mandlebrotStart.x, mouseY - mandlebrotStart.y);
    let convertedX = currentLocation.x - dance.width/2;
    convertedX /= danceScale;
    let convertedY = currentLocation.y - dance.height/2;
    convertedY /= danceScale;
    convertedLocation = createVector(convertedX, convertedY);
    
    //print("Screen "+round(currentLocation.x,2)+", "+round(currentLocation.y,2)+", converts to "+round(convertedLocation.x,2)+", "+round(convertedLocation.y,2));
    dance.background(150);
    dance.fill(20);
    dance.stroke(20);
    dance.circle(currentLocation.x, currentLocation.y, 4);
    noStroke();
    fill(00);
    rect(40, height-60, width - 40, 60);
    fill(250);
    textSize(18);
   
    
    let a = convertedLocation.x;
    let b = convertedLocation.y;
    let n = 0;
    let sequence = [];
    sequence[0] = createVector(a, b);
    for (let i=1; i< maxiterations; i++) {
      const aa = a * a;
      const bb = b * b;
      const twoab = 2.0 * a * b;
      a = aa - bb + convertedLocation.x;
      b = twoab + convertedLocation.y;
      sequence[i] = createVector( a, b);
      if (dist(aa, bb, 0, 0) > 3) {
          break; // Bail
      }
      //n++;
    }
    text("X is "+round(convertedLocation.x,2)+", Y is "+round(convertedLocation.y,2)+", No of Points is "+sequence.length, 40, height - 40);
    dance.stroke(60);
    dance.strokeWeight(1);
    if(sequence.length > 1) {
      for (let i=1; i< sequence.length; i++) {
        dance.line(sequence[i-1].x * danceScale + dance.width/2, sequence[i-1].y * danceScale + dance.height/2, sequence[i].x * danceScale + dance.width/2, sequence[i].y * danceScale + dance.height/2);
        //print(round(sequence[i-1].x * danceScale + dance.width/2,2)+", "+round(sequence[i-1].y * danceScale + dance.height/2,2)+", then "+round( sequence[i].x * danceScale + dance.width/2,2)+", "+round(sequence[i].y * danceScale + dance.height/2,2));
      }
    }
    for (let i=0; i < sequence.length; i++) {
         dance.circle(sequence[i].x * danceScale + dance.width/2, sequence[i].y * danceScale + dance.height/2, 5);
         }
    dance.text(" Start",sequence[0].x * danceScale + dance.width/2, sequence[0].y * danceScale + dance.height/2); 
    let sequenceString= "";
    for (let i=0; i<sequence.length; i++) {
      sequenceString = sequenceString+" ("+round(sequence[i].x,2)+", "+round(sequence[i].y,2)+"), ";
    }
    text(sequenceString, 40, height - 10);
  }
  strokeWeight(1);
  stroke(100);
  dance.line(0, dance.height/2, dance.width, dance.height/2);
  dance.line(dance.width/2, 0, dance.width/2, dance.height);
}

```

---

<div class="post-metadata">

**Author:** ![BigBigRed](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Post date:** [July 17, 2021, 5:28pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305/2 "2021-07-17T17:28:27Z")

</div>

Post has been cleared of its code by the original poster.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 17, 2021, 5:39pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305/3 "2021-07-17T17:39:02Z")

</div>

Hello,

Please format your original topic post as a courtesy to the community:  
_[FAQ - Processing Foundation](https://discourse.processing.org/faq#format-your-code)_

Hover your mouse over these to see which one is “edit your post” :  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4be534585ba6b11689440fae42b2dd4c4e01ecba.png)

I will try it out once it is formatted.

Which browser are you using?

`:)`

---

<div class="post-metadata">

**Author:** ![BigBigRed](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Post date:** [July 17, 2021, 6:16pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305/4 "2021-07-17T18:16:18Z")

</div>

Hello giv and thanks for your help.

I use chrome for my browser.  
I think that my second post is formatted correctly, cleanly.  
If not then I can try again.

FYI here is the screenshot from my laptop running the same sketch.  
So, here, mandlebrot is good (not doubled like the first screenshot).

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

---

<div class="post-metadata">

**Author:** ![BigBigRed](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Post date:** [July 17, 2021, 6:22pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305/5 "2021-07-17T18:22:07Z")

</div>

post has been cleared by the original poster. Please refer to the first post for correctly formatted sketch code.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 17, 2021, 9:31pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305/6 "2021-07-17T21:31:45Z")

</div>

Hello,

This has to do with the default pixelDensity() for each device:

[https://p5js.org/reference/#/p5/pixelDensity](https://p5js.org/reference/#/p5/pixelDensity)  
[https://p5js.org/reference/#/p5/pixels](https://p5js.org/reference/#/p5/pixels)

I get the same results as you do on the same device with this (one of them) added to setup() :

```auto
 pixelDensity(1); //Shows 1 fractal
 pixelDensity(2); //Shows 2 fractals

```

I first came across this issue with this example and had to set it:

> [@Webcam interaction (colour component)](https://discourse.processing.org/t/webcam-interaction-colour-component/30577/2):
>
> Hello, I changed topic to p5.js category. See example here: Example may be a bit complicated (moving tiles) but I had to sort out color for pixels[] and learned this recently. References: [https://p5js.org/reference/#/p5.Image/pixels](https://p5js.org/reference/#/p5.Image/pixels) Have fun! slight_smile

`:)`

---

<div class="post-metadata">

**Author:** ![BigBigRed](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Post date:** [July 17, 2021, 10:10pm UTC](https://discourse.processing.org/t/display-issue-same-sketch-displays-diff-on-diff-computers/31305/7 "2021-07-17T22:10:58Z")

</div>

Thank you for your help here. I will run it after supper.  
I am glad that the solution is not too complicated/ abstract.

I was fearing it and I have a deep reluctance to make changes deep in a PC (aka stay away from PC settings if you don’t know EXACTLY what you are doing … ).