I have a p5js sketch that displays differently on my desktop computer than on my laptop computer.
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:
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);
}
