Can anyone write a processing program for me?

Crane

I am currently a student and have been experimenting with a design in Illustrator, which I would like to develop further using processing. The program basically would divide a vector image into equal quarters along the x and y axis. It would then proceed to rotate the image to create patterns. Can anyone help? Further details and an image example can be provided. Thank you.

Chrisir

what kind of vector image? What extension does it have? dxf / svg ?

or do you mean just a image like jpg?

Crane

I have designed the image in Illustrator but I would save it as a jpg in Photoshop.

Chrisir

what do you study?

do you offer money - then place it in section jobs...

or show your code - then we can help

Crane

I am studying Graphic Design course and I would like to do have a program that would randomly produce patterns to set instructions. I am not sure how I would go about coding this.

Chrisir

Further details and an image example can be provided.

please do

(I don't have time but it's interesting)

Crane

Please see attached experiment with info. Hope you can see the text. Thanks

Chrisir

It's easy

Use loadImage to load the image

Look at reference for loadImage

Once you have that say image (img, 0,0);

Now use

PImage subImg1 = img.get(0,0,img.width/2,img.height/2);

To get a section

Say

image(subImage1, 200,200);

Etc. .....

koogs

image is 256x256 (change SIZE to change this)

draws each of the quarters with a random rotation (or not at all)

mouse click for next combination

// (c) acd 2014
private final static String FILENAME = "image.png"; 
private final static int SIZE = 256;

PImage img;

void setup() {
  size(SIZE, SIZE, P2D);
  img = loadImage(FILENAME);
  textureMode(IMAGE);
}

void draw() {
  background(255);
  noStroke();
  //println("Draw");
  // top left
  quarter(0, 0);
  // top right
  quarter(SIZE / 2, 0);
  // bottom left
  quarter(0, SIZE / 2);
  // bottom right
  quarter(SIZE / 2, SIZE / 2);
  noLoop();
}

void quarter(int x, int y) {
  // x, y is top corner of square AND texture
  // bottom corner is SIZE / 2 more
  // but texture may be rotated

  if (random(4) < 1) {
    // draw nothing
    return;
  }

  // put texture coords in a list
  List<Integer> tcoords = new ArrayList<Integer>(8);
  tcoords.add(x);
  tcoords.add(y);
  tcoords.add(x);
  tcoords.add(y + SIZE / 2);
  tcoords.add(x + SIZE / 2);
  tcoords.add(y + SIZE / 2);
  tcoords.add(x + SIZE / 2);
  tcoords.add(y);
  // rotate them (there's probably a better way of doing this)
  Integer tmp;
  for (int i = 0 ; i < (int)random(4) ; i++) {
    // move a pair of coords from head to tail
    tmp = tcoords.remove(0);
    tcoords.add(tmp);
    tmp = tcoords.remove(0);
    tcoords.add(tmp);
  }

  beginShape(QUADS);
  texture(img);
  vertex(x, y, tcoords.get(0), tcoords.get(1));
  vertex(x, y + SIZE / 2, tcoords.get(2), tcoords.get(3));
  vertex(x + SIZE / 2, y + SIZE / 2, tcoords.get(4), tcoords.get(5));
  vertex(x + SIZE / 2, y, tcoords.get(6), tcoords.get(7));
  endShape();
  //println("");
}

void mouseReleased() {
  redraw();
}

Crane

Thanks guys! I will give it a go and let you know how it works.

koogs

(chrisir, this was actually quite complicated and it took me a while to figure out how to do it. cutting the thing into 4 bits and then rotating the bits in place was kinda tricky - you'd have to rotate around their centres, something i didn't think you could do using pimages and rotate without copying the 4 quarters to separate images)

reading the text on the image, i think you may've wanted the combinations of things more constrained than i made them - would need more logic. conversely, i think it could probably be simpler if you're only going to use images that are rotationally symmetrical like the one in the example - basically you'd just supply one quarter of it and wouldn't need to split it up any further.

Chrisir

@koogs, I am sorry that my assessment was wrong (not easy...)

koogs

don't worry, it was fun 8) and i'm quite pleased with my shifting-texcoords-to-rotate solution, even if it is a bit clunky.

Chrisir

I am on a journey, so I couldn't do it...

So thank you.....

;-)

Crane

koogs, I have just got back and trying out your code. On line 2 I have input "symbol_01.jpg"; and have ensured that the file is located in the data folder. When I run the code an error message occurs with line 39 highlighted stating 'cannot find a class or type named "List". Not sure what I need to do.

koogs

at top of file add import java.util.List;

