​

/**

 * draw lissajous figures with all points connected

 *

 * KEYS

 * 1/2               : frequency x -/+

 * 3/4               : frequency y -/+

 * arrow left/right  : phi -/+

 * 7/8               : modulation frequency x -/+

 * 9/0               : modulation frequency y -/+

 * s                 : save png

 */

//'use strict';

​

//let sketch = function(p) {

​

  let pointCount = 500;

  let lissajousPoints = [];

  let freqX = 4;

  let freqY = 7;

  let phi = 10;

​

  let modFreqX = 7;

  let modFreqY = 8;

​

  let lineWeight = 0.3;

  let lineColor;

  let lineAlpha = 50;

​

  var connectionRadius = 100;

  var connectionRamp = 1000;

​

  function setup() {

    createCanvas(800,500,);

    //background(0)

    colorMode(RGB, 255, 255, 255, 255);

    noFill();

    //frameRate(10);

    //drawer();

​

    //lineColor = color(random(255),random(255),random(0));

​

    //calculateLissajousPoints();

    //drawLissajous();

  }

​

function draw(){

  modFreqX = random(7)*tan(frameCount*1);

  modFreqY = random(8)*tan(frameCount*5);

  freqX = noise(4)*cos(frameCount*2);

  freqY = noise(7)*tan(frameCount*0.05);

  lineColor = color(random(255),random(255),random(100));

  calculateLissajousPoints();

  drawLissajous();

}

​

​

​

  function calculateLissajousPoints() {

    for (var i = 0; i <= pointCount; i++) {

      var angle = map(i, 0, pointCount, 0, TAU);

​

      let x = sin(angle * freqX + radians(phi)) * cos(angle * modFreqX);

      let y = sin(angle * freqY) * cos(angle * modFreqY);

      x *= width / 2;

      y *= height / 2;

​

      lissajousPoints[i] = createVector(x*sin(frameCount*0.5),y*sin(frameCount*0.5));

    }

  }

​

  function drawLissajous() {

    background(0);

    strokeWeight(lineWeight);

    push();

    translate(width / 2, height / 2);

​

    for (var i1 = 0; i1 < pointCount; i1++) {

      for (var i2 = 0; i2 < i1; i2++) {

        var d = lissajousPoints[i1].dist(lissajousPoints[i2]);

        var a = pow(1 / (d / connectionRadius + 1), 6);

        if (d <= connectionRadius) {

          stroke(lineColor, a * lineAlpha);

         //if (frameCount % 20 === 0) { 

          line(

            lissajousPoints[i1].x,

            lissajousPoints[i1].y,

            lissajousPoints[i2].x,

            lissajousPoints[i2].y

          );

         //}

        }

      }

    }

    pop();

 }

​

  function keyPressed() {

    if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

​

    if (key == '1') freqX--;

    if (key == '2') freqX++;

    freqX = max(freqX,1);

​

    if (key == '3') freqY--;

    if (key == '4') freqY++;

    freqY = max(freqY,1);

​

    if (keyCode == LEFT_ARROW) phi -= 15;

    if (keyCode == RIGHT_ARROW) phi += 15;

​

    if (key == '7') modFreqX--;

    if (key == '8') modFreqX++;

    modFreqX = max(modFreqX,1);

​

    if (key == '9') modFreqY--;

    if (key == '0') modFreqY++;

    modFreqY = max(modFreqY,1);

​

    calculateLissajousPoints();

    drawLissajous();

​

    console.log('freqX: ' + freqX + ', freqY: ' + freqY + ', phi: ' + phi + ', modFreqX: ' + modFreqX + ', modFreqY: ' + modFreqY);

  //};

​

}//;

​

//var myp5 = new p5(sketch);

​