Bezier Curve Tiles

[svan]

Bezier curves require four points: two anchor points and two control points. If the anchor points are the diagonal corners of a square (eg, pts 0 and 3) and the control points are the other two corners (eg pts 1 and 2) some interesting designs can be created. Adding color, either fixed or random for each curve, adds even more variety. If you decide to try random colors it may be advisable to slow the frameRate() to avoid excessive flash because they will change with each draw cycle.

The AWT check boxes are added to the default frame above a dropped down default canvas so that both these components and standard Processing draw() code may be used.

Source Code:

import java.awt.*;
import java.awt.event.*;

java.awt.Frame frame;
java.awt.Canvas canvas;

int _wndW = 440;
int _wndH = 500;

boolean bezier1Checked;
boolean bezier2Checked;
boolean bezier3Checked;
boolean bezier4Checked;
boolean myColorChecked;

final int _numRows = 4;
final int _numCols = 4;

PVector[] b1 = new PVector[4];
PVector[] b2 = new PVector[4];
PVector[] b3 = new PVector[4];
PVector[] b4 = new PVector[4];

void checkBoxes() {
  Checkbox bezier1 = new Checkbox("Bezier1");
  bezier1.setBounds(20, 10, 80, 24);
  bezier1.addItemListener(e -> {
    bezier1Checked = (e.getStateChange() == ItemEvent.SELECTED);
  }
  );

  Checkbox bezier2 = new Checkbox("Bezier2");
  bezier2.setBounds(100, 10, 80, 24);
  bezier2.addItemListener(e -> {
    bezier2Checked = (e.getStateChange() == ItemEvent.SELECTED);
  }
  );

  Checkbox bezier3 = new Checkbox("Bezier3");
  bezier3.setBounds(180, 10, 80, 24);
  bezier3.addItemListener(e -> {
    bezier3Checked = (e.getStateChange() == ItemEvent.SELECTED);
  }
  );

  Checkbox bezier4 = new Checkbox("Bezier4");
  bezier4.setBounds(260, 10, 80, 24);
  bezier4.addItemListener(e -> {
    bezier4Checked = (e.getStateChange() == ItemEvent.SELECTED);
  }
  );

  Checkbox myColor = new Checkbox("Color");
  myColor.setBounds(340, 10, 80, 24);
  myColor.addItemListener(e -> {
    myColorChecked = (e.getStateChange() == ItemEvent.SELECTED);
  }
  );

  frame.add(bezier1);
  frame.add(bezier2);
  frame.add(bezier3);
  frame.add(bezier4);
  frame.add(myColor);
}

void bezierGrid(int l, int t, int w, int hg, int vg) {
  int left, top;

  for (int k = 0; k < _numRows; k++) {
    for (int j = 0; j < _numCols; j++) {
      left = l + j*(w+vg);
      top = t + k*(w+hg);

      b1[0] = new PVector(left, top + w);
      b1[1] = new PVector(left, top);
      b1[2] = new PVector(left + w, top + w);
      b1[3] = new PVector(left + w, top);

      b2[0] = new PVector(left, top);
      b2[1] = new PVector(left + w, top);
      b2[2] = new PVector(left, top + w);
      b2[3] = new PVector(left + w, top + w);

      b3[0] = new PVector(left + w, top);
      b3[1] = new PVector(left, top);
      b3[2] = new PVector(left + w, top + w);
      b3[3] = new PVector(left, top + w);

      b4[0] = new PVector(left, top);
      b4[1] = new PVector(left, top + w);
      b4[2] = new PVector(left + w, top);
      b4[3] = new PVector(left + w, top + w);

      if (!myColorChecked) {
        stroke(255);
      }
      strokeWeight(3);
      fill(0);
      rect( left, top, w, w);
      if (bezier1Checked) {
        if (myColorChecked) {
          stroke(255, 0, 0);
          //stroke(random(255), random(255), random(255));
        }
        bezier(b1[0].x, b1[0].y, b1[1].x, b1[1].y, b1[2].x, b1[2].y, b1[3].x, b1[3].y);
      }
      if (bezier2Checked) {
        if (myColorChecked) {
          stroke(255);
          //stroke(random(255), random(255), random(255));
        }
        bezier(b2[0].x, b2[0].y, b2[1].x, b2[1].y, b2[2].x, b2[2].y, b2[3].x, b2[3].y);
      }
      if (bezier3Checked) {
        if (myColorChecked) {
          stroke(0, 0, 255);
          //stroke(random(255), random(255), random(255));
        }
        bezier(b3[0].x, b3[0].y, b3[1].x, b3[1].y, b3[2].x, b3[2].y, b3[3].x, b3[3].y);
      }
      if (bezier4Checked) {
        if (myColorChecked) {
          stroke(255, 255, 0);
          //stroke(random(255), random(255), random(255));
        }
        bezier(b4[0].x, b4[0].y, b4[1].x, b4[1].y, b4[2].x, b4[2].y, b4[3].x, b4[3].y);
      }
    }
  }
}

void setup() {
  size(_wndW, _wndH); // Makes it possible to use draw();
  frame = ((processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative()).getFrame();
  canvas = (processing.awt.PSurfaceAWT.SmoothCanvas) ((processing.awt.PSurfaceAWT)surface).getNative();
  frame.setBounds(500, 100, _wndW, _wndH); // Frame to add checkbox components
  frame.setTitle("Bezier Curve Tiles");
  canvas.setBounds(0, 50, _wndW, _wndH - 50); // Canvas to use with draw()
  checkBoxes();
  //frameRate(10);
}

void draw() {
  bezierGrid(20, 20, 100, 0, 0);
}

Output: