When coding came across as mathematical algorithms I had got a little bit scared and hesitant to even attempt it because it just sound difficult. In class when we messed around with a few codes, I’m not going to lie, it was quite difficult but the more I did it the more it made sense. Slow and steady won the race this time. Coding is something that you have to submerse yourself in, in order for it to make sense because it is quite easy to just forget (I’d know through experience). So I researched it and watched a few videos in order to understand and take it as slow as I needed to, to get this assessment done. I didn’t even bother trying to find the most difficult code I could and just stress myself out trying to figure it out and get something done. So i found a basic following code off processing.org and I was actually more interested in this than i probably should have been. But it just made me question: “How does a computer know how to do this?”. So this is what i wanted to learn myself. This is the standard code.

float[] x = new float[20]; float[] y = new float[20]; float segLength = 18; void setup() { size(640, 360); strokeWeight(9); stroke(255, 100); } void draw() { background(0); dragSegment(0, mouseX, mouseY); for(int i=0; i<x.length-1; i++) { dragSegment(i+1, x[i], y[i]); } } void dragSegment(int i, float xin, float yin) { float dx = xin - x[i]; float dy = yin - y[i]; float angle = atan2(dy, dx); x[i] = xin - cos(angle) * segLength; y[i] = yin - sin(angle) * segLength; segment(x[i], y[i], angle); } void segment(float x, float y, float a) { pushMatrix(); translate(x, y); rotate(a); line(0, 0, segLength, 0); popMatrix(); }

I went through this code through and through messing with numbers and stuff, seeing what changed and what didn’t change and what I could get away without finding any errors. This is what I found out about the code.

float[] x = new float[20]; **Amount of dots**

float[] y = new float[20];

float segLength = 18; **The distance between each segment**

void setup() {

size(640, 360); **Size of Canvas**

strokeWeight(9); **Size of Dots/lines**

stroke(255, 100); **Colour/ Opacity/ (Adding of 2 more numbers to change colour)**

}

void draw() {

background(0); **Canvas Background Colour**

dragSegment(0, mouseX, mouseY);

for(int i=0; i<x.length-1; i++) {

dragSegment(i+1, x[i], y[i]);

}

}

void dragSegment(int i, float xin, float yin) {

float dx = xin – x[i];

float dy = yin – y[i];

float angle = atan2(dy, dx);

x[i] = xin – cos(angle) * segLength;

y[i] = yin – sin(angle) * segLength;

segment(x[i], y[i], angle);

}

void segment(float x, float y, float a) {

pushMatrix();

translate(x, y);

rotate(a); **Rotates the angle of the dot**

line(0, 0, segLength, 0); **These numbers will change the length of the dots, First number chances the length to be angled ‘\’ In that direction, The second number changes the dots (now lines) to be angled ‘/’ that way. The third one changes the distance of the start of the line to your mouse.**

popMatrix();

}

This is what the standard code looked like. Basically what it was, was a chain/snake-like line that followed your mouse wherever it was placed onto the canvas. It was a line of dots with a transparent line overlaid on top of it.

So i played around with the code and went through it and wanted to see where it lead me and where I could go with it and i had quite a bit of fun adding and subtracting things to it.

float[] x = new float[30];

float[] y = new float[50];

float segLength = 35;

void setup() {

size(1200, 720);

strokeWeight(15);

stroke(200, 90, 111, 167);

}

void draw() {

background(0);

dragSegment(0, mouseX, mouseY);

for(int i=0; i<x.length-1; i++) {

dragSegment(i+1, x[i], y[i]);

}

}

void dragSegment(int i, float xin, float yin) {

float dx = xin – x[i];

float dy = yin – y[i];

float angle = atan2(dy, dx);

x[i] = xin – cos(angle) * segLength;

y[i] = yin – sin(angle) * segLength;

segment(x[i], y[i], angle);

}

void segment(float x, float y, float a) {

pushMatrix();

translate(x, y);

rotate(20);

line(200, 1, segLength, 0);

popMatrix();

}

These 3 images are showing what I ended up with my code:

I messed with the stroke weight as well as the colour on this one, was honestly more fun than I imagined it to be. Less is more and I honestly believe that.