p5.js Web Editor | T07: Curve Explorer

xxxxxxxxxx
/** 
 * This sketch allows the user to design a curve and then generate the 
 * p5.js code that would draw that curve. It is a very rough and
 * ready sketch, but you may find it useful if you need to figure out 
 * the code for a complex shape. 
 *
 * This sketch uses advanced programming concepts that we have not covered
 * yet in the class. Don't worry if you don't understand the code. It is
 * provided purely as a useful tool to help with designing curves. 
 *
 * Instructions. 
 *
 * - Click anywhere on the canvas to add a point for the curve. 
 * - You will need to add at least two points before the curve will display.
 * - Keep clicking points to extend the curve. 
 * - Click and drag an existing point to move it.
 * - When you are happy with the curve. Click the 'copy code' button. 
 * - Open a new sketch and paste the code in.
 *
 * - Keyboard controls
 *     't' = change type of point (vertex, or curveVertex). 
 *     '-' = delete the selected point.
 *     '[' = insert a new point before the selected point.
 *     ']' = insert a new point after the selected point.
 *     'SPACE' = clear the points.
 *
 * - Change the size of the canvas if you need.
 *
 * Jared Donovan 2018.
 */
​
let code;
let points = [];
let copyButton;
let txtCode;
let _selectedPoint;
let pointType = 0;
let cancelDrag = false;
​
function displayCode(){
  let oldCode = document.getElementById("code").innerHTML;
  
  if (oldCode != getCode()){
      document.getElementById("code").innerHTML = getCode();
  }
  setTimeout(() => {displayCode(code);}, 1000);
}
​
displayCode(code);
​
function setup() {
  let cnv = createCanvas(800, 600);
  cnv.parent("cnv");
  
  fill(0);
}
​
function draw() {
  //setEndPoints();
​
  background(204);
  textAlign(LEFT, TOP);
  textSize(18);
​
  fill(180);
  noStroke();
  text("Click anywhere to add points for a curve." +
    "\nClick a point to select it." +
    "\nClick and drag to move." +
    "\n\nKeyboard controls" +
    "\n  't' = change type of point (vertex, or curveVertex)." +
    "\n  '-' = delete the selected point." +
    "\n  '[' = insert a new point before the selected point." +
    "\n  ']' = insert a new point after the selected point." +
    "\n  'SPACE' = clear the points.",
    20, 20, width - 40, height - 40);
​
  if (points.length > 1) {
    fill(255, 100);
    stroke(0);
​
    beginShape();
​
    for (let p of points) {
      p.display();
    }
​
    endShape(OPEN);
  }
​
  // Draw the control points
  for (let p of points) {
    p.displayPoint();
  }
  
  code = getCode();
  
  ///txtCode.html(getCode());
  // document.getElementById("pcode").innerHTML = "ONE";
}
​
function setSelectedPoint(p) {
  if (p === _selectedPoint) {
    return;
  }
​
  if (_selectedPoint != null) {
    _selectedPoint.setSelected(false);
  }
  _selectedPoint = p;
  if (_selectedPoint != null) {
    _selectedPoint.setSelected(true);
    pointType = p.type;
  }
}
​
function getSelectedPoint() {
  return _selectedPoint;
}
​
function getPointType() {
  if (pointType == 0) {
    return "spline";
  } else if (pointType == 1) {
    return "vertex";
  }
  return "";
}
​
function setPointType(pt) {
  pointType = pt;
  let sp = getSelectedPoint();
  if (sp != null) {
    sp.type = pt;
  }
}
​
function clearPoints() {
  points = [];
}
​
function deleteSelectedPoint() {
  let sp = getSelectedPoint();
​
  if (sp == null) {
    return;
  }
​
  // Re-link the list around the removed point
  if (sp.prev != null) {
    sp.prev.next = sp.next;
  }
  if (sp.next != null) {
    sp.next.prev = sp.prev;
  }
​
  // TODO: This won't work with JS arrays.
  let i = points.indexOf(sp);
  points.remove(i);
​
  setSelectedPoint(points.get(max(0, i - 1)));
}
​
// Adds a point at the specified x, y position
function addPointAt(x, y) {
  setSelectedPoint(null);
  let prevEndP = null;
​
  if (points.length > 0) {
    prevEndP = points[points.length - 1];
  }
  points.push(new CurvePoint(pointType, x, y, prevEndP));
  points[points.length - 1].setSelected(true);
}
​
function insertPointBefore() {
  if (points.length < 2) {
    return;
  }
​
  let sp = getSelectedPoint();
​
  if (sp == null) {
    return;
  }
​
  if (sp.prev == null) {
    return;
  }
  // Get the index of the selectedPoint and insert before that
  let i = points.indexOf(sp);
  points.add(i, new CurvePoint(pointType, (sp.x + sp.prev.x) / 2, (sp.y + sp.prev.y) / 2, sp.prev));
  setSelectedPoint(points[i]);
}
​
function insertPointAfter() {
  if (points.length < 2) {
    return;
  }
​
  let sp = getSelectedPoint();
​
  if (sp == null) {
    return;
  }
​
  if (sp.next == null) {
    return;
  }
​
  // Get the index of the selectedPoint and insert after that.
  let i = points.indexOf(sp);
  points.add(i + 1, new CurvePoint(pointType, (sp.x + sp.next.x) / 2, (sp.y + sp.next.y) / 2, sp));
  setSelectedPoint(points.get(i + 1));
}
​
function mouseInRange(mx, my){
    return (mx > 0 && mx < width && my > 0 && my < height);
}
​
​
function mousePressed() {
  if (mouseInRange(mouseX, mouseY)){
​
    // Check for a click on a control point.
    // If we find one, return without doing any more.
    for (let p of points) {
      if (p.checkMousePressed(mouseX, mouseY)) {
        return;
      }
    }
​
    // Otherwise, add a new point where the mouse was clicked.
    addPointAt(mouseX, mouseY);
  }
}
​
function mouseDragged() {
  if (mouseInRange(mouseX, mouseY)){  
    if (getSelectedPoint() !== null && !cancelDrag) {
      getSelectedPoint().x = mouseX;
      getSelectedPoint().y = mouseY;
    }
  }
}
​
function mouseReleased() {
  cancelDrag = false;
}
​
// Generate code to generate the curve to.
function getCode() {
  let retCode = "";
​
  if (points && points.length < 2) {
    retCode = "// Need at least two points to draw a curve.\n";
  } else {
    retCode = "function setup(){\n";
    retCode += " createCanvas(" + width + ", " + height + ");\n";
        retCode += "}\n\n";
    retCode += "function draw(){\n";
    retCode += "  beginShape();\n";
    for (let p of points) {
      retCode += p.toCode();
    }
    retCode += "  endShape();\n";
        retCode += "}\n";
  }
​
  return retCode;
}
​
function keyPressed() {
  if (key == 't') {
    if (pointType == 1) {
      setPointType(0);
    } else {
      setPointType(1);
    }
  } else if (key == '-') {
    deleteSelectedPoint();
  } else if (key == '[') {
    insertPointBefore();
  } else if (key == ']') {
    insertPointAfter();
  } else if (key == ' ') {
    clearPoints();
  } else {
    //save("curve_explorer-screenshot.png");
  }
}
/**/
Cookies

Sketch Files

Console

Preview