i think this (the default imports) may've changed between processing versions

koogs

works fine in 1.5.1

in 2.0.a5 i had to change renderer to P3D

no missing List in either.

GoToLoop

Processing 2.x.x should import both List & Map again, since they don't interfere w/ JS Mode! [-(

Crane

Hi Folks, Did as you said but I got a black screen. When I click the mouse white squares appear with no image. So I tested it with a photo image png and it cuts and rotates the image but the cut images are distorted and they are not appearing in combinations of diagonal pairs only. It seems that the screen size affects what is seen in the cut image. Also it doesn't give a combination of patterns at the end. My apologies I should have explained it a bit better initially. Here it is again below. Thanks very much!

koogs

yeah, the 'diagonal's only' requirement was only added when you posted the picture and i didn't see it until later (text was too small!)

image needs to be 256x256 pixels. or you can change the 256 in the code to match the image dimensions (keep it square)

what i'm doing is taking the original

A B
C D

and rotating A randomly in place, B randomly in place, C randomly in place and D randomly in place. that's all. anything else would be more than 70 lines 8)

Crane

Thanks for the response but I would I get someone who will be able to do the project and make it work the way I would like it? Thanks again.

Chrisir

Listen, Crane, is this homework?

When you are too lazy to do it, at least type down what is written because the text in the image you posted can't be read here

Also, koogs did excellent work here. Why not be a man and work with what he did for you yourself?

then come back with substantial questions on the code of yours.

Chrisir

koogs

it's readable (just) but it's the kind of thing that's easy to write, less easy to code. how can i tell, for instance, if it's a two-pair or a four-pair?

code needs a refactor to handle the tiling too. (write to pgraphic, tile that)

also, it's the world cup.

Crane

Thank you for your response. Koogs work is great! It is not that I am lazy this is a small part of a larger project. The design is my own and I wanted an efficient way of working with this project. I have done over 150 different designs that would have to go through the same rules which I did start by hand but realised that it would be unrealistic for me to do considering the amount and time constraints in addition to the other parts of the project that this feeds in to. I am not a programer and I came to the knowledge of processing recently. I am not good in this area, I would love to be but the time does not permit and the question was could someone do it for me. Later this evening I will send the text again. Apologies. Enjoy the World Cup.

Crane

koogs

// acd 2014
// forum.processing.org/two/discussion/5458/can-anyone-write-a-processing-program-for-me
private final static String FILENAME = "image.png"; 
private final static int SIZE = 128;

PImage img;
PImage twoTile;
PImage fourTile;

void setup() {
  size(1000, 700, P3D);
  img = loadImage(FILENAME);
  textureMode(IMAGE);
  twoTile = createImage(SIZE * 2, SIZE * 2, RGB);  // 2 x 2 tile, diagonal pair
  fourTile = createImage(SIZE * 4, SIZE * 4, RGB); // 4 x 4 tile, 4 sets of diagonal pair
}

void draw() {
  background(128);
  noStroke();
  // clear background where image will go
  // (assumes image background is white)
  fill(255);
  rect(0, 0, SIZE * 2, SIZE * 2);
  int r1 = (int)random(4);
  int r2 = (int)random(4);
  println(r1 + ":" + r2);
  int size1 = img.width;
  if (random(10) < 5) {
    quarter(img, 0, 0, r1);  // top left
    quarter(img, size1, size1, (r2 + 2) % 4);  // bottom right
  } else {
    quarter(img, size1, 0, (r1 + 1) % 4);  // top right
    quarter(img, 0, size1, (r2 + 3) % 4);  // bottom left
  }
  // copy result into twoTile
  twoTile = get(0, 0, SIZE * 2, SIZE * 2);

  // create the four tile set, 4 copies of two tile
  int size2 = twoTile.width;
  if (r1 == r2) {
    // this is a "two pair set"
    // A B - B = A + 90'
    // B A
    quarter(twoTile, 0, 0, 0);          // top left
    quarter(twoTile, size2, 0, 1);      // top right
    quarter(twoTile, 0, size2, 1);      // bottom left
    quarter(twoTile, size2, size2, 0);  // bottom right
  } else {
    // this is a "four pair set"
    // A B - B = A + 90'
    // C D - C = B + 90', D = C + 90'
    quarter(twoTile, 0, 0, 0);          // top left, no rotation
    quarter(twoTile, size2, 0, 1);      // top right, 90'
    quarter(twoTile, 0, size2, 2);      // bottom left, 180'
    quarter(twoTile, size2, size2, 3);  // bottom right, 270'
  }
  // copy result into fourTile
  fourTile = get(0, 0, SIZE * 4, SIZE * 4);

  // print tiles (resized)
  background(128);
  image(twoTile, 0, 0, SIZE, SIZE);
  image(fourTile, SIZE * 2, 0, SIZE * 2, SIZE * 2);

  // tiling (resized)
  int TILESIZE = 100;
  for(int x = 0 ; x < width ; x += TILESIZE) {
    for (int y = 0 ; y < height ; y+= TILESIZE) {
      // 2.5 so it clears the tile above
      image(fourTile, x, SIZE * 2.5 + y, TILESIZE, TILESIZE);
    }
  }

  noLoop();
}

