Lissajous_Curve/public/data/scripts/init.js

'use strict';

let projectName = "lissajous_curve";

let debug = false,
	viewPort = {x: 0, y: 0},
    font,
    settings,
    loader;

//Only for online games
let socket;

let rows,
    cols,
    angle = 0,
    vel,
    size,
    radius,
    curves;

function preload(){
    loadJSON('data/settings/libraries.json', json => loadScripts(json));
    loadJSON('data/settings/settings.json', json => settings = json);
    loadFont('data/styles/font.ttf', f => font = f);
}

function setup(){
    interfaceSetup();
    canvasSetup();
    updateValues();
    updateInterface();
}

function draw(){

    background(10);

    updateLissajous();
    showLissajous();

    if (loader){
        loader.update();
        loader.display();
    }

	if (debug) debugInformation();
}

function updateLissajous(){
    angle += vel;
    if (angle > TWO_PI){
        angle = 0;
        for (let cr of curves){
            for (let cc of cr){
                cc.reset();
            }
        }
    }
    for (let x = 0; x < cols; x++){
        for (let y = 0; y < rows; y++){
            curves[x][y].update(x, y);
        }
    }
}

function showLissajous(){
    showGrid();
    showCircles();
    showPoints();
    showMovingGrid();
    showCurves();
}

function showGrid(){
    stroke('rgba(255, 255, 255, 0.1)');
    strokeWeight(1);
    for (let i = 1; i <= cols + 1; i++){
        line(i * size, 0, i * size, size * (rows + 1)); 
    }
    for (let i = 1; i <= rows + 1; i++){
        line(0, i * size, size * (cols + 1), i * size);
    }
}

function showCircles(){
    noFill();
    stroke(200);
    strokeWeight(2);
    for (let x = 3 * size / 2; x < size * (cols + 1); x += size){
        let y = size / 2;
        ellipse(x, y, radius * 2);
    }
    for (let y = 3 * size / 2; y < size * (rows + 1); y += size){
        let x = size / 2;
        ellipse(x, y, radius * 2);
    }
}

function showPoints(){
    stroke(200);
    strokeWeight(10);
    for (let i = 1; i <= cols; i++){
        let x = size * (i + 0.5) + sin(angle * i) * radius;
        let y = size / 2 - cos(angle * i) * radius;
        point(x, y);
    }
    for (let i = 1; i <= rows; i++){
        let x = size / 2 + sin(angle * i) * radius;
        let y = size * (i + 0.5) - cos(angle * i) * radius;
        point(x, y);
    }
}

function showMovingGrid(){
    stroke('rgba(255, 255, 255, 0.2)');
    strokeWeight(1);
    for (let i = 1; i <= cols; i++){
        let x = size * (i + 0.5) + sin(angle * i) * radius;
        line(x, 0, x, size * (rows + 1));
    }
    for (let i = 1; i <= rows; i++){
        let y = size * (i + 0.5) - cos(angle * i) * radius;
        line(0, y, size * (cols + 1), y);
    }
}

function showCurves(){
    strokeWeight(1);
    for (let x = 0; x < cols; x++){
        for (let y = 0; y < rows; y++){
            curves[x][y].show();
        }
    }
}


function updateValues(){
    removeCurves();

    cols = int($('#cols').val()),
    rows = int($('#rows').val());

    angle = 0;


    if (width / height > (cols + 1) / (rows + 1)){
        size = height / (rows + 1);
    } else {
        size = width / (cols + 1);
    }
    radius = size * 0.45;

    
    createCurves();
}

function updateInterface(){
    let c = $('#cols').val(),
        r = $('#rows').val(),
        v = $('#vel').val();
    
    $('span[name="cols"]').html(c);
    $('span[name="rows"]').html(r);
    $('span[name="vel"]').html(v);

    vel = float(v);
}

function removeCurves(){
    if (!curves)
        return;
    for (let x = 0; x < cols; x++){
        for (let y = 0; y < rows; y++){
            curves[x][y].image.remove();
        }
    }
}

function createCurves(){
    curves = [];
    for (let x = 0; x < cols; x++){
        curves[x] = [];
        for (let y = 0; y < rows; y++){
            curves[x][y] = new Curve(x, y);
        }
    }
}

function canvasSetup(){
	setFrameRate(60);
    let w = $('#canvas-holder').width(),
        h = $('#canvas-holder').height();
	let canvas = createCanvas(w, h);
	canvas.parent('canvas-holder');
    textFont(font);
    imageMode(CENTER);
}

function interfaceSetup(){
    
}

function loadScripts(libs){
    for (let script in libs){
        if (libs[script]){
            let url = location.protocol + '//' + location.host + '/lib/benjocraeft/' + script + '.js';
            console.log(url);
            $.getScript(url);
        }
    }
}