p5.js, WAAClock, and Changing Tempo During Sketch - p5.js

Good evening all;
I am continuing working on a project, which is essentially a drum machine whose tempo you can adjust in real time using a slider. That is, you can set up the drum machine and play it and as it's playing you can use a slider to affect its tempo in real-time. I successfully coded this in Processing 3 and 4, but I want to have it available on the web via p5.js, but am having some difficulty... I have gotten the drum machine setup in p5.js using Tone.js and WAAClock, but because I've set up the bpm variable in Setup() via a clockSetup() function (without otherwise I cannot get the drum machine to work), I can't use a slider to change the tempo in real-time. Is there a way to affect the tempo, which is currently set to 60bpm, using a slider?
To use the drum machine, click on a square that you want to activate per the row item (e.g., bottom row is the Bass Drum, the middle row is the Snare Drum) and then press the spacebar.
Here is the code on OpenProcessing: https://openprocessing.org/sketch/1734625
Apologies if this is not the right way to request assistance, still new to asking for support. :)
Also, to note, I'm using Tone.js instead of p5.sound, because Tone.js uses less RAM. p5.js causes the Sketch to crash within a minute of running the drum machine, but with Tone.js, I can run it for hours.
I tried to adjust 'bpm' in draw(), in a function, and to remove it from setup() and try to only set it up in draw(), but haven't been able to figure it out.

Related

Limit the frame rate on an aframe project

I am developing an aframe project on my MacBook pro, late 2013. When running the project, the fan of my computer always spins fast, regardless which browser I use (firefox, safari, chrome) and the project size (also happens with a project just containing a simple a-box).
aframe-stats show me that my project (1028244 vertices, 342748 faces) still runs with 20 fps.
Is it somehow possible to limit the frame rate to 10fps in order to keep my computer quite? Or any other way to limit the flop-consumption of the aframe project? I already tried a native approach with sudo cputhrottle plugin-container 10 but that did not just throttle the aframe-renderer but the whole firefox browser. Can I pull the break somewhere in the JavaScript or the Browser settings?
It's difficult to say without your project code. Large data sets will simply crank out even a high spec macbook pro. I have found it helpful to pause any rendering whenever possible to quiet the users' machines.
I personally removed automated next animation frame rendering in favor of waiting for controls and objects to change.
For example:
this.controls.addEventListener( 'change', function(e){ addToRenderStack(); });
A simple function addtorenderstack puts in a new value in a list for a render, with the expectation that the render will occur at some point in the future and not right away. the list can also be used to log who requested the render in the call stack, and narrow down performance hogs.
addtorenderstack places a render request in a list. In the requestanimationframe loop, if the list has any length, a render is called on the scene. The stack is immediately cleared rather than processed one by one. If controls or animations continue to make render requests, the list will have a length again and request animationframe will process them in the same way with another render.
In this way, the code only renders when absolutely required. This saved me much grinding on framerate and the fans only come on during intensive operations and then shutdown when its complete, much like a typical 3d game experience.
Your mileage may vary depending on what's happening in your app. I work in engineering so often the view of the 3d world is stopped as an engineer examines or shows a model.

Modifying animation to match a keyframe in another

I have an Idle animation with arms holding a weapon which I have tweaked so It would work with a weapon I had created, I also have a running animation for the same arms which I need to tweak as well to work with my weapon, Is It possible to use the first keyframe from the Idle animation to offset the running animation's key to match it?
Ok so if anybody needs this in the future, I ended up using 3ds max's merge animation, it worked perfectly.
I've edited my previous answer to clearly state how this is done.
First, you want to export your idle animation. This can be done using the ATOM exporter in Maya or a third party plugin like PAIE or Studio Library. From here you can choose to only export the first frame or all frames. Make sure to select all the relevant controllers.
Secondly, you open up your running animation and select the same controllers as before, and then create a new animation layer with that selection. Animation layers are found in Channel Box / Layer Editor as a tab called Anim.
After setting up the layer, you can import your idle animation onto the layer. Again, this can be done using ATOM or a third party plug-in. Perhaps lock the BaseAnimation layer to prevent accidentally changing it. If you only wish to merge certain parts, like the arms, make sure to only export, import and add that animation to the animation layer.

