// layout.js
//  general presentation functions for keeping items on screen during a draw loop
//  background and animated elements
//  PJR May 2020

var layout = {
    screen: [560,320,1],
    screen_elements: [],
    instruction_elements: [],
    stimulus_list: [],
    default_font: 'Arial',
    default_size: 24,
    default_color: 'black',
    default_align: 'center',
    init: function(window_name,screen_size) {
        let canvas = document.getElementById(window_name);
        this.ctx = canvas.getContext('2d');
        this.screen=screen_size;
        this.instructions=true;
        this.background_elements=[];
        this.stimulus_list=[];
    },
    add_background: function(elem) {
        this.screen_elements.push(elem);
    },
    add_stimulus: function(stim) {
        this.stimulus_list.push(stim);
    },
    add_anim: function(elem,frames) {
        this.screen_elements.push(elem);
        elem.animated=true;
        elem.frames=frames;
    },
    add_text: function(text_list,start_pos,color='',size=0,align='') {
        var y=start_pos[1];
        let text_color = (color === '')?this.default_color:color;
        let text_size = (size === 0)?this.default_size:size;
        let text_align = (align === '')?this.default_align:align;
        for(let i=0;i<text_list.length;i++) {
            var elem = new element('text',[text_list[i], [start_pos[0],y], text_color, text_size, text_align]);
            this.screen_elements.push(elem);
            y = y + text_size*1.1;
        }
    },
    draw: function() {
        // clear the screen
        this.ctx.clearRect(0,0, this.screen[0], this.screen[1]);
        for(let i=0;i<this.screen_elements.length;i++) {
            this.screen_elements[i].draw();
            if (this.screen_elements[i].animated) this.screen_elements[i].frames--;
        }
        // check for expired animated elements
        for(let i=0;i<this.screen_elements.length;) {
            if(this.screen_elements[i].animated && this.screen_elements[i].frames<=0) this.screen_elements.splice(i,1);
            else i++;
        }
    },
    message: function(msg) {
        this.ctx.clearRect(0,0, this.screen[0], this.screen[1]);
        this.ctx.font = "24px Arial";
        this.ctx.fillStyle = 'black';
        this.ctx.textAlign = "center";
        var lines=msg.split(';');
        for(var i=0;i<lines.length;i++) {
            this.ctx.fillText(lines[i],this.screen[0]/2,this.screen[1]/2+(i*25)-(lines.length*12));
        }
    },
    clear: function() {
        this.ctx.clearRect(0,0, this.screen[0], this.screen[1]);
        this.screen_elements=[];
        //this.instruction_elements=[];
        //this.stimulus_list=[];
    }
};


// screen element -- lane, cue, text, shape
// Elements:
//  text as 'text' [posX,posY] color size align
//  image as imageObject [posX,posY] [sizeX,sizeY]
//  zoom_image as imageObject [posX,posY] [sizeX,sizeY] [clip_startX,Y] [clip_sizeX,Y]
//  rotate_image as imageObject [posX,posY] [sizeX,sizeY] rotation
//  circle as [posX,posY] color size
//  rectangle [posX,posY] color [sizeX,sizeY]
//  triangle [posX,posY] color [sizeX,sizeY]
//  ring as [posX,posY] color size thickness
//  line [posX,posY] color [endX, endY] thickness
//  arrow [posX,posY] color size direction thickness
//  slider [posX,posY] color size options values labels


