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.

Screen Shot 2015-10-20 at 4.34.32 pm

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:

Screen Shot 2015-10-20 at 4.55.10 pm

Screen Shot 2015-10-20 at 4.56.05 pm

Screen Shot 2015-10-20 at 4.55.42 pm

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.

Screen Shot 2015-10-20 at 4.59.02 pm

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s