JSFiddle - React, Tailwind, and code Playground

by msauter

HTML

<div class="wrap" id="mainwrap">
<div class="row relef">
	<div class="box relef" id="testbox"><canvas id="s1" /></div>
	<div class="box relef"><canvas id="s2" /></div>
	<div class="box relef"><canvas id="s3" /></div>
    <div class="box relef"><canvas id="s4" /></div>
    <div class="box relef"><canvas id="s5" /></div>
</div>
<div class="row relef">
	<div class="box relef"><canvas id="s6" /></div>
	<div class="box relef"><canvas id="s7" /></div> 
	<div class="box relef"><canvas id="s8" /></div>
    <div class="box relef"><canvas id="s9" /></div>
    <div class="box relef"><canvas id="s10" /></div>
</div>
<div class="row relef">
	<div class="box relef"><canvas id="s11" /></div>
	<div class="box relef"><canvas id="s12" /></div>
	<div class="box relef"><canvas id="s13" /></div>
    <div class="box relef"><canvas id="s14" /></div>
    <div class="box relef"><canvas id="s15" /></div>
</div>
<div class="row relef">
	<div class="box relef"><canvas id="s16" /></div>
	<div class="box relef"><canvas id="s17" /></div>
	<div class="box relef"><canvas id="s18" /></div>
    <div class="box relef"><canvas id="s19" /></div>
    <div class="box relef"><canvas id="s20" /></div>
</div>
<div class="row relef">
	<div class="box relef"><canvas id="s21" /></div>
	<div class="box relef"><canvas id="s22" /></div>
	<div class="box relef"><canvas id="s23" /></div>
    <div class="box relef"><canvas id="s24" /></div>
    <div class="box relef"><canvas id="s25" /></div>
</div>
   <div class="row relef" id="timer"></div>
</div>

CSS

.wrap {
	height:100vh;
	width:100vh;

}
.relef {
	position: relative;
    float: left;
}

.row {
    width: 100%;
    margin: 2vh;
}

.box{
    height: 7vh;
    width: 7vh;
	margin: 2vh;
}

canvas{

}

JavaScript

var box_size = $("#testbox").height();

var colorred = "#D73138";
var colorblue = "#0084BA";
var colorgreen = "#70B54B";
var stimulus_small = 2/3;
var stimulus_large = 1;
var target_drawn = false;
var jitter = true;

constructDisplay();

function constructDisplay(){
    var time1 = new Date().getTime();
    var locations = randomize_array(["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15","s16","s17","s18","s19","s20","s21","s22","s23","s24","s25"]);
      
   var is_target_present = function(){
        var list = [true, false];
        var weight = [0.6, 0.4];
        var weighed_list = generateWeighedList(list, weight);
        var random_num = rand(0, weighed_list.length-1);
        return  weighed_list[random_num];
    };
    
    for (var i = 0; i < locations.length; i++) {
        var stim_features = getFeatures(is_target_present);
        
        var tsize = parseFloat(stim_features[0]);
        var tcolor = stim_features[1];
        
        drawStimulus(stim_features[0],stim_features[1],stim_features[2],locations[i]);
    }
    var time2 = new Date().getTime();
    $("#timer").html("Generation time in ms:  " + parseInt(time2-time1));
}

function getFeatures(is_target_present){

    if(is_target_present && target_drawn == false){
          var list = [[stimulus_large, colorred, 0], [stimulus_large, colorgreen, 45]];
          var weight = [0.5, 0.5];
          var weighed_list = generateWeighedList(list, weight);  
          var random_num = rand(0, weighed_list.length-1);
          target_drawn = true; 
          return  weighed_list[random_num];   
    }else{
          var list = [[stimulus_small, colorgreen, 0],
                      [stimulus_small, colorred, 45],
                      [stimulus_small, colorblue, 45],
                      [stimulus_small, colorred, -45],
                      [stimulus_small, colorblue, -45],
                      [stimulus_large, colorgreen, 0]];
          var weight = [0.25, 0.125,...