Interactive heat map

General
1

Hi! I am new to coding and to the forum and it’s a pleasure to be here! I am looking to create an interactive heat map whereby the user can move pre set heat points on a circular map/graph. The pre set heat maps need to be able to be set at the beginning.

Has anyone already coded something similar or can point me in the direction of code that can help?

thanks a million!

James

2

Welcome!

I haven’t seen anything similar to this on the forum, but if you’re looking to place a number of shapes (circles or rectangles) on the screen and move them with your finger, that is quite easy - once you know something about Codea, that is.

We can help you when you get stuck, but you generally need to attempt your own code first.

If you’re new to Codea, I suggest you begin with the wiki link above and look at the tutorials. I have many, starting here- http://coolcodea.wordpress.com, which includes links to a couple of useful ebooks.

3

Just wrote this:

-- Heat

-- Use this function to perform your initial setup
function setup()
    displayMode(FULLSCREEN_NO_BUTTONS)
    -- The resolution of the heat map is passed to 'Map'
    MAP = Map(10)
end

function touched(touch)
    MAP:touched(touch)
end

function draw()
    background(0)
    MAP:draw()
end

And the Map class:

Map = class()

-- Initiate a heatmap.
function Map:init(res)
    self.grid = {}
    
    -- Grid dimensions, based on the given resolution.
    self.grid.w = 3*res
    self.grid.h = 4*res
    
    -- Defines every point in the grid as 0.
    for i = 1, self.grid.w do
        self.grid[i] = {}
        for j = 1, self.grid.h do
            self.grid[i][j] = 0
        end
    end
    
    -- Defines an image on which the heatmap is drawn.
    self.img = image(self.grid.w, self.grid.h)
end

-- When a point is touched, it's set to 100. So heat is added this way.
function Map:touched(touch)
    -- Get corresponding grid coordinates from touch
    local i = math.floor(touch.x/(WIDTH/self.grid.w))
    local j = math.floor(touch.y/(HEIGHT/self.grid.h))
    print(i,j)
    self.grid[i][j] = 100
end

-- Every step, the new temperature of every point is calculated using 'average', see below
function Map:draw()
    for i = 1, self.grid.w do
        for j = 1, self.grid.h do
            -- Calculates the gridpoint value
            self.grid[i][j] = average(self.grid, i, j, 1)
            -- Draws a pixel with corresponding alpha on the heatmap
            self.img:set(i, j, color(255,0,0, self.grid[i][j]*255))
        end
    end
    
    -- Draw the heatmap across the screen.
    noSmooth()
    spriteMode(CORNER)
    sprite(self.img, 0, 0, WIDTH, HEIGHT)
end

-- Function used to calculate heat propagation. But mind you, this isn't how heat
-- propagation works at all. It calculates the average value of a point and it's
-- neighbours within a given range.
function average(grid, i, j, range)
    local sum = 0
    local n = (2*range+1)^2
    for p = i-range, i+range do
        for q = j-range, j+range do
            -- There are less points in the range along the edges.
            if p<1 or p>grid.w or q<1 or q>grid.h then
                n = n - 1
            else
                sum = sum + grid[p][q]
            end
        end
    end
    return sum/n
end

At the bottom you’ll find the function I used to simulate heat propagation. Of course, this doesn’t come anywhere near a simulation of real heat propagation. If you want to implement that, you are gonna need some knowledge about numerical approximations of differential equations: http://en.wikipedia.org/wiki/Heat_equation

4

Ok, it looks nicer with this in the Map:draw function instead of what it was:

            -- Draws a pixel with corresponding alpha on the heatmap
            local r = math.min(255*self.grid[i][j], 255)
            local g = math.min(math.max(255*self.grid[i][j]-255, 0), 255)
            local b = math.min(math.max(255*self.grid[i][j]-510, 0), 255)
            self.img:set(i, j, color(r, g, b, 255))
5

@Kjell - I suspect James was talking about business heat maps, where numbers are shaded in different colours so you can easily pick out the highs and lows - but maybe he can confirm that

6

Hi guys thanks tons for your code and information so far, but yes it is business heat maps, for example moving pre set buttons pertaining to different companies or risk points and moving them within a 4 quadrant circle

7

Kjell that is great work though and looks ace with the extra code