Making a "Generator of Art" initial problems

tsunii

I'm trying to make a program that create art like this one

Just started it, and i'm already with some basic problems. My first thought, trying to divide and conquest was to create the lines first.

Centro c = new Centro();

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

void draw(){
  //Linhas();
  c.desenhaCentro();
}


void Linhas(){
  color(0,0,0);
  fill(0);
  /*
  line(0,0, width, height);
  line(0,height, width, 0);
  */
}


class Centro{
  int Cx = int(random(100,300));
  int Cy = int(random(100,300));

  void desenhaCentro(){
    line(0, 0, Cx, Cy);
    line(400,0, Cx, Cy);
    line(0, 400, Cx, Cy);
    line(400, 400, Cx, Cy);

  }
}

I tried to make a function to create the lines using the "Centro" x,y, and limited the random to 100 and 300 so it don't get much narrowed at borders. But, seeing it work, it's weird...

I wanted to use random because it would create some different art when the code is executed. My question is, there's no way to make random work and make it maintaining some king of proportion? I think that the problem is propotion. Opinions?

tsunii

Centro c = new Centro();
Quadrado q = new Quadrado();

void setup() {
  size(400, 400);
  smooth();
}

void draw() {
  //Linhas();
  q.desenhaQuadrado();
  c.desenhaCentro();
}


void Linhas() {
  color(0, 0, 0);
  fill(0);
  /*
  line(0,0, width, height);
   line(0,height, width, 0);
   */
}


class Centro {
  int Cx = int(random(100, 300));
  int Cy = int(random(100, 300));

  void desenhaCentro() {
    stroke(255);
    strokeWeight(2);
    line(0, 0, Cx, Cy);
    line(width, 0, Cx, Cy);
    line(0, height, Cx, Cy);
    line(width, height, Cx, Cy);
  }
}

class Quadrado {
  void desenhaQuadrado() {
    noFill();
    rectMode(CENTER);
    stroke(0);
    strokeWeight(5);
    rect(c.Cx, c.Cy, 30, 30);
  }
}

Making some chances, doing some math, the angle between the lines in the center should be 90º, but still trying to figure how to do it

tsunii

Still trying to find a way to make the lines have a angle of 90º, any help?

tsunii

I belive that i've made a better way to generate the lines.

void setup() {
  size(300, 300);
  PVector v1 = new PVector(1, 1);
  PVector v2 = new PVector(width - 1, 1); 
  PVector v3 = new PVector(1, height - 1);
  PVector v4 = new PVector(width - 1, height - 1);
  PVector v5 = new PVector(random(width*0.5), random(width*0.5));

  float a = PVector.angleBetween(v1, v2);
  float b = PVector.angleBetween(v1, v3);
  float c = PVector.angleBetween(v1, v4);
  float d = PVector.angleBetween(v1, v5);
  float e = PVector.angleBetween(v2, v5);

  line(v1.x, v1.y, v5.x, v5.y);
  line(v2.x, v2.y, v5.x, v5.y);
  line(v3.x, v3.y, v5.x, v5.y);
  line(v4.x, v4.y, v5.x, v5.y);
  println(degrees(a));
  println(degrees(b));
  println(degrees(c));
  println(degrees(d));
  println(degrees(e));
}

But still dont know how to make proportional

kfrajer

Have you considered using a 3D renderer instead of 2D? Then you lay out your lines and squares in 3D space. For squares, you will need the vertex() function. I think this could work... and it could give you the effect that you want using a "natural" way instead of doing math projection calculations. I will allow other forum goers comment on this idea as I haven't done it myself before. By the way, the math projection calculations are not difficult. I am concerned about the width of the lines that seem to change with different perspectives.

Kf

tsunii

I don't even know how to use 3D on Processing... Gonna take a look, if you have any idea, would love some help to start.

Chrisir

void setup() {

  // setup() runs only once 

  size(940, 680);
}

void draw() {

  rectMode(CENTER); 
  for (int i = 12; i >= 0; i--) {
    if (i%2 == 0) 
      fill(0); 
    else fill(255);

    rect(width/2, height/2, i*22, i*22);
  }
}

Chrisir

void setup() {

  // setup() runs only once 

  size(940, 680);
}

void draw() {

  rectMode(CENTER); 
  for (int i = 12; i >= 0; i--) {

    if (i%2 == 0) 
      fill(0); 
    else fill(255);

    rect(width/2+i*12, height/2, i*22+12*i, i*22);
  }
}

tsunii

Ty Chrisir, trying to implement that code with the one i'm doing, also trying to see if i can get some random colors showing up

kfrajer

This is my suggestion @tsunii and you should check the reference for the next keywords:

https://processing.org/reference

• size
• vertex
• camera
• translate

Kf

//===========================================================================
// FINAL FIELDS:
final float alen=100;

//===========================================================================
// GLOBAL VARIABLES:



//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(600, 400, P3D);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  noFill();
}

