// require https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js

​

// Pair Sketch with Beatriz Ribeiro

​

const CANVAS_WIDTH = 400;

const CANVAS_HEIGHT = 400;

​

const pane = new Tweakpane.Pane();

​

const PARAMS = {

  bg: "#000",

  lineColor: "#FFF",

  lineCount: 50,

  strokeWeight: 0.3,

  radius: CANVAS_WIDTH * 0.4,

  noiseShift: 0.2,

  seed: 62,

  rotation: 40,

};

​

function setup() {

  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

  // angleMode(DEGREES);

  noLoop();

  noFill();

  // add parameters

  pane.addInput(PARAMS, 'bg', {

    view: 'color'

  });

  pane.addInput(PARAMS, 'lineColor', {

    view: 'color'

  });

  pane.addInput(PARAMS, 'lineCount', {

    step: 1,

    min: 1,

    max: 1000

  });

  pane.addInput(PARAMS, 'strokeWeight', {

    min: 0.01,

    max: 1.5

  });

  pane.addInput(PARAMS, 'noiseShift', {

    step: 0.01,

    min: 0.01,

    max: 1

  });

  pane.addInput(PARAMS, 'seed', {

    step: 1,

    min: 1,

    max: 99

  });

  pane.addInput(PARAMS, 'rotation', {

    min: 0,

    max: 360

  });

  // redrwa

  pane.on('change', function(ev) {

    redraw();

  });

​

}

​

function draw() {

  background(PARAMS.bg);

  stroke(PARAMS.lineColor);

  strokeWeight(PARAMS.strokeWeight);

  noiseSeed(PARAMS.seed);

  // center sphere

  translate( width/2, height/2 );

  rotate( radians(PARAMS.rotation) );

  for( let i = 0; i < PARAMS.lineCount; i++ ){

    const p = i / PARAMS.lineCount;

    const v1 = noise( p, PARAMS.noiseShift );

    const x1 = sin( v1 * TWO_PI ) * PARAMS.radius;

    const y1 = cos( v1 * TWO_PI ) * PARAMS.radius;

    const v2 = noise( PARAMS.noiseShift, p );

    const x2 = sin( v2 * TWO_PI ) * PARAMS.radius;

    const y2 = cos( v2 * TWO_PI ) * PARAMS.radius;

​

    line( x1, y1, x2, y2 );

  }

  circle( 0,0, PARAMS.radius*2);

}