var element = function(elem_type,args) {
    this.elem_type = elem_type;
    this.frames = 0;
    this.animated = false;
    this.image = null;
    if(elem_type === 'text') {
        this.text = args[0];
        this.pos = args[1];
        this.color = args[2];
        this.size = args[3];
        this.align = args[4];
        this.font = 'Arial';
    } else if(elem_type === "image") {
        this.image = args[0];
        this.pos = args[1];
        this.size = args[2];
    } else if(elem_type === "zoom_image") {
        this.image = args[0];
        this.pos = args[1];
        this.size = args[2];
        this.clip_start = args[3];
        this.clip_size = args[4];
    } else if(elem_type === "rotate_image") {
        this.image = args[0];
        this.pos = args[1];
        this.size = args[2];
        this.rotate = args[3];
    } else if(elem_type === "circle") {
        this.pos=args[0].slice();
        this.color=args[1];
        this.size=args[2];
    } else if(["rectangle", "triangle", "diamond", "heart", "plus",
            "hexagon", "pentagon", "hourglass", "arrowhead_down", "trapezoid",
            "block_l", "block_c", "block_t", "block_i"].includes(elem_type)) {
        this.pos=args[0].slice();
        this.color=args[1];
        if(!Array.isArray(args[2])) {
            this.size=[2*args[2],2*args[2]];
        }
        else this.size=args[2];
    } else if(["ring", "line" ].includes(elem_type)) {
        this.pos=args[0];
        this.color=args[1];
        this.size=args[2];
        this.thick=args[3];
    } else if(elem_type === 'arrow') {
        this.pos=args[0];
        this.color=args[1];
        this.size=args[2];
        // direction converted to radian space from compass space
        this.direction=((450 - args[3]) * Math.PI) / 180.0;
        this.thick=args[4];
    } else if(elem_type === 'slider') {
        this.pos=args[0];
        this.color=args[1];
        this.size=args[2];
        this.options=args[3];
        this.value=args[4];
        this.labels=[];
    }

    this.contains=function(x,y) {
        if (this.elem_type === 'circle') {
            return (Math.sqrt((x-this.pos[0])**2 + (y-this.pos[1])**2) <= this.size);
        } else if(["rectangle", "triangle", "diamond", "heart", "plus" ].includes(this.elem_type)) {
            // pos is center not upper left
            return(x>=(this.pos[0]-this.size[0]/2) && x<=(this.pos[0]+this.size[0]/2) &&
                y>=(this.pos[1]-this.size[1]/2) && y<=(this.pos[1]+this.size[1]/2));
        }
        return(x>this.pos[0] && x<(this.pos[0]+this.size[0]) &&
            y>this.pos[1] && y<(this.pos[1]+this.size[1]));
    }
    this.position=function(x,y) {
        var f=(x-this.pos[0])/this.size[0];
        if (this.elem_type === 'slider') {
            return Math.floor(this.options*f);
        }
        return(f);
    }

    // draws all screen elements
    this.draw=function() {
        if(this.elem_type === 'text') {
            layout.ctx.font = this.size.toString() + "px "+this.font;
            layout.ctx.fillStyle = this.color;
            layout.ctx.textAlign = this.align;
            layout.ctx.fillText(this.text, this.pos[0], this.pos[1]);
        } else if(this.elem_type === 'image') {
            layout.ctx.drawImage(this.image, this.pos[0], this.pos[1], this.size[0], this.size[1]);
        } else if(this.elem_type === 'zoom_image') {
            layout.ctx.drawImage(this.image, this.clip_start[0], this.clip_start[1], this.clip_size[0], this.clip_size[1],
                this.pos[0], this.pos[1], this.size[0], this.size[1]);
        } else if(this.elem_type === 'rotate_image') {
            layout.ctx.setTransform(1,0,0,1,this.pos[0]+this.size[0]/2,this.pos[1]+this.size[1]/2);
            layout.ctx.rotate(-this.rotate*Math.PI/180);
            layout.ctx.drawImage(this.image, -this.size[0]/2, -this.size[1]/2, this.size[0], this.size[1]);
            layout.ctx.setTransform(1,0,0,1,0,0);
        } else if(this.elem_type === 'circle') {
            layout.ctx.beginPath();
            layout.ctx.fillStyle=this.color;
            layout.ctx.arc(this.pos[0], this.pos[1], this.size, 0, Math.PI*2, true);
            layout.ctx.closePath();
            layout.ctx.fill();
        } else if(this.elem_type === 'ring') {
            layout.ctx.strokeStyle = this.color;
            layout.ctx.beginPath();
            layout.ctx.lineWidth=this.thick;
            layout.ctx.arc(this.pos[0], this.pos[1], this.size, 0, Math.PI*2, true);
            layout.ctx.closePath();
            layout.ctx.stroke();
        } else if(this.elem_type === 'rectangle') {
            layout.ctx.fillStyle = this.color;
            layout.ctx.fillRect(this.pos[0]-this.size[0]/2, this.pos[1]-this.size[1]/2, this.size[0], this.size[1]);
        } else if(this.elem_type === 'line') {
            layout.ctx.strokeStyle = this.color;
            layout.ctx.lineWidth=this.thick;
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0],this.pos[1]);
            layout.ctx.lineTo(this.size[0],this.size[1]);
            layout.ctx.stroke();
        } else if(this.elem_type === 'triangle') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0], this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0]+this.size[0]/2, this.pos[1] + this.size[1]/2);
            layout.ctx.lineTo(this.pos[0]-this.size[0]/2, this.pos[1] + this.size[1]/2);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'diamond') {
            layout.ctx.fillStyle = this.color;
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0], this.pos[1] - this.size[0] / 2);
            layout.ctx.lineTo(this.pos[0] + this.size[0] / 2, this.pos[1]);
            layout.ctx.lineTo(this.pos[0], this.pos[1] + this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] - this.size[0] / 2, this.pos[1]);
            layout.ctx.closePath();
            layout.ctx.fill();
        } else if(this.elem_type === 'heart') {
            var topCurveHeight = this.size[1] * 0.3;
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0] / 2, (this.pos[1] - this.size[1] / 2) + topCurveHeight);
            // top left curve
            layout.ctx.bezierCurveTo(this.pos[0] - this.size[0] / 2, this.pos[1] - this.size[1] / 2,
                this.pos[0], this.pos[1] - this.size[1]/2,
                this.pos[0], (this.pos[1] - this.size[1]/2) + topCurveHeight);
            // top right curve
            layout.ctx.bezierCurveTo(this.pos[0], this.pos[1] - this.size[1]/2,
                this.pos[0]+this.size[0]/2, this.pos[1] - this.size[1]/2,
                this.pos[0]+this.size[0]/2, (this.pos[1] - this.size[1]/2) + topCurveHeight);
            // bottom right curve
            layout.ctx.bezierCurveTo(this.pos[0] + this.size[0]/2, this.pos[1]+topCurveHeight/2,
                this.pos[0], this.pos[1]+topCurveHeight/2,
                this.pos[0],this.pos[1]+this.size[1]/2);
            // bottom left curve
            layout.ctx.bezierCurveTo(this.pos[0], this.pos[1]+topCurveHeight/2,
                this.pos[0]- this.size[0]/2, this.pos[1]+topCurveHeight/2,
                this.pos[0] - this.size[0]/2, this.pos[1] - this.size[1]/2 + topCurveHeight);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'plus') {
            var x_points = [this.pos[0] - this.size[0] / 2,
                this.pos[0] - this.size[0] * .15,
                this.pos[0] + this.size[0] * .15,
                this.pos[0] + this.size[0] / 2];
            var y_points = [this.pos[1] - this.size[1] / 2,
                this.pos[1] - this.size[1] * .15,
                this.pos[1] + this.size[1] * .15,
                this.pos[1] + this.size[1] / 2];
            var shape = [[1, 0], [2, 0], [2, 1], [3, 1], [3, 2], [2, 2], [2, 3], [1, 3], [1, 2], [0, 2], [0, 1], [1, 1]];
            layout.ctx.moveTo(x_points[shape[0][0]], y_points[shape[0][1]]);
            layout.ctx.beginPath();
            for (let i = 0; i < shape.length; i++)
                layout.ctx.lineTo(x_points[shape[i][0]], y_points[shape[i][1]]);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'pentagon') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0],this.pos[1]-this.size[1] * 0.45);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.07);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.3,this.pos[1]+this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.3,this.pos[1]+this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.07);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'hexagon') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0],this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.45, this.pos[1] - this.size[1]/4);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.45, this.pos[1] + this.size[1]/4);
            layout.ctx.lineTo(this.pos[0], this.pos[1] + this.size[1] / 2);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.45, this.pos[1] + this.size[1]/4);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.45, this.pos[1] - this.size[1]/4);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'trapezoid') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.4);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.4);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.25,this.pos[1]+this.size[1] * 0.4);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.25,this.pos[1]+this.size[1] * 0.4);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'arrowhead_down') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]);
            layout.ctx.lineTo(this.pos[0],this.pos[1]+this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0],this.pos[1]);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.5);
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'hourglass') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]+this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]+this.size[1] * 0.5);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'block_l') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]-this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0],this.pos[1]-this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0],this.pos[1]);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]);
            layout.ctx.lineTo(this.pos[0] + this.size[0] * 0.5,this.pos[1]+this.size[1] * 0.5);
            layout.ctx.lineTo(this.pos[0] - this.size[0] * 0.5,this.pos[1]+this.size[1] * 0.5);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'block_t') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0]/2,this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/6,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/6,this.pos[1]+this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/6,this.pos[1]+this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/6,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/2,this.pos[1]-this.size[1]/6);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'block_c') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0]/2,this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/6,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/6,this.pos[1]+this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]+this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]+this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/2,this.pos[1]+this.size[1]/2);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'block_i') {
            layout.ctx.beginPath();
            layout.ctx.moveTo(this.pos[0] - this.size[0]/2,this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]-this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/6,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/6,this.pos[1]+this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]+this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] + this.size[0]/2,this.pos[1]+this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/2,this.pos[1]+this.size[1]/2);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/2,this.pos[1]+this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/6,this.pos[1]+this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/6,this.pos[1]-this.size[1]/6);
            layout.ctx.lineTo(this.pos[0] - this.size[0]/2,this.pos[1]-this.size[1]/6);
            layout.ctx.closePath();
            layout.ctx.fillStyle = this.color;
            layout.ctx.fill();
        } else if(this.elem_type === 'arrow') {
            layout.ctx.beginPath();
            layout.ctx.strokeStyle = this.color;
            layout.ctx.lineWidth = this.thick;
            layout.ctx.moveTo(this.pos[0],this.pos[1]);
            var end_x = this.pos[0]+this.size*Math.cos(this.direction);
            var end_y = this.pos[1]-this.size*Math.sin(this.direction);
            layout.ctx.lineTo(end_x,end_y);
            layout.ctx.stroke();
            // arrow head
            end_x = this.pos[0]+(this.size+this.thick)*Math.cos(this.direction);
            end_y = this.pos[1]-(this.size+this.thick)*Math.sin(this.direction);
            layout.ctx.beginPath();
            layout.ctx.strokeStyle = this.color;
            layout.ctx.fillStyle = this.color;
            layout.ctx.moveTo(end_x,end_y);
            var arrow_angle=0.87;
            layout.ctx.lineTo(end_x+(this.size/3)*Math.cos(this.direction-Math.PI*arrow_angle),
                end_y-(this.size/3)*Math.sin(this.direction-Math.PI*arrow_angle));
            layout.ctx.lineTo(end_x+(this.size/3)*Math.cos(this.direction+Math.PI*arrow_angle),
                end_y-(this.size/3)*Math.sin(this.direction+Math.PI*arrow_angle));
            //layout.ctx.lineTo(end_x,end_y);
            layout.ctx.lineTo(end_x,end_y);
            layout.ctx.closePath();
            layout.ctx.fill();
        } else if(this.elem_type === 'slider') {
            // draw this.options circles, connect with lines
            var circle_size = this.size[0]/((2*this.options)-1);  //radius
            var y=this.pos[1]+this.size[1]/2;
            var x=this.pos[0]+circle_size/2;
            layout.ctx.strokeStyle = this.color;
            layout.ctx.fillStyle = this.color;
            layout.ctx.lineWidth=2; //todo: scale with slider size
            for(var i=0;i<this.options;i++) {
                layout.ctx.beginPath();
                layout.ctx.arc(x, y, circle_size/2, 0, Math.PI*2, true);
                layout.ctx.closePath();
                if (i===this.value) layout.ctx.fill();
                else layout.ctx.stroke();
                x=x+circle_size*2;
            }
            layout.ctx.beginPath();
            x = this.pos[0]+circle_size;
            for(i=0;i<this.options-1;i++) {
                layout.ctx.moveTo(x,y);
                layout.ctx.lineTo(x+circle_size,y);
                x=x+circle_size*2;
            }
            layout.ctx.closePath();
            layout.ctx.stroke();
            if (this.labels.length>0) {
                // labels[0] is center
                let label_y = this.pos[1];
                layout.ctx.font = circle_size + "px Arial";
                //layout.ctx.font = (this.size[0]/9).toFixed(0)+"px Arial";
                layout.ctx.fillStyle = 'black';
                layout.ctx.textAlign = 'center';
                layout.ctx.fillText(this.labels[0], this.pos[0]+((this.options-0.5)*circle_size), label_y);
                if (this.labels.length>1) {
                    // anchor labels
                    layout.ctx.textAlign = 'center';
                    layout.ctx.fillText(this.labels[1], this.pos[0]+circle_size/2, label_y);
                    layout.ctx.fillText(this.labels[2], this.pos[0]+((this.options*2-1.5)*circle_size), label_y);
                }
            }
        }
    }
};


