'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); } } }