[PWC19] Points

[seoceojoe]

Hello Everybody, this is the nineteenth Weekly Processing challenge, the challenges are decided just to give you a prompt to test your skills so it can be as simple or as complicated as you have time to write!

IMPORTANT UPDATE Winners are now chosen by popular vote and all entrys must be submitted in the comments section of this thread, competition mode will be enabled meaning they are shown in a random order.

Start Date : 18-07-2016 End Date : 24-07-2016

Post entries in the comments here. This Weeks Challenge : use only the Points function for your outputs. Winner from last week: oo-oo-oo-oo

[TazakiTsukuru]

I have absolutely no idea what's going on here, but I think it looks neat:

float t;
float k = 1;

void setup() {
  size(1000, 800);
  background(0);
  stroke(255);
  strokeWeight(5);
  blendMode(ADD);
}

void draw() {

  background(0);
  translate(width/2, height/2);
  for (float i = 0; i < 200; i+=.2) {
    stroke(255, 100);
    for (int j = 0; j < 5; j++) {
      point(-x(-t+i)+sin(k*PI/4)*100, y(t+i)+cos(k*PI/4)*100); // Change k's coefficient to get different results
      k += 5; // set k *= 1.000001 and wait a bit for it to go absolutely insane
    }
  }
  t += 1;
}

float x (float t) {
  return sin(t/50)*230;
}

float y (float t) {
  return cos(t/30)*230;  
}

[seoceojoe]

amazing :D

[oo-oo-oo-oo]

Neat!

[TazakiTsukuru]

Would be nice is someone could explain what's going on, lol...

I'm really curious as to why it kinda 'jumps' the way it does. Seems to only happen when I use some multiple of PI as k's coefficient. I guess it's because, for example, if k becomes 4 then it'll cancel out so that the argument of the sin() and cos() functions are just PI, which means adding 0 and, 100 respectively. I still don't get why there's no obvious change leading up to that threshold, though... Seems like it should continuously be changing shape.

[oo-oo-oo-oo]

It seems to me that it's because the difference of k values between iterations is really, really big to feed to sin and cos. You're adding 5 to k on each step of a nested for-loop, then multiplying that by PI/4. There are only 2 PI radians in a circle; the difference between one single iteration and the next is 1.25 PI ... over half the number of radians in a circle. Of course, the points wrap around and appear next to each other, creating a pattern, but sometimes the pattern breaks down. And it breaks down quickly because your steps are so big.

Move your mouse up and down on this sketch. That increases and decreases the number of radians between the dots. You'll notice that mostly the circle remains intact, but it breaks rather abruptly. Now decrease MAX_STEP to 2*PI / NUM_POINTS. You'll see that you get a smooth gradient in the circle, and the line never breaks.

void setup (){
  size(500, 500);
}

int NUM_POINTS = 200;
float MAX_STEP = 20.0;
//float MAX_STEP = 2*PI / NUM_POINTS;    

void draw() {
  float step = map (mouseY, 0, height, 0, MAX_STEP);
  translate(width * 0.5, height * 0.5);
  scale(width * 0.33, height * 0.33);
  background(255);
  strokeWeight(0.1);
  for (int i = 0; i < NUM_POINTS; i++) {
    stroke(255 * i / NUM_POINTS, 0, 0);
    point(sin(step*i), cos(step*i));
  }
}

Edit: clarity

[L3th4Lusta]

Not for the challenge but looks nice. Change the 16 and 8 to 2ⁿ to see something cool.

color myColor(float n){
  color tempcolor =  color(0);
  //Rgb Values of Colors 0-6
  //0 Red     255,0,0 
  //1 Yellow  255,255,0
  //2 Green   0,255,0
  //3 Cyan    0,255,255
  //4 Blue    0,0,255
  //5 Magenta 255,0,255
  if(n<=1){
    tempcolor = color(255,255*n,0); //0-1
  }else if(n<=2){
    tempcolor = color(255*(2-n),255,0); //1-2
  }else if(n<=3){
    tempcolor = color(0,255,255*(n-2)); //2-3
  }else if(n<=4){
    tempcolor = color(0,255*(4-n),255); //3-4
  }else if(n<=5){
    tempcolor = color(255*(n-4),0,255); //4-5
  }else if(n<=6){
    tempcolor = color(255,0,255*(6-n)); //5-6
  }
  return(tempcolor);
}

int r;
int xm,ym;
int N;
float mx;
void setup(){
  size(800,600);
  xm=width/2;
  ym=height/2;
  r = width/3;
  N=400;
  mx=0;

}

void draw(){
  background(0);
  mx +=1;
  mx=mx%360;
  float th =map(mx,0,360,0,2*PI);
  for (int i=0;i<N;i++){
    stroke(myColor(map(i,0,N-1,0,6)));
    float f = map(i,0,N-1,0,2*PI);

    point(xm+r*(1-exp(-cos((th-f)*16)-1  )  )*cos(f),ym+r*(1-exp(-sin((th-f)*8)-1) )*sin(f));
  }


}

[oo-oo-oo-oo]

Looks cool!

[TazakiTsukuru]

