How to resolve the algorithm Bitmap/Bézier curves/Cubic step by step in the Processing programming language

Published on 12 May 2024 09:40 PM

How to resolve the algorithm Bitmap/Bézier curves/Cubic step by step in the Processing programming language

Table of Contents

Problem Statement

Using the data storage type defined on this page for raster images, and the draw_line function defined in this other one, draw a cubic bezier curve (definition on Wikipedia).

Let's start with the solution:

Step by Step solution about How to resolve the algorithm Bitmap/Bézier curves/Cubic step by step in the Processing programming language

Source code in the processing programming language

noFill();
bezier(85, 20, 10, 10, 90, 90, 15, 80);
/*
 bezier(x1, y1, x2, y2, x3, y3, x4, y4)
 Can also be drawn in 3D.
 bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
*/


float[] x = new float[4];
float[] y = new float[4];
boolean[] permitDrag = new boolean[4];

void setup() {
  size(300, 300);
  smooth();
  //  startpoint coordinates
  x[0] = x[1] =  50;
	y[0] = 50;
	y[1] = y[2] = 150;
  x[2] = x[3] = 250;
  y[3] = 250;
  
}

void draw() {
  background(255);
  noFill();
  stroke(0, 0, 255);
  bezier(x[1], y[1], x[0], y[0], x[3], y[3], x[2], y[2]);
  // the bezier handles
  strokeWeight(1);
  stroke(100);
  line(x[0], y[0], x[1], y[1]);
  line(x[2], y[2], x[3], y[3]);
  // the anchor and control points
  stroke(0);
  fill(0);
  for (int i = 0; i< 4; i++) {
    if (i == 0 || i == 3) {
      fill(255, 100, 10);
      rectMode(CENTER);
      rect(x[i], y[i], 5, 5);
    } else {
      fill(0);
      ellipse(x[i], y[i], 5, 5);
    }
  }

  // permit dragging 
  for (int i = 0; i < 4; i++) {
    if (permitDrag[i]) {
      x[i] = mouseX;
      y[i] = mouseY;
    }
  }
}

void mouseReleased () {
  for (int i = 0; i < 4; i++) {
    permitDrag[i] = false;
  }
}

void mousePressed () {
  for (int i = 0; i < 4; i++) {
    if (mouseX >= x[i]-5 && mouseX <= x[i]+10 && mouseY >= y[i]-5 && mouseY <= y[i]+10) {
      permitDrag[i] = true;
    }
  }
}

// hand curser when dragging over points
void mouseMoved () {
  cursor(ARROW);
  for (int i = 0; i < 4; i++) {
    if (mouseX >= x[i]-5 && mouseX <= x[i]+10 && mouseY >= y[i]-5 && mouseY <= y[i]+10) {
      cursor(HAND);
    }
  }
}


  

You may also check:How to resolve the algorithm Delegates step by step in the Common Lisp programming language
You may also check:How to resolve the algorithm Copy a string step by step in the UNIX Shell programming language
You may also check:How to resolve the algorithm Determine if a string has all the same characters step by step in the C# programming language
You may also check:How to resolve the algorithm Sort three variables step by step in the Pascal programming language
You may also check:How to resolve the algorithm Non-decimal radices/Output step by step in the Julia programming language