​

todo:

- stylistic congruency

- label "car"

​

Instructions:

1. Upload images

2. Write image filenames

2. Set the attributes you would like to rate them on

3. Adjust the labels accordingly

​

*/

​

const filenames = ['1.jpg', '2.jpg', '3.jpg'];

const attributes = ['attractiveness', 'uniqueness', 'luxuriousness'];

const leftLabel = ['not so attractive', 'not so unique', 'not so luxurious'];

const rightLabel = ['very attractive', 'very unique', 'very luxurious'];

const randomOrder = true;

​

var presentationOrder = [];

var hoverS, hoverBool;

var ratings = [];

var imgX = 100;

var imgY = 30;

var aspectRatio = 1.5;

var imgHeight = 400;

var imgWidth = aspectRatio * imgHeight;

var lineY = imgY + imgHeight + 100;

var marginY = 80;

var images = [];

var sliderX1 = 150;

var sliderX2 = 650;

var sliderBallRadius = 18;

var tickHeight = -8;

var nTicks = 6;

var ratingValue;

var labelYOffset = 35;

var trialNumber = 0;

​

function preload() {

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

    images[i] = loadImage('img/' + filenames[i]);

    presentationOrder[i] = i;

  }

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

  print(presentationOrder);

}

​

function setup() {

  createCanvas(800, 700 + marginY*(attributes.length - 1));

  data = new p5.Table();

  data.addColumn('car');

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

    data.addColumn(attributes[i]);

    ratings.push(-1);

  }

}

​

function draw() {

  background(220);

​

  if (trialNumber < filenames.length) {    

    image(images[presentationOrder[trialNumber]], imgX, imgY, imgWidth, imgHeight);

​

    fill(0, 102, 153);

    noStroke();

    textSize(22);

    text('Please rate the vehicle in the image on the following attributes:', 100, 480);

    hoverBool = false;

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

      drawSlider(i);

    }

  } 

  else {

​

    //final page, data download instruction

    fill(0, 102, 153);

    noStroke();

    textSize(28);

    textAlign(CENTER);

    text('The End', 400, 300);

​

    fill(100);

    textSize(20);

    text('The data has been sent.', 400, 350);

  }

}

​

function drawSlider(i) {

  strokeWeight(4);

  stroke(80);

  line(sliderX1, lineY + i*marginY, sliderX2, lineY + i*marginY);

  //draw ticks

  for ( var j = 0; j < nTicks; j++) {

    var xtemp = map(j, 0, nTicks - 1, sliderX1, sliderX2);

    line(xtemp, lineY + i*marginY, xtemp, lineY - tickHeight + i*marginY);

  }

​

  //draw slider ball

  fill(158, 194, 208);

  stroke(50);

  strokeWeight(4);

  if(mouseY > lineY + i*marginY - marginY/2 && mouseY < lineY + i*marginY + marginY/2 && ratings[i] < 0){

    ellipse(sliderX(mouseX), lineY + i*marginY, sliderBallRadius);

    hover = i;

    hoverBool = true;

  }

  if(ratings[i] != -1){

    fill(128, 128, 128);

    ellipse(map(ratings[i],0,100,sliderX1,sliderX2), lineY + i*marginY, sliderBallRadius);

  }

  fill(0);

  noStroke();

  textSize(18);

​

  text(leftLabel[i], sliderX1, lineY + labelYOffset + i*marginY);

  textAlign(RIGHT);

  text(rightLabel[i], sliderX2, lineY + labelYOffset + i*marginY);

  textAlign(LEFT);

}

​

function mouseClicked() {

  if (trialNumber < filenames.length && hoverBool) {

    ratings[hover] = round(100 * ratingX(mouseX));

    // save the data

    if(checkSliders()){

      let newRow = data.addRow();

      newRow.setNum('car', presentationOrder[trialNumber]);

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

        newRow.setNum(attributes[i], ratings[i])

        ratings[i] = -1;

      }

      trialNumber++;

      if(trialNumber == filenames.length){

        saveTable(data, 'data.csv');

      }

    }

  }

}

​

function sliderX(mx) {

  var mq = max([mx, sliderX1]);

  return min([mq, sliderX2]);

}

​

function ratingX(mx) {

  var mq = max([mx, sliderX1]);

  mq = min([mq, sliderX2]);

  return map(mq, sliderX1, sliderX2, 0, 1);

}

​

function checkSliders(){

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

    if(ratings[i]<0){

      return false

    }

  }

  return true

}

​

​

function keyPressed() {

  if (keyCode === ENTER) {

    saveTable(data, 'data.csv');

  }

}