​

 Annotation PARADIGM V0

​

 INPUT: IMAGE

 OUTPUT: Annotation area

​

 HOW TO USE:

 1. Name your image "Input.jpg"

 2. Delete Input.jpg in the Sketch Files (top left)

 3. Upload your own version

​

 */

​

​

// REAL CODE STARTS HERE

// The name of the sheet from the drive that you want to get the data from

const GET_DATA_SHEET_NAME = "annotation_example_sheet";

​

// Mode options: HEATMAP

const MODE = "HEATMAP"

​

// The image used for the background

let inputImage = null;

let imw, imh

​

// The data from the sheet

let data = [];

​

let shapes = []

​

​

async function setup() {

    data = await getDataFromSheet(GET_DATA_SHEET_NAME);

​

}

​

function draw() {// Every frame:

    // Clear background

    background(255, 255, 255);

    textStyle(NORMAL);

    // Draw the image

    image(inputImage, 0, 0)

​

    // Draw heatmap

    if (MODE === "HEATMAP") {

        if (shapes.length > 0)

            drawHeatMap(shapes)

    }

​

}

​

/**

 *

 * @param {p5.Vector[][]} shapes - A list of lists that contain p5 vector objects.

 */

function drawHeatMap(shapes) {

    const shapeCount = shapes.length

​

    const fillColor = `rgba(217,25,25,${1/(shapeCount)})`

    const stroke = true

    const strokeColor = 'rgb(0,0,0)'

​

    // For every shape draw it

    for (const shape of shapes) {

        if (shape.length > 1) {

            // Set colors

            if (!stroke)

                noStroke()

            //stroke(strokeColor)

            fill(fillColor)

​

            // Draw shape

            beginShape()

            for (const vector of shape) {

                vertex(vector.x, vector.y)

            }

            endShape(CLOSE)

        }

    }

}

​

​

​

/**

 * Creates a point object that is used for displaying the annotations.

 * @param {number} x - The X coordinate of a point

 * @param {number} y - The Y coordinate of a point

 * @return {Vector} - A point

 */

function createPoint(x, y) {

    return createVector(x, y)

}

​

/**

 * This function gets the data from a google sheet of the given name.

 * Make sure that you use the correct name in order to read your own data!

 *

 * Data from the sheet will only be read if it is inside of a named range.

 * More info about named ranges:

 * https://support.google.com/docs/answer/63175

 * If you have used the save function to insert data into the sheet,

 * a named range will have been constructed for you.

 *

 * @param {string} sheetName - The name of you sheet. Make sure it is from your project.

 * @return {Promise<object|void>} This function will return a list of objects.

 * Every object containing two fields.

 * the first is 'tab', this contains the name of the sheet-tab the data came from

 * the second is 'data', this contains the data from a named range as a 2D-array.

 * So to acces the a value of a range you can use 'data[0].data[1][2]'

 * Giving you the value in C2 from the first named range.

 */

async function getDataFromSheet(sheetName) {

​

    // Safety check

    if (!sheetName) {

        return console.error("There was no sheet name provided!")

    }

​

    // Build data request

    const requestBody = {

        sheetName: sheetName

    }

​

    // Get the data from the server

    try {

​

        const response = await fetch("https://node.bykrijgsman.com/get-data", {

            method: "POST",

            mode: "cors",

            headers: {

                'Content-Type': 'application/json'

            },

            body: JSON.stringify(requestBody)

        })

​

        if (response.status === 500) {

            console.error(await response.text())

            return []

        }

​

        return (await response.json()).data

    } catch (e) {

        // There was an error while getting data if we get here!

        console.error(e)

    }

​

}