Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About writer1

  • Rank
  1. Thank you for this. I can use it to experiment with different options. Since there are a finite number of cycles as well as a finite number of minutes for the exercise, I may end up with the "long way" suggested by your above script. Once "hard-coded" in, it may be my best option. May have more questions as I try to go forward. Again, thank you.
  2. Hi, It appears that Opus (the eLearning app that I'm using) can use this scaling function: Scale( Horizontal, Vertical, Time, Wait )// so Vector8.Scale(.5,.5,_DWPub.bar2 * 0.3,) would scale the circle to 150% horizontal and vertical (height and width) over a time duraction based on breaths per minute (BPM)/60* .3 (inhale),// with Wait defaulting to true (so the next line of script will not run until this scaling is completed). After a 500 ms delay, it would run the exhale scaling which would scale the circle back// in twice the duraction as the inhale. Then another 500 ms delay and back to inhale. I'm not familiar with the term "callback" but looking it up online, I think Opus can do callbacks in JS. Just not sure what the total function for the breathing inhale/exhale cycle would look like?
  3. Hi, Thank you for the encouragement. I think where I am stuck is in the adding of 2 timeouts (one for the inhale part of the breath cycle and one for the exhale part of the breath cycle) inside a loop. The breath duration can be one of the scaling parameters in each function: for inhale = _DWPub.bar2 * 0.3, for exhale = _DWPub.bar2 * 0.6. The scaling parameter for inhale (H, W) is .5, .5, for exhale is -.5, -.5. Problem is that there should be a 500 ms delay between inhale and exhale or exhale and inhale. So need to loop: inhale, delay(timeout?), exhale, delay (timeout?) as long as the loop counter (++) is less than the bar1 variable (BPM), then break the loop, go to a new iteration of the loop with a new bar1 (BPM) which a separate function would be decrementing (--) after one minute (another delay/timeout but for a different function than the scaling function: a separate BPM counter function which runs down until 6 BPM, then stays at 6 BPM for exercise duration). Whew! But where I'm stuck is those first 2 functions, inhale, exhale as timeouts (to proivide the 500 ms delay in between) inside of a loop. My loop (see first posting above) isn't changing/incrementing. Gets stuck running only once. So, still trying to figure it out. Any suggestions appreciated.
  4. Thank you for this explanation, so I can learn. If I am understanding correctly, then the driver in this model would be the start and end scale size. I'm not sure this can be used, since the start and end is driven by time, cycle duration, not scale amount. Here is an explanation about the timing needed: If the exercise starts at 10 BPM (breaths per minute), then I would want to have the circle expand/contract 10 cycles (twice as long within each cycle for the contraction than for the expansion to correctly mirror "good" breathing). After that one minute at 10 BPM, it would decrease to 9 BPM, for one minute, and the 9 cycles would each change their duration to fit into that one minute (again retaining the proportion of 1:2 for inhale/expand and exhale/contract). That way, through 8 BPM, 7 BPM, 6 BPM, then it would remain at 6 BPM for whatever total length of time the user selects for the entire exercise. They can practice for 10 minutes for example (that would leave 5 more cycles at 6 BPM after stepping down to and completing one minute of 6 BPM). So, timing varies depending on which BPM minute the animation is currently in. Seems challenging. Maybe can't be done as an HTML5 JS animation? Devoted Member: I'm using Opus Professional as a software package. While it can use JS and export as HTML5, it's core function files use their own unique naming conventions to identify objects and variables. So "Page1.Vector8.Scale(a,b,c)" refers to the circle object named Vector8 on the main page which is to be scaled, and the scale parameters are JS parameters. So, (0.5, 0.5, _DWPub.bar2 * 0.3) would scale the height and width by a factor of 50% (1 = 100%, 1.5 = 150%), with the duration as BPM/60 * .3 each inhale cycle component, and (should be) -0.5, -0.5, _DWPub.bar2 * 0.6 for each exhale cycle component. The naming and unique scripting are not mine, but a feature of the software package (see link above). HTH
  5. Apologies for not being clearer, and all of those mistakes in the script. The eLearning software that I am working with uses its own script, which is a variation of ECMA262 JavaScript, an older standard. This script can not be used for an HTML5 type export. So, I am trying to rewrite the old script for this exercise into new JavaScript. Not easy for a beginner like me. What I need to do in the (stress-reducing) exercise is show the student a circle object that, using scaling, looks like breathing: it would expand and contract. They can use it to pace their own breathing. The cycle for expand/contract would be a specific number of breaths per minute: so maybe starting with 10 breaths per minute. Each breath is one expand/contract cycle. Contract component timing is 2X expand component (optimally, we exhale slower than we inhale, about half as fast). A breath pacing exercise may start at 10 breaths per minute (or 12, some other number), then after one minute, go to 9 breaths per minute, then each minute --1, until 6 breaths per minute is reached and 6 is practiced for one minute. The break the loop and stop. I hope this is a little clearer. But feel free to ask more questions, clarifications.
  6. Hi, I have beginner skills using JavaScript in HTML5 projects. I use an eLearning software package (Opus) which can generate lessons that use JavaScript to animate objects in exercises. I am trying to animate a circle object and have it scale larger and scale smaller to look like breathing. Since the scaling larger and smaller needs to follow a pattern, I am trying to build a script. So far, if I place a circle object (Vector8) in the center, my script will make the circle expand once, but no contraction cycle, no looping. Here's my script. I am hoping someone can help and suggest how to get the circle object to loop so that it repeatedly gets bigger, then smaller. The goal is to have one breath in, wait 500 ms, then one breath out that takes 2X the time of the in breath, then wait 500 ms, then another breath in, etc. in a repeating cycle. calcBreathing()function calcBreathing(){ _DWPub.bar1=10 _DWPub.bar2=60/_DWPub.bar1 _DWPub.loop=0 for (_DWPub.loop = 0;_DWPub.loop<_DWPub.bar1;_DWPub.loop++) { window.setTimeout(function() {Page1.Vector8.Scale(0.5, 0.5, _DWPub.bar2 * 0.3)}, 500) window.setTimeout(function() {Page1.Vector8.Scale(0.5, 0.5, _DWPub.bar2 * 0.3)}, 500) if (_DWPub.loop < _DWPub.bar2) { _DWPub.loop++;}}} Thank you for your help.
  7. Hi, Thank you for your reply and helpful suggestions. I have done some more online searching and came up with the following which works: canvas{ border:1px solid black; position: absolute; top: 50%; left: 50%; ; margin-top: -320px;} Seems to work OK.
  8. Hi, I am a beginner so not sure if this should be placed here or in CSS? Based on this example: http://jsfiddle.net/pmw57/as4UR/ ,have a canvas element, 640X640. How do you center this canvas so it appears in the middle of the screen? Currently it is displaying 0,0. Thank you for your help. writer1
  • Create New...