Best way to draw stimuli (rectangle, circle etc.)

289 views
Skip to first unread message

ord...@gmail.com

unread,
Nov 29, 2015, 1:51:17 AM11/29/15
to jsPsych
Hi,
I want to create a dot comparison test. In order to do that I need to create circles, in different sizes and different locations and colors according to conditions.
Is there a good, recommended way to do so?
I understand I can use the basic HTML way, but it seems weird to me. I would like to make a circle object and then call it and change parameters each time.

Any recommendation would be appreciated,
Thank you.

Josh de Leeuw

unread,
Nov 29, 2015, 2:15:56 PM11/29/15
to ord...@gmail.com, jsPsych
You could make a JavaScript object class for a circle with a set of properties. At some point, you have to translate the JavaScript object into some rendering on the screen. One way to do this is by generating HTML based on the properties of the object. You could write a render() function that generates the appropriate HTML/CSS to display the object. 

You could also use an intermediate library that does this for you. For SVG based renderings, this library is quite good and I've used it in many jspsych projects: http://snapsvg.io/. You can find other similar libraries for canvas-based renders. I'm not sure if a library exists that will do basic drawing functions in "vanilla" HTML/CSS.

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/61a7aac1-d2ca-41dc-9e70-5ef5ef2ebabf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages