let m = 1000;

let n = 10;

let arr_success = zero_list(n);

let numbers_list = number_list(n);

var chart;

var ctx;

​

function validateInput2(input) {

    let value = input.value().trim(); // Remove leading and trailing whitespace

​

    if (value === '') {

      // Empty value is allowed

      return;

    }

​

    let number = parseFloat(value);

​

    if (isNaN(number) || !isFinite(number)) {

      // Invalid input: not a number

      input.value("0.5");

      alert("Indtast tal mellem 0 og 1");

    } else if (number < 0 || number > 1) {

      // Out of range input

      input.value("0.5");

      alert("Indtast tal mellem 0 og 1");

    }

}

function validateInput(input) {

  let value = input.value().trim(); // Remove leading and trailing whitespace

​

  if (value === '') {

    // Empty value is allowed

    return;

  }

​

  let number = parseInt(value);

​

  if (isNaN(number) || !Number.isInteger(number)) {

    // Invalid input: not a number

    input.value("30");

    alert("Indtast heltal mellem 1 og 100");

  } else if (number < 1 || number > 100) {

    // Out of range input

    input.value("30");

    alert("Indtast heltal mellem 1 og 100");

  }

}

​

function validateInput1(input) {

  let value = input.value().trim(); // Remove leading and trailing whitespace

​

  if (value === '') {

    // Empty value is allowed

    return;

  }

​

  let number = parseInt(value);

​

  if (isNaN(number) || !Number.isInteger(number)) {

    // Invalid input: not a number

    input.value("100");

    alert("Indtast heltal mellem 1 og 10000");

  } else if (number < 1 || number > 10000) {

    // Out of range input

    input.value("100");

    alert("Indtast heltal mellem 1 og 10000");

  }

}

​

function preload(){

   // load our image

  backgroundImage = loadImage("image.jpg");

}

​

function zero_list(length) {

  let zeros = [];

  count = parseInt(length) + 1;

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

    zeros.push(0);

  }

  return zeros;

}

​

function number_list(length) {

  let zeros = [];

  count = parseInt(length) + 1;

  for (let i = 0; i < count; i++) {

    zeros.push(i);

  }

  return zeros;

}

​

​

function setup() {

  createCanvas(848, 428);

  // Create a new <div> element

  const chartDiv = document.createElement('div');

  chartDiv.id = 'chartContainer'; // Set an id for the <div> element

​

  // Append the <div> element to the parent of the p5.js canvas

  const parentElement = document.querySelector('#defaultCanvas0').parentNode;

  parentElement.appendChild(chartDiv);

  // Create a new <canvas> element for Chart.js

  const chartCanvas = document.createElement('canvas');

  chartCanvas.style.position = 'absolute'; // Set the position to absolute

  chartCanvas.style.top = '20px'; // Set the top position to 0

  chartCanvas.style.left = '20px'; // Set the left position to 0

  chartDiv.appendChild(chartCanvas);

  ctx = chartCanvas.getContext('2d');

  chartCanvas.style.backgroundColor = "rgb(255,255,255)"

  but1000 = document.getElementById('m_1000');

  inp = createInput('1000');

  inp.position(672, 50);

  inp.size(45);

  inp.id("input1");

  inp.style("z-index", "3");

  inp2 = createInput('10');

  inp2.position(698, 98);

  inp2.size(45);

  inp2.id("input2");

  inp2.style("z-index", "3");

  inp3 = createInput('0.5');

  inp3.position(643, 170);

  inp3.size(35);

  inp3.id("input3");

  inp3.style("z-index", "3");

  inp2.input(function() {

    validateInput(inp2);

  });

  inp.input(function() {

    validateInput1(inp);

  });

  inp3.input(function() {

    validateInput2(inp3);

  });

  chart = new Chart(ctx, {

    type: 'bar',

    data: {

      labels: numbers_list,

      datasets: [{

        label: "Antal Succes",

        backgroundColor: 'rgb(92, 184, 92)',

        borderColor: 'rgb(92, 184, 92)',

        data: arr_success,

      }

      ]

    },

    options: {

      responsive: true,

      scales: {

        xAxes: [{

          ticks: {

            fontSize: 20,

            maxTicksLimit: 11,

          }

        }],

        yAxes: [{

          display: true,

          ticks: {

            beginAtZero: true,

            fontSize: 20

          }

        }]

      },

      plugins: {

        datalabels: {

          display: false

        }

      }

    }

  });

  default_canvas = document.getElementById('defaultCanvas0');

}

​

function draw() {

  background(backgroundImage);

  noStroke();

  fill("rgba(0, 0, 0, .5)");

  rect(0, height/4*3, width, height/2);

  stroke(0);

  strokeWeight(5);

  line(540, 0, 540, 500);

  // Draw a rectangle that covers the entire canvas

  noFill();

  rect(0, 0, width, height-1);

  noStroke();

}

​

function experiment(n_){

  let number_success = 0;

  for(i = 0; i < n_; i++){

    let p_experimental = random(1);

    let p = document.getElementById("input3").value;

    if (p_experimental < p){

      number_success += 1;

    }

  }

  arr_success[number_success] += 1;

}

​

function m_experiments(){

  m = document.getElementById("input1").value;

  n = document.getElementById("input2").value;

  arr_success = zero_list(n);

  numbers_list = number_list(n);

  for(j=0; j < m; j++){

    experiment(n);

  }

  chart.data.datasets[0].data = arr_success;

  chart.data.labels = numbers_list;

  chart.update();

  arr_success = [];

}