// Kaleidoscope creating and drawing functions
var kaleido=function() {
    this.poly_list=[];
    this.scale=1.0;
    this.size=[0,0];
    this.start=0;
    this.init_square=[-100,-100,-100,100,100,100,100,-100];
    this.init_pentagon=[0,-100,-95,-31,-56,81,56,81,95,-31];
    this.init_hexagon=[0,-100,-87,-50,-87,50,0,100,87,50,87,-50];
    this.init=function(shape,layers,deflects=4,size=[200,200],scale=.7) {
        var curr_scale=1.0;
        this.scale=scale;
        this.size=size;
        if (shape === 'square' || shape === '4') {
            var init_shape=this.init_square.slice();
            this.start=4;
        }
        else if(shape === 'pentagon' || shape === '5') {
            init_shape=this.init_pentagon.slice();
            this.start=5;
        }
        else if(shape === 'triangle' || shape === '3' || shape === 'hexagon' || shape === '6') {
            init_shape=this.init_hexagon.slice();
            this.start=6;
        }
        for(var i=0;i<layers;i++) this.poly_list.push(new dpoly(init_shape));
        for(i=0;i<this.poly_list.length;i++) {
            this.poly_list[i].color=this.random_color();
            for(var j=0;j<deflects;j++) {
                var d=Math.round(Math.random()*600)/10;  // round to 1 sig digits for saving
                this.poly_list[i].deflect(d);
            }
            this.poly_list[i].scale(size,curr_scale);
            curr_scale=curr_scale*scale;
        }
    };
    this.draw=function(loc=[0,0]) {
        for(var i=0;i<this.poly_list.length;i++) this.poly_list[i].draw(loc);
    };
    this.random_color=function() {
        var range='0123456789ABCDEF';
        var color='#';
        for(var i=0;i<6;i++) color+=range[Math.floor(Math.random()*range.length)];
        return color;
    };
    this.sister=function(nudge=10) {
        var s=new kaleido();
        var curr_scale=1.0;
        for(var i=0;i<this.poly_list.length;i++) {
            s.poly_list.push(this.poly_list[i].sister(nudge));
            s.poly_list[i].scale(this.size,curr_scale);
            curr_scale=curr_scale*this.scale;
        }
        s.scale=this.scale;
        s.size=this.size;
        return s;
    };
    this.copy=function() {
        var s=new kaleido();
        var curr_scale=1.0;
        for(let i=0;i<this.poly_list.length;i++) {
            s.poly_list.push(this.poly_list[i].copy());
            s.poly_list[i].scale(this.size,curr_scale);
            curr_scale=curr_scale*this.scale;
        }
        s.scale=this.scale;
        s.size=this.size;
        return s;
    };
    this.resize=function(scale) {
        this.size=[this.size[0]*scale,this.size[1]*scale];
        for(let i=0;i<this.poly_list.length;i++) {
            for(let j=0;j<this.poly_list[i].poly.length;j++)
                this.poly_list[i].poly[j]*=scale;
        }
    };
    // todo: save and create from string/object representation
    this.stringify=function() {
        var short_form=[];
        for(let i=0;i<this.poly_list.length;i++) {
            var short_poly={'c': this.poly_list[i]['color'], 'd': this.poly_list[i]['deflects']};
            short_form.push(short_poly);
        }
        return ({'s': this.start, 'p': short_form});
    };
    this.fromstring=function(short_form,size,scale) {
        //var short_form = JSON.parse(string_form);
        if(short_form['s']===4) {
            var init_shape = this.init_square.slice();
            this.start = 4;
        } else if(short_form['s']===5) {
            init_shape = this.init_pentagon.slice();
            this.start = 5;
        } else if(short_form['s']===6) {
            init_shape = this.init_hexagon.slice();
            this.start = 6;
        }
        var curr_scale=1.0;
        this.size=size;
        this.scale=scale;
        for(var i=0;i<short_form['p'].length;i++) this.poly_list.push(new dpoly(init_shape));
        for(i=0;i<this.poly_list.length;i++) {
            this.poly_list[i].color=short_form['p'][i]['c'];
            for(var j=0;j<short_form['p'][i]['d'].length;j++) {
                this.poly_list[i].deflect(short_form['p'][i]['d'][j]);
            }
            this.poly_list[i].scale(size,curr_scale);
            curr_scale=curr_scale*scale;
        }
    }
};

