Clip function crashes live html canvas (unresolved)

Processing Coding Questions
1

not sure quite how to even phrase this question but i’m trying to use the clip function and it works fine on local processing, but in my live html canvas (with processing.js) invoking it in any capacity, even just using noClip(); immediately breaks the program. no error no way to debug it at all. it’s definitely clip that’s doing this. any guidance? thanks

here’s some relevant code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>pde test</title>
	<script type="text/javascript" src="processing.js"></script>
	<link rel="stylesheet" href="index.css">
</head>

<body>
	<canvas data-processing-sources="topdown_engine.pde camera.pde grid.pde scene.pde tile.pde sprite.pde"></canvas>
</body>
</html>

/* @pjs preload="data/tall_tex.png"; */

Scene scene;
int TICK;


void setup(){
  size(750,750);
  noClip(); //adding this line makes the canvas immediately go blank, commenting it out fixes it
  noSmooth();
  colorMode(HSB);
  
  loadTextures();
  
  TICK = 0;

  scene = new Scene();
  
}

void draw(){
  runGameTEMP();
  
  noSmooth();
  image(scene.render(500,500),0,0,width,height);

  TICK++;
}

void runGameTEMP(){
  //scene.mainCam.x=(mouseX-width/2)/55.0;
  //scene.mainCam.y=(height/2-mouseY)/55.0;
  
  //scene.mainCam.x=sin(TICK*0.05)*2;
  //scene.mainCam.y=cos(TICK*0.025)*2;
  
  if(mousePressed){
    float[] mpos = scene.mainCam.tileAt(mouseX*((float)scene.mainCam.pw/width),mouseY*((float)scene.mainCam.ph/height),0);
    scene.player.x=mpos[0];
    scene.player.y=mpos[1];
  }
  for(int i = 1;i < scene.sprites.size();i ++){
    scene.sprites.get(i).z=sin(TICK*0.025)+0.5;
  }

  scene.mainCam.x+=(-scene.player.x-scene.mainCam.x)*0.025;
  scene.mainCam.y+=(-scene.player.y-scene.mainCam.y)*0.025;
}

here’s what my canvas looks like when i invoke clip

image
image926×861 1.28 KB

do i just need to import this somehow? it’s like it doesn’t recognize it at all. again this works totally fine in a local processing sketch, just not in html

2

Hi @canslp,

Don’t stick on processing.js too much. It’s no future tech. If you want to provide your stuff to the web, it would be better to use p5js. Don’t know your expertise but it is imo not that hard to translate the processing java to p5js… You should give it a try …

Cheers,
—mnse

3

which one is faster for graphics, that’s my main priority atm

4

Hi @canslp,

when comparing processingjs to p5js, I would strongly assume that the latter is far more optimized in terms of browser compatibility and performance. Especially since both are based on javascript. It’s not like you could compare it with processing java.

Cheers
— mnse

5

oh is p5js weakly typed. is there like a version of it that is strongly typed

6

fwiw i would still like to know if the clip function can work in html and if not what i should do instead

7

Hmmm!

I can’t find the noClip function in processing.js at all !?
Looks to me as it is not implemented for processing.js…

Have you checked your console output when running with noClip if your sketch is running or throws errors !?

Cheers
— mnse

8

well the console doesn’t really ever throw errors in the html side. again clip and noClip both work in processing (the side that throws errors). i think you are right that for some reason the html interpreter just does not have this thing

9

Hi @canslp,

I’ve now checked this on my box. Unfortunately I had only mobile access to it the last days …
But when I tried it the console now it clearly says:

ReferenceError: noClip is not defined

and so for sure the processing bail out …

Cheers
— mnse

PS: Also I made a quick example here how to do fast clipping with p5js+shader