void draw() {
  background(0);
  lights();
  translate(width/2, height/2, -200);

  //Draw a bunch of squares
  for (float zz=-300; zz<600; zz+=50) {
    stroke(255);
    strokeWeight(2);
    createSquare(alen, zz);
  }

  camera(mouseX,mouseY, 400.0,   //Eye
    width/2, height/2, -200,     //Scene's center
    0.0, 1.0, 0.0);              //Up vector
}

void keyReleased() {
}

void mouseReleased() {
}



//===========================================================================
// OTHER FUNCTIONS:

void createSquare(float len, float depth) {
  float hlen=len/2.0;
  beginShape();
  vertex(-hlen, -hlen, depth);
  vertex(+hlen, -hlen, depth);
  vertex(+hlen, +hlen, depth);
  vertex(-hlen, +hlen, depth);
  endShape(CLOSE);
}

tsunii

void setup() {
  size(500, 500);
  PVector v1 = new PVector(1, 1);
  PVector v2 = new PVector(width - 1, 1); 
  PVector v3 = new PVector(1, height - 1);
  PVector v4 = new PVector(width - 1, height - 1);
  PVector v5 = new PVector(random(width*0.5), random(width*0.5));

  float a = PVector.angleBetween(v1, v5);
  float b = PVector.angleBetween(v2, v5);
  float c = PVector.angleBetween(v3, v5);
  float d = PVector.angleBetween(v4, v5);

  line(v1.x, v1.y, v5.x, v5.y);
  line(v2.x, v2.y, v5.x, v5.y);
  line(v3.x, v3.y, v5.x, v5.y);
  line(v4.x, v4.y, v5.x, v5.y);
  println(degrees(a));
  println(degrees(b));
  println(degrees(c));
  println(degrees(d));
  println(v5.x);


  rectMode(CENTER);

  for (int i = 10; i >= 0; i--) {
    if (i%2 == 0 )
      fill(0);
    else fill(255);

    if (v5.x <= 250 && v5.y <=250)
      rect(v5.x+10*i, v5.y+10*i, i*50, i*50);
    if (v5.x >= 500 && v5.y >= 500)
      rect(v5.x-10*i, v5.y-10*i, i*50, i*50);
  }
}

Making some new changes, got something like this, still far away from perfect, i belive that i need to create some Quadrants, like 8, and make changes from there, and also i trying to put everything inside the screen, till now sometimes the drawing get out.

tsunii

Still didnt figure it out how do make the rect don't leave the screen

tsunii

Was thinking about that. To create one black rect occupying the screen, and use the function for that Chrisir did, instead to create they from the center, create they from 0,0 and decrease till the center or some random point

kfrajer

This is not the solution, but it shows a dynamic sketch: Mouse the mouse and click to set v5. Can you explain what do you want the lines to do? To originated at the center of the screen and extend to the corner of your sketch?

Kf

import processing.awt.PSurfaceAWT.SmoothCanvas;
import com.sun.awt.AWTUtilities;

import javax.swing.JFrame;
import javax.swing.JRootPane;


JFrame jframe;


PVector v1;
PVector v2;
PVector v3;
PVector v4;
PVector v5;

float a;
float b;
float c;
float d;

PVector m;



void setup() {
  size(500, 500);
  jframe = getJFrame(getSurface());

  jframe.removeNotify();
  jframe.setUndecorated(true);
  jframe.addNotify();

  rectMode(CENTER);

  m=new PVector();
  v1 = new PVector(m.x, m.y);
  v2 = new PVector(width - m.x, m.y); 
  v3 = new PVector(1, height - 1);
  v4 = new PVector(width - m.x, height - m.y);
  v5 = new PVector(random(width*0.5), random(width*0.5));

  a = PVector.angleBetween(v1, v5);
  b = PVector.angleBetween(v2, v5);
  c = PVector.angleBetween(v3, v5);
  d = PVector.angleBetween(v4, v5);
}
void draw() {
  background(150);


  for (int i = 10; i >= 0; i--) {
    if (i%2 == 0 )
      fill(0);
    else fill(255);

    if (v5.x <= 250 && v5.y <=250)
      rect(v5.x+10*i, v5.y+10*i, i*50, i*50);
    if (v5.x >= 500 && v5.y >= 500)
      rect(v5.x-10*i, v5.y-10*i, i*50, i*50);
  }


  m.set(mouseX, mouseY);
  v1.set(m.x, m.y);
  v2.set(width - m.x, m.y); 
  v3.set(m.x, height - m.y);
  v4.set(width - m.x, height - m.y);
  //v5.set((width*0.5), (width*0.5));

  a = PVector.angleBetween(v1, v5);
  b = PVector.angleBetween(v2, v5);
  c = PVector.angleBetween(v3, v5);
  d = PVector.angleBetween(v4, v5);



  line(v1.x, v1.y, v5.x, v5.y);
  line(v2.x, v2.y, v5.x, v5.y);
  line(v3.x, v3.y, v5.x, v5.y);
  line(v4.x, v4.y, v5.x, v5.y);
  println(degrees(a));
  println(degrees(b));
  println(degrees(c));
  println(degrees(d));
  println(v5.x);
}

void mouseReleased() {

  v5.set(random(width*0.5), random(width*0.5));
}