var dpoly=function(init_poly) {
    this.poly=init_poly.slice();
    this.init=init_poly.slice();
    this.color='black';
    this.deflects=[];

    this.deflect=function(angle) {
        // spread out the vertices to add new
        for(var i=this.poly.length;i>0;i=i-2) {
            this.poly.splice(i,0,0);
            this.poly.splice(i,0,0);
        }
        // duplicate beginning at end for math algorithm
        this.poly.push(this.poly[0]);
        this.poly.push(this.poly[1]);
        this.nv=this.poly.length/2;
        for(i=1; i < 1000 && i < this.nv; i=i+2) {
            var mx=(this.poly[(i-1)*2]+this.poly[(i+1)*2])/2;
            var my=(this.poly[(i-1)*2+1]+this.poly[(i+1)*2+1])/2;
            var dx=this.poly[(i+1)*2]-this.poly[(i-1)*2];
            var dy=this.poly[(i+1)*2+1]-this.poly[(i-1)*2+1];
            var theta=Math.atan2(dy,dx);
            //this.poly[i*2]=Math.round((mx+angle*Math.sin(theta))*10)/10;
            //this.poly[i*2+1]=Math.round((my-angle*Math.cos(theta))*10)/10;
            this.poly[i*2]=Math.round(mx+angle*Math.sin(theta));
            this.poly[i*2+1]=Math.round(my-angle*Math.cos(theta));
        }
        // remove duplicate point from end
        this.poly.pop();
        this.poly.pop();
        this.deflects.push(angle);
    };
    this.draw=function(loc=[0,0]) {
        ctx.fillStyle = this.color;
        //ctx.strokeStyle = 'black';
        ctx.beginPath();
        ctx.moveTo(this.poly[0]+loc[0], this.poly[1]+loc[1]);
        for(var i=2;i<this.poly.length;i=i+2) ctx.lineTo(this.poly[i]+loc[0], this.poly[i+1]+loc[1]);
        ctx.closePath();
        ctx.fill();
    };
    this.scale=function scale(size,frac=1.0) {
        var x=[this.poly[0],this.poly[0]];
        var y=[this.poly[1],this.poly[1]];
        for(var i=2;i<this.poly.length;i=i+2) {
            if(this.poly[i]<x[0]) x[0]=this.poly[i];
            if(this.poly[i]>x[1]) x[1]=this.poly[i];
            if(this.poly[i+1]<y[0]) y[0]=this.poly[i+1];
            if(this.poly[i+1]>y[1]) y[1]=this.poly[i+1];
        }
        var fx=(size[0]/(x[1]-x[0]))*frac;
        var fy=(size[1]/(y[1]-y[0]))*frac;
        for(i=0;i<this.poly.length;i=i+2) {
            this.poly[i]=Math.round((this.poly[i]-(x[0]/frac))*fx);
            this.poly[i+1]=Math.round((this.poly[i+1]-(y[0]/frac))*fy);
        }
    };
    this.sister=function(nudge=10) {
        var s=new dpoly(this.init);
        s.color=this.color;
        for(var i=0;i<this.deflects.length;i++) {
            var distort=Math.random()*nudge;
            if(distort<(nudge/2)) distort=(-nudge-distort); // keeps randomness away from zero
            s.deflect(this.deflects[i]+distort);
        }
        return s;
    };
    this.copy=function() {
        var s=new dpoly(this.init);
        s.color=this.color;
        for(let i=0;i<this.deflects.length;i++) s.deflect(this.deflects[i]);
        return s;
    }
};

// utility functions
function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
}

function random_string(len) {
    var chars='ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
    var r='';
    for(;len>0;len--) r+=chars.charAt(Math.floor(Math.random()*chars.length));
    return r;
}

function time_string(hours) {
    if(hours<1) return((hours*60).toFixed(0)+" min");
    if(hours>24) {
        var days=Math.floor(hours/24);
        hours=hours-days*24;
        return(days.toFixed(0)+" days "+hours.toFixed(0)+" hours");
    }
    return(hours.toFixed(1)+" hours");
}