Strange behavior from a sketch

p5.js Coding Questions
1

I recently translated this sketch, Dynafractal, to P5.js from another language (Smart Basic, if anyone is familiar with it.)

My code runs fine, and the final output looks exactly like it did in Smart Basic, but it does not display the diamond shapes one by one as it did before. When the sketch Is run, the screen stays blank for about 12 seconds, and then the entire screen appears fully drawn. I would like to change the code so that the fractals appear one by one, but am not sure what is needed. I would appreciate it if you can see the issue in my code, if you would create a fork that solves the problem. I would study your changes, and praise you to the skies! Thanks.

image
41BFBA91-DCF4-4D13-8614-EAA1ECE8C977.png1448×1086 3.64 MB

1 Like
2

“Please be patient - calculation takes about 12 seconds. Wait, watch and enjoy.”

3 
var sz = 1;
var stp = 1;
var multx = 10;
var multy = 10;
var a = 1;
var b = 4;
var dt = 0.1;
var n = 0;
var w = 1024;
var h = 768;
var i = -.5;
var j = -.5;

function setup() {
	createCanvas(1024, 768, P2D);
	colorMode(HSB, 360, 255, 255);
	strokeWeight(sz);
	background(255);
}

function draw() {
  i += stp;
	if( i >= h/9 ){
    i = -.5;
    j += stp;
	  if( j >= w/9 ){
			return;
		}
	  var x = j;
		var y = i;
		for (var k = 1; k < 100; k++){
			var xn = x - sin(y + a * sin(b * y)) * dt;
      var yn = y + sin(x + a * sin(b * x)) * dt;
			x = xn;
			y = yn;
			stroke(n%360, 255, 255);
			line(multx * x - sz, multy * y - sz, multx * x, multy * y);
			n += 0.001 * w;
		}
	}	
}

I changed it to this which does display them one at a time… but now it is SUPER slow.

1 Like
4

basically the same as TfGuy44 but a bit faster link

another thing to consider is moving away from canvas drawing and using direct pixel manipulation which should be much faster.

5

Thanks, guys. I will have to look into pixel manipulation. Must admit that I am a newbie with P5.js and Processing, although I have programmed in other languages for a lot of years.

For now, I will keep both Fractal sketches up on Open Processing - yours that draws line by line but takes a couple of minutes to complete, and mine that draws everything hidden but displays it in only 12 seconds.

6

Maybe draw to a buffer all in one go, then copy regions onto the canvas each frame for rapid animation?

https://p5js.org/examples/structure-create-graphics.html

7

I will look into that possibility. Thanks for the suggestion.

I tried to copy the code from the linked P5.js page, but on an iPad that is not easy to do. The Copy button on the page doesn’t work, and the code itself can’t even be selected. Once in a while I am able to select a word on the page above the code and then drag the selection box down to a word below the code. Then I can copy it, edit out all the unwanted words and run it. Today even that didn’t work. But I will keep trying.

Thanks again.

8

Here:

let pg;

function setup() {
  createCanvas(710, 400);
  pg = createGraphics(400, 250);
}

function draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);

  pg.background(51);
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX - 150, mouseY - 75, 60, 60);

  //Draw the offscreen buffer to the screen with image()
  image(pg, 150, 75);
}