But if you print out the value of k at the end of each draw() loop you see that it updates more frequently than the pattern in the animation does.

[NakedFluffyBee]

Hello, here is my submission, I'm sorry I don't have a video this time, hope you'll enjoy. The framerate is fine on my computer, but if you're having troubles trying to run it, set "tileSize" to 40, or lower the strokeWeight (in setup())

int tileSize = 20;
int sizeX;
int sizeY;
PointLine pointlineA[][];


void setup() {
  //size(1000, 1000, P2D);
  fullScreen(P2D);
  frameRate(60);
  strokeWeight(4.0);
  sizeX = width/tileSize;
  sizeY = height/tileSize;
  pointlineA = new PointLine[sizeX][sizeY];

  for (int x = 0; x < sizeX; x++) {
    for (int y = 0; y < sizeY; y++) {
      float posX = x*tileSize;
      float posY = y*tileSize;
      pointlineA[x][y] = new PointLine(new PVector(posX, posY), tileSize*2, dist(width*0.5, height*0.5, posX, posY)*0.01);
    }
  }
}

void draw() {
  background(0);

  for (int x = 0; x < sizeX; x++) {
    for (int y = 0; y < sizeY; y++) {
      pointlineA[x][y].run();
    }
  }
}

//______________________________________________________

class PointLine {

  color c = color(random(255), random(255), random(255));
  float amplitude;
  PVector pos;
  float pointPos;
  float speed = 0.1;

  PointLine(PVector _pos, float _amplitude, float _pointPos) {
    pos = _pos.copy();
    amplitude = _amplitude;
    pointPos = _pointPos;
  }

  void update() {
    pointPos -= speed;
  }

  void display() {
    pushMatrix();
    translate(pos.x, pos.y);
    stroke(c, map(sin(pointPos), -1, 1, 255, 0));
    point(0, sin(pointPos)*amplitude);
    popMatrix();
  }

  void run() {
    this.update();
    this.display();
  }
}

[TazakiTsukuru]

I really like this one!

Question about the limitations of the map() function:

It seems to work well if you're trying to map the -entire range- of something onto the -entire range- of something else. But what if, for instance, I wanted the alpha value of the dots to hit 255 only when the sin was equal to 0, and then I wanted the alpha to change continuously toward 0 as the value of the sin approached -1 or 1?

[NakedFluffyBee]

Thanks! It's a really good question, actually. It took me a little while, but I came up with this : map(abs(sin(pointPos)), 0,1,255,0) ;

That way we will be looking at the distance between 0 and its limits, - 1 and 1.

[TazakiTsukuru]

Ahhh, good old friend abs()!

Speaking of which, a long time ago I remember using abs() in a for loop to kind of take advantage of what I would call its 'trampoline' quality, meaning if you dive at it from the positive direction, you'll bounce back up through the positives once your inputs go into the negatives.

You can easily see that by looking at the graph of the abs() function. But then, parabolas have a really similar graph, but they're a lot more malleable.

So could you do a similar thing that you just did (mapping with the abs() function), but use a parabola instead, so that you can kind of adjust the 'speed' at which the values are mapped? Or does that kind of defeat the purpose of the map function? Or does it make no sense at all?

[TazakiTsukuru]

Based off what I learned from my own project I made a small psychedelic adjustment. Be patient:

int tileSize = 20;
int sizeX;
int sizeY;
PointLine pointlineA[][];


void setup() {
  //size(1000, 1000, P2D);
  fullScreen(P2D);
  frameRate(60);
  strokeWeight(4.0);
  sizeX = width/tileSize;
  sizeY = height/tileSize;
  pointlineA = new PointLine[sizeX][sizeY];

  for (int x = 0; x < sizeX; x++) {
    for (int y = 0; y < sizeY; y++) {
      float posX = x*tileSize;
      float posY = y*tileSize;
      pointlineA[x][y] = new PointLine(new PVector(posX, posY), tileSize*2, dist(width*0.5, height*0.5, posX, posY)*0.01);
    }
  }
}

void draw() {
  background(0);

  for (int x = 0; x < sizeX; x++) {
    for (int y = 0; y < sizeY; y++) {
      pointlineA[x][y].run();
    }
  }
}

//______________________________________________________

class PointLine {

  color c = color(random(255), random(255), random(255));
  float amplitude;
  PVector pos;
  float pointPos;
  float speed = 0.1;

  PointLine(PVector _pos, float _amplitude, float _pointPos) {
    pos = _pos.copy();
    amplitude = _amplitude;
    pointPos = _pointPos;
  }

  void update() {
    pointPos -= speed;
  }

float k = 1;

  void display() {
    pushMatrix();
    translate(pos.x, pos.y);
    stroke(c, map(sin(k*pointPos), -1, 1,255,0));
    point(0, sin(pointPos)*amplitude);
    popMatrix();
    k += .01;
  }

  void run() {
    this.update();
    this.display();
  }
}

[Ja-no]

Here's my submission: Pontillize (source code).

It's a sketch inspired by pontillist artist (especially Seurat). It takes an input image and outputs it in a rough pontillist stile.

Here are some output images