static final JFrame getJFrame(final PSurface surf) {
  return (JFrame) ((SmoothCanvas) surf.getNative()).getFrame();
}

tsunii

No library found for processing.awt.PSurfaceAWT No library found for com.sun.awt

Where i can find those library? And yes, i wanted the lines to generate at the center of the drawing, just like the art, and extent to the corne

kfrajer

Ok, you can remove those lines... I just wanted to remove the top bar of the sketch but you don't need to do that. I can get back to you about those libraries later and you can make another post asking about this.

So remove all lines related to AWT and run the sketch.

Kf

tsunii

Ok, new update, got this.

int xGeral;
int yGeral;
int count = 0;
int range =0;
float lRect;

color cor[] = { color(0),color(238,17,17),color(119,0,204),color(17,17,238),color(17,17,51)};
int c=1;

void setup(){
size(600,600);
lRect=40;
rectMode(CENTER);


}

void draw(){
xGeral = mouseX;
yGeral = mouseY;
background(207);
noStroke();
fill(cor[c]);
triangle(0, 0, 0, height, xGeral, yGeral);
fill(cor[c*2]);
triangle(0, 0, width, 0, xGeral, yGeral);
fill(cor[c*3]);
triangle(width, 0, width, height, xGeral, yGeral);
fill(cor[c*4]);
triangle(0, height, width, height, xGeral, yGeral);

stroke(255);
strokeWeight(2);
line(0,0,xGeral,yGeral);
strokeWeight(4);
line(0,yGeral,xGeral,yGeral);
strokeWeight(2);
line(width,0,xGeral,yGeral);
strokeWeight(3);
line(width,height,xGeral,yGeral);
strokeWeight(2);
line(0,height,xGeral,yGeral);


noFill();
//Razões 2 em 2 = Stroke;  -2 em -2 x e y; l= 74 em 74
strokeWeight(4);
quad((15*xGeral/16), (15*yGeral/16), (15*xGeral/16)+lRect, (15*yGeral/16), (15*xGeral/16)+lRect, (15*yGeral/16)+lRect, (15*xGeral/16), (15*yGeral/16)+lRect);
strokeWeight(6);
quad((13*xGeral/16), (13*yGeral/16), (13*xGeral/16)+100, (13*yGeral/16), (13*xGeral/16)+112, (13*yGeral/16)+112, (13*xGeral/16), (13*yGeral/16)+112);
strokeWeight(8);
quad((11*xGeral/16), (11*yGeral/16), (11*xGeral/16)+190, (11*yGeral/16), (11*xGeral/16)+190, (11*yGeral/16)+190, (11*xGeral/16), (11*yGeral/16)+190);
strokeWeight(10);
quad((9*xGeral/16), (9*yGeral/16), (9*xGeral/16)+262, (9*yGeral/16), (9*xGeral/16)+262, (9*yGeral/16)+262, (9*xGeral/16), (9*yGeral/16)+262);
strokeWeight(12);
quad((7*xGeral/16), (7*yGeral/16), (7*xGeral/16)+336, (7*yGeral/16), (7*xGeral/16)+336, (7*yGeral/16)+336, (7*xGeral/16), (7*yGeral/16)+336);
strokeWeight(16);
quad((5*xGeral/16), (5*yGeral/16), (5*xGeral/16)+410, (5*yGeral/16), (5*xGeral/16)+410, (5*yGeral/16)+410, (5*xGeral/16), (5*yGeral/16)+410);
strokeWeight(20);
quad((3*xGeral/16), (3*yGeral/16), (3*xGeral/16)+484, (3*yGeral/16), (3*xGeral/16)+484, (3*yGeral/16)+484, (3*xGeral/16), (3*yGeral/16)+484);
strokeWeight(24);
quad((1*xGeral/16), (1*yGeral/16), (1*xGeral/16)+558, (1*yGeral/16), (1*xGeral/16)+558, (1*yGeral/16)+558, (1*xGeral/16), (1*yGeral/16)+558);

}

void mouseReleased(){
  if(c==1){
    c=0;
  }else{
    c=1;
  }

}

Code it's a little messy, but i was just trying to get the logic right, now i only need to find a way to make the code run even if i increase the size, and after that, just need to make the code more beatiful.

kfrajer

You have a typo in line 50. Instead of 100, it should be 112. Anyways, I modified your code from line 45 to 64 like this below.

Kf

  float[] stkW ={24, 20, 16, 12, 10, 8, 6, 4};  //Move to global scope
  noFill();
  for (int i=0; i<stkW.length; i++) {
    strokeWeight(stkW[i]);
    int k=i*2+1;
    float j=constrain(558-i*74, 0, 558);

    quad((k*xGeral/16), (k*yGeral/16), (k*xGeral/16)+j, (k*yGeral/16), (k*xGeral/16)+j, (k*yGeral/16)+j, (k*xGeral/16), (k*yGeral/16)+j);
  }

tsunii

Yeah, i was making just testing with the numbers and i forgot to Ctrl+z it. Ty, i'll make the chance and when i have the oportuniy, i'll try to make more chances