/    Sign up×
Community /Pin to ProfileBookmark

Passing an argument to requestAnimationFrame twice

Copy linkTweet thisAlerts:
Sep 11.2021

I used the script from https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2# to create an animation of an oscillating sine wave but I want to display 2 sine waves and eventually 4 so I need to pass an argument to window.requestAnimationFrame() I was able to get the first variable to be passed working but when I called window.requestAnimationFrame again and passed a new variable, it stopped working. If I call requestAnimationFrame again by uncommenting the following line, it doesn’t work any more:

`window.requestAnimationFrame(function(timestamp) { draw(canvas_2);});`

This is my codepen:
https://codepen.io/makamo66/project/editor/ZbLgaw

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumSep 11.2021 — Check if you can go with only one requestAnimationFrame like this:
``<i>
</i>// code above unchanged

function draw(canvas) {

var context = canvas.getContext("2d");

context.clearRect(0, 0, 500, 500);

context.save();

plotSine(context, step, 50);


context.restore();

step += 4;

}
function drawAll() {
var canvas_1 = document.getElementById("photon_1");
var canvas_2 = document.getElementById("photon_2");
draw(canvas_1);
draw(canvas_2);
window.requestAnimationFrame(drawAll);
}


function init() {
drawAll();
}

var step = -4;
init();<i>
</i>``
Copy linkTweet thisAlerts:
@makamo66authorSep 11.2021 — Thanks, Sempervivum! Your code works great.
×

Success!

Help @makamo66 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...