david notes:

- this one is mostly done I think, only needs general revisions (mulitple images, instruction, etc.)

- should the user just check wherever? or should they be told to look at something? leave this up to whoevers doing the test? MAYBE have some place at the start for them to add instructions.

- also since it loops through it if they want ppl to check multiple they can just tell them to do it multiple times

- discuss this one with maarten some more bc im not sure what the best way to go with it is

​

todo:

- should

- visualizer?

​

​

Visual conspicuity is a cool but also difficult task, because it relies on your introspective judgement whether you see something. Nevertheless, it has been shown to work quite well and gives similar results as visual search. The advantage is that you (the researcher) can do it as you do not need to bee naive. Here is the paper: https://www.researchgate.net/publication/224883361_Visual_conspicuity_determines_human_target_acquisition_performance

​

​

Instructions:

1. Upload your own image(s) to the "images" folder and change filename in the code below to match. Canvas size is determined by image size, so watch out with images that are too big or small.

2. (Optional) add instructions at the start.

​

*/

​

// write the filenames of your images as strings

const filenames = ['ajaxmadrid.jpg'];

​

// shows images in random order for each participant, change to false to show them in the order as written above

const randomOrder = true;

​

// if you want to add instructions for users before the image is shown, such as where to click, you can write them here as a string.

let instruct0 = false;

​

let instruct1 = 'Click the target.';

let instruct2 = ['Move the cursor away from the target while keeping you eyes fixated on it.', 'When you can no longer see the target in your peripheral vision, click again.'];

​

let topmargin = 58;

​

let images = [];

let presentationOrder = [];

let clicks = 0;

let trial = 0;

let data = [];

var max_height = 0;

var max_width = 0;

​

function preload(){

  for(i=0;i<filenames.length;i++){

    images.push(loadImage('images/' + filenames[i]));

    presentationOrder[i] = i;

  }

  if(randomOrder){presentationOrder=shuffle(presentationOrder);}

}

​

function setup() {

  textSize(16);

  // determine which image has the biggest width/height

  for (let i = 0; i < images.length; i++) {

    if (images[i].width > max_width) {

      max_width = images[i].width;

    }

    if (images[i].height > max_height) {

      max_height = images[i].height;

    }

  }

  if(textWidth(instruct2[1]) > max_width ){

    instruct2 = ['Move the cursor away from the target','while keeping you eyes fixated on it.','When you can no longer see the target','in your peripheral vision, click again.']

    topmargin = 138;

  }

  createCanvas(max_width, max_height+topmargin);

  noCursor();

  if(instruct0){clicks = -1;}

}

​

function draw() {

  background(220);

  image(images[presentationOrder[trial]], 0 ,topmargin);

  fixationCross(mouseX,mouseY);

  noStroke();

  if(clicks == -1){

    textSize(24); 

    background(255);

    text(instruct0, 20,60);

  }

  else if(clicks==0){

    textSize(16);

    text(instruct1, 20,24);

  }

  else if(clicks==1){

    textSize(16);

    for(i=0;i<instruct2.length;i++){

      text(instruct2[i], 20,24*(1+i)); 

    }

  }

  else if(clicks==2){

    background(255);

    textSize(24); 

    var consDist = dist(data[0],data[1], data[2], data[3])

    text('Target = ('+data[0]+','+data[1]+')',30,60);

    text('Conspicuity location = ('+data[2]+','+data[3]+')',30,100);

    text('Conspicuity distance = '+round(consDist),30,140);

  }

}

​

function fixationCross(x,y){

  var w = 10;

  strokeWeight(4);

  stroke(255,0,0);

  line(x,y-w,x,y+w);

  line(x-w,y,x+w,y);

}

​

function mouseClicked() {

  if(clicks==-1){

    clicks++;

  } else

  if(clicks==0){

    //First two array entries are the x & y coordinate of the target

    data[0]=mouseX;

    data[1]=mouseY;

    clicks++;

  } else

  if(clicks==1){

    //Second two array entries are the x & y coordinate of the conspicuity location

    data[2]=mouseX;

    data[3]=mouseY;

    clicks++;

  } else

  if(clicks==2){

    data=[];

    clicks=0;

    if(trial<images.length - 1){

      trial++

    } else{

      trial = 0;

    }

  }

}

​