P5.js: v.1.0.0 doesnt work with ccapture

[rakkoemoji]

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [x] Other (specify if possible)

Details about the bug:

• p5.js version: v.1.0.0

ccapture wont render with v.1.0.0. older v.0.9.0 works.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

@rakkoemoji Do you have a simple example code demonstrating the problem?

[rakkoemoji]

`let Ini=function(){
this.w=1920
this.h=1080
this.fr=30
this.tmp=60/110
this.bkg=0
this.siz=0
this.num=1285
this.nam=0

}//fun

Ini.prototype.set=function(){

this.cnv=createCanvas(this.w,this.h)
this.cnv.parent("cnv")
this.ini=millis()/1000
}

Ini.prototype.dis=function(sec){
this.sec=sec
this.fc=frameCount
this.lap=millis()/1000
this.dur=this.lap-this.ini
this.rem=this.sec-this.dur
this.dur>this.sec?noLoop():0
}

let Cap= function(nam){
this.nam=nam
this.fmt="png"
this.cap = new CCapture({ format: this.fmt, framerate: 30,name:this.nam})
}

Cap.prototype.set=function(){
this.cap.start()
}//fun

Cap.prototype.dis=function(){
this.cap.capture(document.getElementById('defaultCanvas0'))

if (ni.dur > ni.sec) {
noLoop()
this.cap.stop()
this.cap.save( u=> print(u)} )
print("fin")
}//if

}//dis

let ni=new Ini(),doc="doc"
,tx=new Tx(doc)
ni.nam="ani"+0
cap=new Cap(ni.nam)

setup=()=>{
cap.set()
ni.set()
print(ni.nam)
print(ni)
print(0)
background(100,100,50)
tx.set()
}//set

draw=()=>{
ni.sec=.5
ni.dis(ni.sec)
tx.dis()
print(ni.dur)
cap.dis()
}//dr
`

[rakkoemoji]

@rakkoemoji Do you have a simple example code demonstrating the problem?

@limzykenneth
thanks for getting back. above code works for 0.9.0 but not for 0.10.0 and up.

[limzykenneth]

Have a look at https://github.com/spite/ccapture.js/issues/108

[limzykenneth]

I've done some digging and found the source of the problem. Basically after adding this line in https://github.com/processing/p5.js/commit/abe5c95ff1a20821bb9743a5ef18e002787c9bfb the first frame of the sketch is not guaranteed to be called when the internal this._draw is called and without it being called, CCapture doesn't have a way to hook into the animation frame as well as it relies on capturer.capture to run the animation frames.

@stalgiag Do you remember why that line is added? Can there be some way to guarantee the first frame is rendered on the first call to this._draw?

[stalgiag]

Hm strange. If I remember correctly, I was detecting a large jump in delta time between setup and draw. This fixed it. Is setup not technically the first frame of the sketch?

I am looking at removing it now but if I recall that was my original logic.

[limzykenneth]

@stalgiag deltaTime wasn't implemented back then, it came after that I think. The first call to draw() is the first frame which will always be called (should be at least) even if noLoop() is called in setup().

I'm thinking there could be more problem with CCapture's approach to animation frames and recording canvas content but I'm less inclined to fix those on our side if they ever came up.

[stalgiag]

@limzykenneth sorry I used confusing language. I meant delta time in a more general sense. The GIF functionality was using the underlying logic behind deltaTime before it existed. Problems were being encountered because delta time was usually very high on the first draw call, as it didn't include setup() as a starting frame. So the initial draw call had a delta time measured since preload.

I tried removing the line and several things break including some unit tests in core/environment which appear correct in their logic. If we are thinking of the initial draw as the first frame of animation then perhaps this requires some rethinking.

[limzykenneth]

I guess it depends on whether we want to fix this on our side. There is a workaround for CCapture to start the animation loop and recording that involves only starting CCapture after p5.js' draw loop has started. It is a bit of extra code for the user but not excessively so.

[rakkoemoji]

@limzykenneth
thanks for the input. sorry for such a noob question, and i realized it now that i shouldnt have called it a bug, but something else. i will checkout the work around in https://github.com/spite/ccapture.js/issues/108.

[rakkoemoji]

if (condition) { this.cap.start() noLoop() this.cap.stop() this.cap.save( u=>{ let op={method:"put",url:"/save",data:{bl:u}} //axios(op) print(u)} ) print("fin") }//if

[rakkoemoji]

the above code work!!! thank you!