# Glitching frames on JS but not PsychoPy & Rating scale error

**URL:** https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901
**Category:** Online experiments
**Created:** [April 30, 2020, 1:33pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901 "2020-04-30T13:33:49Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [April 30, 2020, 1:33pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/1 "2020-04-30T13:33:49Z")

</div>

URL of experiment: [https://run.pavlovia.org/MJB/fapesp\_libet/html/](https://run.pavlovia.org/MJB/fapesp_libet/html/)

Description of the problem:

There are 2 separate problems which I will describe below

1. There is a glitching of frames on JS but not local runs.  
The experiment presents a Libet clock stimulus, that is a clock with one fast-moving hand.  
The clock hand is a line stimulus, whose ori and pos are dynamically changing as a function of t, to produce a clock-hand appearance.  
The experiment passes the ori on from one routine to the next, and I believe it is at this point where the glitch happens: On JS, but not locally, the hand stimulus briefly presents as a flat line, centered on 0,0 – which I think is because the line stimulus is initially defined like that, and the dynamic updating happens later in the code  
How can this be fixed

2. the experiment uses a rating scale stimulus to elicit responses: The subject has to adjust the clock hand to a particular angle. They move the slider around and that dynamically moves the hand around. On JS, this throws a Reference error – it cannot find the rating component. I am not sure why this is.

Many thanks!  
Marc

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [April 30, 2020, 3:53pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/2 "2020-04-30T15:53:36Z")

</div>

1. You could have your begin routine code include the following:

```auto
hand.setAutoDraw(false);

```

(where hand is your clock hand object) and then in your each frame code, in the same code that sets the orientation

```auto
hand.setAutoDraw(true);

```

That should ensure that it only appears on the screen after the orientation has been computed.

1. See here:

> [@Experiment will run online but is missing parts](https://discourse.psychopy.org/t/experiment-will-run-online-but-is-missing-parts/12417/2):
>
> Hi @ab3082. the issue is that old style RatingScale components are not supported online. They have been replaced by the Slider component, which is supported for online tasks. To fix this issue, you will have to replace your rating scale components with Slider components. See [Slider docs](https://www.psychopy.org/api/visual/slider.html).

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [April 30, 2020, 5:24pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/3 "2020-04-30T17:24:14Z")

</div>

@jonathan.kominsky Thanks for this.

I implemented the AutoDraw as you suggested, but this does not solve the problem.  
The glitches are still there…

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [April 30, 2020, 5:37pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/4 "2020-04-30T17:37:12Z")

</div>

As in, it still starts on 0,0 regardless? How odd. What you may need to do is set the initial position of the hand as something that is set on every trial (e.g., something that might be pulled from a conditions file) and then just start updating from there in your code. I assume if you change the settings of the object in the builder, that’s what you see on this first-frame “glitch”.

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [April 30, 2020, 7:07pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/5 "2020-04-30T19:07:31Z")

</div>

@jonathan.kominsky. Yes, still on 0,0.  
How and where would I set the initial position & orientation? in Builder there is only the bit in the dialog box that is set to update every frame. The initial definition appears in the code only. Do you suggest I manually update the code on JS?

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [April 30, 2020, 7:19pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/6 "2020-04-30T19:19:11Z")

</div>

Is the object itself not a polygon component in the builder?

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [April 30, 2020, 8:25pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/7 "2020-04-30T20:25:31Z")

</div>

@jonathan.kominsky yes it is. And I have defined ori and pos in there and set to update on every frame

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [April 30, 2020, 8:42pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/8 "2020-04-30T20:42:18Z")

</div>

@jonathan.kominsky It might help to add that there are actually different components in each routine, rather than the same instance. This is because in each routine, the hand has different durations, or stops at different conditions.

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [April 30, 2020, 9:44pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/9 "2020-04-30T21:44:14Z")

</div>

Hmm. I might need to see the repository to figure out what’s going on. If it’s updating each frame then it should update on the first frame, at least in principle.

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [May 1, 2020, 11:08am UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/10 "2020-05-01T11:08:59Z")

</div>

@jonathan.kominsky - can you access that via the URL? What do I need to do to make it available?

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [May 1, 2020, 12:41pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/11 "2020-05-01T12:41:58Z")

</div>

If you go to your dashboard and click “view code”, and link the page that goes to, I will be able to look at the full experiment repository and make a copy of it to do some bug-hunting. You will likely have to make the repository public, so on that same page, go to settings -\> general -\> permissions and set it to “public”.

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [May 1, 2020, 12:57pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/12 "2020-05-01T12:57:17Z")

</div>

@jonathan.kominsky – thanks so much.

I ve set it to public – here is the URL [https://gitlab.pavlovia.org/MJB/libet\_fapesp](https://gitlab.pavlovia.org/MJB/libet_fapesp)

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [May 1, 2020, 1:01pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/13 "2020-05-01T13:01:28Z")

</div>

It is currently acting as though it is not public, but this may just be GitLab being slow. I’ll try again a little later, but you might want to double-check that the setting was saved.

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [May 1, 2020, 2:19pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/14 "2020-05-01T14:19:03Z")

</div>

HI Jonathan,

Indeed, it had not saved.

Just changed it again

Marc

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [May 1, 2020, 3:17pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/15 "2020-05-01T15:17:26Z")

</div>

I definitely needed to see this one to work out what was going on. I can tell you the general rule of how to fix it, but you’ll have to fix it in several different places.

The basic problem is that in the builder, things that are set to update every frame don’t start updating until the first frame. In order to update the position and orientation of the clock hand before the first frame (so it starts in the correct position and doesn’t jitter), you need to manually set its position and orientation in the “begin routine” section of the code component on that trial. This is not all that intuitive, so I’ll add some illustration of what I’ve done to get the FirstEvent routine working.

First, let’s look at the properties of hand\_6 in the builder, which were mostly correct except that you should remove the dollar sign before firstAngle, as I have done here:

 ![Screen Shot 2020-05-01 at 11.09.32 AM](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/2/a/2a0b92f0361279eddc89fe585649a9ba19b22e34.png)

Now, in the code component, I’ll give you an image of where this code goes and separately the text of the code itself:

 ![Screen Shot 2020-05-01 at 11.10.48 AM](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/3/3/334a1d2373fbfb5bac44b18002747e15f378703b.png)

```auto
hand_6.setPos([(0.095 * Math.cos(((3.14159 / 180) * (firstAngle - (t * 140.625))))), (0.095 * Math.sin(((3.14159 / 180) * (firstAngle - (t * 140.625)))))]);
hand_6.setOri((firstAngle - (t * 140.625)));

```

The console.log statement was just there to help me ensure the issue wasn’t with how firstAngle was being set, that turns out to be fine.

This probably looks rather familiar as it is the same calculations you put in the builder component with one important change (see below), but now we are running those calculations for t=0 _before the first frame is drawn_, and so the hand should appear in the correct orientation.

**Note that you’ll need to change the position calculation to use Math.cos and Math.sin instead of just “sin” and “cos” when you do this.**

I ran into a separate issues with the slider not rendering that you may need to do something about, but to start with you should try doing this to get rid of the flicker. The same general principle should apply to everything: If you need to set the orientation and position of an object before it is drawn, you should do it in a code component in the “Begin routine” tab as well as having it update each frame in the builder component. You could also set it to constant in the builder have the same lines in the “each frame” of your code component as well, but that’s effectively what setting it to “every frame” in the builder does anyways.

I hope that helps!

---

<div class="post-metadata">

### Author: ![Marc\_Buehner](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/marc_buehner/32/3476_2.png) [@Marc\_Buehner](https://discourse.psychopy.org/u/Marc_Buehner)
#### Post date: [May 4, 2020, 8:53am UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/16 "2020-05-04T08:53:47Z")

</div>

Thanks a million @jonathan.kominsky.  
That works.  
Out of curiosity: Why remove the $ in the builder – is that now obsolete? I thought this tells Builder that it is a variable it is evaluating…  
Thanks again  
Marc

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [May 4, 2020, 11:50am UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/17 "2020-05-04T11:50:14Z")

</div>

The $ is a builder-specific thing and seems Python-specific as well. See here: [Referencing conditions file in code component](https://discourse.psychopy.org/t/referencing-conditions-file-in-code-component/12665/3)

In my experience, it doesn’t work well if the variable being referenced is defined in a code element rather than a condition file. I’m not entirely sure why. Online, it also has a tendency to cause errors like this one, though again, I could not give you a complete explanation why: [Reference error "$ not defined" on Pavlovia](https://discourse.psychopy.org/t/reference-error-not-defined-on-pavlovia/12359/4)

---

<div class="post-metadata">

### Author: ![jonathan.kominsky](https://avatars.discourse-cdn.com/v4/letter/j/a587f6/32.png) [@jonathan.kominsky](https://discourse.psychopy.org/u/jonathan.kominsky)
#### Post date: [May 4, 2020, 1:20pm UTC](https://discourse.psychopy.org/t/glitching-frames-on-js-but-not-psychopy-rating-scale-error/12901/18 "2020-05-04T13:20:24Z")

</div>

Oh, one further thing to be aware of: Direction of rotation is flipped online versus local. I think you compensate for this already, but in case you get unexpected behavior, I thought I would mention it: [https://github.com/psychopy/psychojs/issues/87#issuecomment-623113864](https://github.com/psychopy/psychojs/issues/87#issuecomment-623113864)
