// require https://cdn.jsdelivr.net/npm/tweakpane@3.0.7/dist/tweakpane.min.js

// require /turtles/turtle/turtle.js

​

// Wiggle challenge

​

const PARAMS = {

  segments: 10,

  segmentLength: 20,

  startYPos: 0.8,

  curve: 4,

  curveLength: 20,

  backgroundColor: "#000",

  wiggleColor: "#FFF",

  stemStroke: 4,

  outlineStroke: 2,

  outlineColor: "#0f0",

}

​

let t = null;

const pane = new Tweakpane.Pane();

​

function setup() {

  createCanvas(400, 400);

  t = new Turtle( width/2, height*PARAMS.startYPos );

  frameRate( 60 );

  pane.addInput(PARAMS, "backgroundColor");

  pane.addInput(PARAMS, "wiggleColor");

  pane.addInput(PARAMS, "outlineColor");

  const f1 = pane.addFolder({

    title: 'Shape',

  });

  f1.addInput(PARAMS, "segments", {

    step: 1,

    min: 1,

    max: 20

  });

  f1.addInput(PARAMS, "segmentLength", {

    min: 1,

    max: 40

  });

  f1.addInput(PARAMS, "startYPos", {

    min: 0,

    max: 1,

  });

  f1.addInput(PARAMS, "curve", {

    min: 0,

    max: 10,

  });

  f1.addInput(PARAMS, "curveLength", {

    min: 0,

    max: 30,

  });

  f1.addInput(PARAMS, "stemStroke", {

    min: 0,

    max: 20,

  });

  f1.addInput(PARAMS, "outlineStroke", {

    min: 0,

    max: 20,

  });

}

​

function draw() {

  background( PARAMS.backgroundColor );

  strokeWeight( PARAMS.outlineStroke * 2 + PARAMS.stemStroke );

  stroke( PARAMS.outlineColor );

  drawWiggleTree();

  strokeWeight( PARAMS.stemStroke );

  stroke( PARAMS.wiggleColor );

  drawWiggleTree();

}

​

​

const drawWiggleTree = () => {

  t.moveTo( width/2, height*PARAMS.startYPos );

  t.turnTo( -90 );

  t.penDown();

  const turnAngle = sin( frameCount / 60 ) * (360 / PARAMS.segments);

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

    t.pushState();

    for( let c = 0; c < PARAMS.curveLength; c++ ){ 

      t.turnLeft( PARAMS.curve );

      t.moveForward( 1 );

    }

    t.popState();

    t.pushState();

    for( let c = 0; c < PARAMS.curveLength; c++ ){ 

      t.turnRight( PARAMS.curve );

      t.moveForward( 1 );

    }

    t.popState();

    t.moveForward( PARAMS.segmentLength );

    t.turnLeft( turnAngle );

  }

  t.penUp();

}

​

​