void quarter(PImage p, int x, int y, int rotation) {
  // x, y is top corner of twoTile square
  // bottom corner is sz more
  // texture is 0 to SIZE
  // texture may be rotated

  // put texture coords in a list
  int sz = p.width;
  List<Integer> tcoords = new ArrayList<Integer>();
  tcoords.add(0);
  tcoords.add(0);
  tcoords.add(0);
  tcoords.add(sz);
  tcoords.add(sz);
  tcoords.add(sz);
  tcoords.add(sz);
  tcoords.add(0);
  // rotate them (there's probably an easier way of doing this)
  Integer tmp;
  for (int i = 0 ; i < rotation ; i++) {
    // move a pair of coords from head to tail
    tmp = tcoords.remove(0);
    tcoords.add(tmp);
    tmp = tcoords.remove(0);
    tcoords.add(tmp);
  }

  beginShape(QUADS);
  texture(p);
  vertex2(x, y, tcoords.get(0), tcoords.get(1));
  vertex2(x, y + sz, tcoords.get(2), tcoords.get(3));
  vertex2(x + sz, y + sz, tcoords.get(4), tcoords.get(5));
  vertex2(x + sz, y, tcoords.get(6), tcoords.get(7));
  endShape();
  //println("");
}

// was used for debug, now doesn't add much
void vertex2(int x, int y, int u, int v) {
  // println("" + x + ", " + y + " (" + u + ", " + v + ")");
  vertex(x, y, u, v);
}

void mouseReleased() {
  redraw();
}

koogs

a lot of the problems fell away when i came to do it. and i could reuse the code for generating the 2x2 tile to generate the 4x4 tile using the new 2x2 tile as input...

oh, now takes one image, a quarter of the original, 128x128 here, and rotates that as necessary. this is as per step 2 of june 16 post.

Crane

Thank you for this. Sorry for not replying sooner I have been working on other areas of my design work. I will run through the code and let you know how it works. Thank you again for working on this and your time spent on it.

Crane

Hi Koogs, I have been looking at the code you have written and I am not sure how the code is calculating the image. Does the image need to be a specific size for it to work? I have input the above image ( the circle) and the following is displayed.

I couldn't see what was going on so I tried a test image (bird) and the following came up.

In some parts the full image is seen in others it cuts the image but not into equal 1/4s. Not sure what can be done. Thank you for the time you have spent working on this so far.

koogs

oh, now takes one image, a quarter of the original, 128x128

and it's there on line 4 of the code:

private final static int SIZE = 128;

should work if you change it. and there doesn't look to be a reason why it can't work out the size from the image anymore. only size() is hardcoded.

koogs

change line 4 to

private int SIZE = 128;

and add after line 12

SIZE = img.width;

and then it'll work with any square image.

(actually, it won't, there's a problem somewhere, first square is ok, second square is distorted. will fix it.)

koogs

ok, there's a further limitation, one i can't currently think of a way of fixing but there is a workaround:

the size of the screen in line 11 has to be at least 4x the size of the image in each dimension. if image is 250x250 then the size has to be 1000x1000.

(i use the screen whilst composing the tiles but if the screen is too small then it'll clip them, make them rectangular.)

Crane

Oh, thanks Koogs, I will do as you instructed and work on it later tonight. Thanks again.

koogs

if you add, after line 59

fourTile.save("tile4.png");

and after line 37

twoTile.save("tile2.png");

then it'll save out the tiles so you can play with them yourself

Crane

Hi Koogs thank you so much for your help with the coding, unfortunately the output does not appear to be working. It comes with an error message 'cannot find anything named "size" ' for SIZE = img.width; Thanks again for the work and time you have taken in this project.

koogs

what i hate about this thread is the 2 week delays between bug reports 8)

that runs fine for me, i can only suggest there's a problem with your edits. but i'll post the whole thing again shortly so you can just copy it verbatim. but first i'll try and get rid of the size limitations mentioned above.