1.

Array

a. Array Hasil
b. Array_Object

Hasil
c. Array_2D

Hasil
2. Tugas II

a. Move_Eye

Hasil
b. Pie_Chart

Hasil
c. Saturation

Hasil
3. Tugas III

a. Animasi_2D

Hasil
b. Curve
class BezierCurve {
PVector startPoint;
PVector controlPoint1;
PVector controlPoint2;
PVector endPoint;

BezierCurve(PVector startPoint, PVector controlPoint1, PVector controlPoint2, PVector

endPoint) {
this.startPoint = startPoint;
this.controlPoint1 = controlPoint1;
this.controlPoint2 = controlPoint2;
this.endPoint = endPoint;
}

PVector pointAtParameter(float t) {
float u = 1 - t;
float tt = t * t;
float uu = u * u;
float uuu = uu * u;
float ttt = tt * t;

PVector point = PVector.mult(startPoint, uuu);

point.add(PVector.mult(controlPoint1, 3 * uu * t));
point.add(PVector.mult(controlPoint2, 3 * u * tt));
point.add(PVector.mult(endPoint, ttt));
return point;
}

PVector pointAtFraction(float fraction) {

float arcLength = arcLength();
float t = map(fraction, 0, 1, 0, arcLength);
return pointAtParameter(t);
}

float arcLength() {
float totalLength = 0;
PVector previousPoint = startPoint;
int resolution = 100;
for (int i = 1; i <= resolution; i++) {
float t = i / (float)resolution;
PVector currentPoint = pointAtParameter(t);
float segmentLength = PVector.dist(previousPoint, currentPoint);
totalLength += segmentLength;
previousPoint = currentPoint;
}
return totalLength;
}
PVector[] points(int count) {
PVector[] points = new PVector[count];
for (int i = 0; i < count; i++) {
float t = i / (float)(count - 1);
points[i] = pointAtParameter(t);
}
return points;
}
PVector[] equidistantPoints(int count) {
PVector[] points = new PVector[count];
float arcLength = arcLength();
float stepSize = arcLength / (float)(count - 1);
float accumulatedLength = 0;
PVector previousPoint = startPoint;
points[0] = previousPoint;
for (int i = 1; i < count; i++) {
float targetLength = i * stepSize;
float t = 0;
while (accumulatedLength < targetLength) {
t += 0.001;
PVector currentPoint = pointAtParameter(t);
float segmentLength = PVector.dist(previousPoint, currentPoint);
accumulatedLength += segmentLength;
previousPoint = currentPoint;
}
points[i] = previousPoint;
}
return points;
}
}

BezierCurve curve;

PVector[] points;
PVector[] equidistantPoints;

float t = 0.0;
float tStep = 0.004;

final int POINT_COUNT = 80;

int borderSize = 40;
void setup() {
size(640, 360, P2D);
frameRate(60);
smooth(8);
textAlign(CENTER);
textSize(16);
strokeWeight(2);

PVector a = new PVector( 0, 300);

PVector b = new PVector( 440, 0);
PVector c = new PVector(-200, 0);
PVector d = new PVector( 240, 300);

curve = new BezierCurve(a, b, c, d);

points = curve.points(POINT_COUNT);
equidistantPoints = curve.equidistantPoints(POINT_COUNT);
}

void draw() {
// Show static value when mouse is pressed, animate otherwise
if (mousePressed) {
int a = constrain(mouseX, borderSize, width - borderSize);
t = map(a, borderSize, width - borderSize, 0.0, 1.0);
} else {
t += tStep;
if (t > 1.0) t = 0.0;
}

background(255);
pushMatrix();
translate(borderSize, -50);

labelStyle();
text("STANDARD\nPARAMETRIZATION", 120, 310);
curveStyle();
beginShape(LINES);
for (int i = 0; i < points.length - 1; i += 2) {
vertex(points[i].x, points[i].y);
vertex(points[i+1].x, points[i+1].y);
}
endShape();

circleStyle();
PVector pos1 = curve.pointAtParameter(t);
ellipse(pos1.x, pos1.y, 12, 12);

popMatrix();
pushMatrix();
translate(width/2 + borderSize, -50);

labelStyle();
text("ARC LENGTH\nPARAMETRIZATION", 120, 310);
curveStyle();
beginShape(LINES);
for (int i = 0; i < equidistantPoints.length - 1; i += 2) {
vertex(equidistantPoints[i].x, equidistantPoints[i].y);
vertex(equidistantPoints[i+1].x, equidistantPoints[i+1].y);
 endShape();

circleStyle();
PVector pos2 = curve.pointAtFraction(t);
ellipse(pos2.x, pos2.y, 12, 12);

popMatrix();

// draw seek bar

pushMatrix();
translate(borderSize, height - 45);

int barLength = width - 2 * borderSize;

barBgStyle();
line(0, 0, barLength, 0);
line(barLength, -5, barLength, 5);

barStyle();
line(0, -5, 0, 5);
line(0, 0, t * barLength, 0);

barLabelStyle();
text(nf(t, 0, 2), barLength/2, 25);
popMatrix();
}

// Styles -----

void curveStyle() {
stroke(170);
noFill();
}

void labelStyle() {
noStroke();
fill(120);
}

void circleStyle() {
noStroke();
fill(0);
}

void barBgStyle() {
stroke (220);
noFill();
}

void barStyle() {
stroke(50);
noFill();
}

void barLabelStyle() {
noStroke();
fill(120);
}