Calling functions only after drawing is completed

I am making a drawing on NSView using a timer that is set to update every .02 seconds. On update some physical simulation makes a step, and then Canvas!.needsDisplay = true. It works when app is in foreground (usually), but when some lags happen, simulation progresses forward despite the fact that view hasn't reflected it yet. How do I pause the timer during these times to make simulation happen only when NSView can show it? I do not want to call step_over from inside drawRect, cause it seems like a bad idea, because then it would be harder to stop the simulation.
Generally this kind of update should be done the other way around, by letting the display ask you for frames as it can display them. This is done with a CADisplayLink CVDisplayLink (this is Mac; CADisplayLink is iOS). Configure it with a method you want to be called when a frame can be drawn.
Generally you do want your simulation to keep moving forward, even if it means dropping frames occasionally. For that, you check the timestamp and use that to work out what time to use for your new frame. But if you only want to move forward when the display can show it, then just update once per call.
Note that generating at 50fps is often going to mismatch the system that's trying to draw at 60fps, so you're going to wind up missing frames occasionally. That's one of several reasons not to try to push drawing with a timer.
See also Alternative of CADisplayLink for Mac OS X. Note that trying to draw at 50fps with Core Graphics usually isn't going to give good results in any case. The right tool here in OS X is Core Animation (or SpriteKit for games on 10.10, or OpenGL for more advanced high-speed rendering). You can do very basic animations with an NSTimer (and we did for years before Core Animation came along), but it's not really a tool for complex drawing.

Prevent program from using ClipCursor?

An old game (Pod) is kept alive with a glide wrapper and thus can now be run in custom resolutions larger than the native game resolution which was 640x480.
However, due to problems with the glide wrappers, if the game is run at 1920x1080 for example, the cursor is only allowed to move in a 0, 0, 640, 480 rectangle; obviously the WinAPI ClipCursor function has been used by the original developers for this.
This is pretty nasty because you can't act with the game menu mouse-wise in a useful way since not all buttons can be reached.
Is it possible to disable ClipCursor() functionality globally? Do I have to inject a DLL (I didn't do this completely before) or would it just be enough to let a C# app run in the background, watching for the game process and setting ClipCursor() to the real screen area after the process has been started?
I seriously doubt it's calling ClipCursor() more than once. Try writing a small program to call ClipCursor() and set it back to the size of your desktop. Run that program after your game is started.
edit
Depending on your skill level, you could also try using ollydbg to step through the program and find where it's calling the ClipCursor() API, and insert a jump to skip over it.

Custom SLider for video on iPad

I have a custom UISlider and use the currentPlaybackTime to change values of an MPMoviePlayerController object.
The problem is when i scrub at a fast rate using the slider, it doesn't respond as fast as i would like..
Is there any better way to have a fast interactive scrubber for ipad? targeting from OS 3.2
Well there are two issues, only one you can control directly.
Multimedia-content is commonly compressed using some kind of delta-compression, hence quick and exact seeking is not a trivial task to cope with. As that is common and since you can not directly change that, you will have to live with it.
the only way to increase responsiveness for seeking on the content-side (when encoding) is reducing the gop-size - that is, less p-frames between the i-frames.
when using a slider or a similar control, you could, instead of directly connecting the current playback position with it, handle any manual changes in an indirect fashion. You could run a timer based job that, whenever the slider/scrubber has been moved, tries to adjust the playback position towards that new value. Once the player is seeking, prevent the scrubber from getting feedback from the current playback location but allow it once the player is in playing state again. That way the user does not directly experience the clunky seek feedback.

Resources