P5 Isothermic Map Generator From Data Points

In my earth science class at school we had a lab where we went around the campus measuring the temperature at different place and marking it on a map. Afterword we were told to color the map using different colors for different temperatures like this:

As you can see there is never a jump that skips one of the temperature colors, if you have a data point of 30 near one of 32 you have to show whatever color 31 is between them. I asked the teacher if I could write some code where I can input the points and generate the map instead and they said yes. I wrote this in P5.js:

var dataPoints = [];
var num = 0;
var tempSlider;
var num2 = 0;
var num3 = 0;
var temps = [];
var load = false;
var text;

function setup() {
createCanvas(500, 500);
background(255);
tempSlider = createSlider(32, 50, 40);
tempSlider.position(20,20);
}

function draw() {
clear();
stroke(0);
fill(0);
line(0,0,width-1,0);
line(0,height-1,width-1,height-1);
line(0,0,0,height);
line(width-1,0,width-1,height-1);
textSize(20);
text(tempSlider.value(),0,20);
for (var i = 0; i < dataPoints.length; i++) {
dataPoints[i].display();
}
}else{
drawPixels();
}
}

function mousePressed () {
if(mouseX>170 || mouseY>55){
dataPoints[num] = {
x: mouseX,
y: mouseY,
temp: tempSlider.value(),
display: function() {
stroke(0+(((this.temp-32)/18))*255, 0, 255-(((this.temp-32)/18))*255);
fill(0+(((this.temp-32)/18))*255, 0, 255-(((this.temp-32)/18))*255);
ellipse(this.x, this.y, 5, 5);
}
}
num++;
}
}
}

function keyPressed () {
if(keyCode == ENTER){
updateTemp();
}
}

function updateTemp (){
for(var y = 0; y < height; y++){
for(var x = 0; x < width; x++){
var posTemps = [];
for(var j = 0; j < dataPoints.length; j++){
var distance = sqrt((x-dataPoints[j].x**2)+(y-dataPoints[j].y**2));
if(distance <=100){
var impact = (100 - distance)/100;
posTemps[num2] = impact*dataPoints[j].temp;
num2++;
}
}
for(var i = 0; i<posTemps.length; i++){
temps[num3]+= posTemps[i];
}
temps[num3] = temps[num3]/posTemps.length;
num3++;
}
}
}

function drawPixels (){
for(var i = 0; i<temps.length; i++){
stroke(0+(((temps[i]-32)/18))*255, 0, 255-(((temps[i]-32)/18))*255);
fill(0+(((temps[i]-32)/18))*255, 0, 255-(((temps[i]-32)/18))*255);
point(i%width,(i-(i%width))%height);
}
}

The problem with this code is all those for loops, when I try running the program it works and I can input the points but the moment I press enter the tab either crashes or very slowly draws the first line of pixels then freezes.

If you want to run the code

So if anyone knows some other way of drawing the pixels that I can use that might be faster that would be great. Also other problems you find in the code would also be helpful to know about.