Generative Patterns Processing Poster

[angela1811]

Hello everyone,

I am a newbie in Processing! I have to submit a project very soon for the final exam at university T^T
But it’s so sad I’m stuck with my project. I have to create a programming poster but I’m don’t have a good skill in Processing.

Could someone help me?

I want to create a kind of programming poster with the traditional pattern, I had the pattern drawing by Adobe Illustrator program.

https://drive.google.com/drive/folders/1XucDvK01G0xHk9zPjpL4frdf3VcMVUxO?usp=sharing

I want to make the motion poster like reference:

KHI HOẠ TIẾT GẠCH BÔNG VIỆT MỘT THỜI "BIẾT" CHUYỂN ĐỘNG - 419

And I have the code below but I don’t know how to change or apply my pattern to this code

ArrayList<RotatingRect> rr = new ArrayList<RotatingRect>();
void setup() {
  size(800, 800);
  rectMode(CENTER);
  for (int x=0; x<900; x+=100) {
    for (int y=0; y<900; y+=100) {
      RotatingRect r = new RotatingRect(x, y, 80, 0);
      rr.add(r);
    }
  }
}
void draw() {
  background(255);
  noStroke();
  for (int i = 0; i< rr.size(); i++) {
    RotatingRect r = rr.get(i);
    r.display();
  }
}
class RotatingRect {
  float x, y;
  float s;
  float a=0;
  RotatingRect(float _x, float _y, float _s, float _a) {
    x= _x;
    y= _y;
    s= _s;
    a= _a;
  }
  void display() {
    pushMatrix();
    fill(255, 116, 116);
    translate(x, y);
    a++;
    rotate(a/20);
    rect(0, 0, s*cos(radians(a)), s*cos(radians(a)), 20*cos(radians(a/10)));
    popMatrix();
  }
}

Thanks in advance for your help.

Please help me, I’m really thankful to everybody.

[noel]

Hi @angela1811
Can you edit your post above copying the whole code and use the </> button in the edit box?
Anyway, I don’t see how this code can draw something similar to the image pattern you posted. (which I find really nice.)

[Chrisir]

this is working and does some crazy stuff after a few seconds because of the 5h rect parameter. See below.

Chrisir

ArrayList<RotatingRect> rr = new ArrayList();

void setup() {
  size(800, 800);
  rectMode(CENTER);
  for (int x=0; x<900; x+=100) {
    for (int y=0; y<900; y+=100) {
      RotatingRect r = new RotatingRect(x, y, 80, 0);
      rr.add(r);
    }
  }
}
void draw() {
  background(255);
  noStroke();
  for (int i = 0; i< rr.size(); i++) {
    RotatingRect r = rr.get(i);
    r.display();
  }
}

// ============================================================

class RotatingRect {
  float x, y;
  float s;
  float a=0;
  RotatingRect(float _x, float _y, float _s, float _a) {
    x= _x;
    y= _y;
    s= _s;
    a= _a;
  }
  void display() {
    pushMatrix();
    fill(255, 116, 116);
    translate(x, y);
    a++;
    rotate(a/20);
    rect(0, 0, s*cos(radians(a)), s*cos(radians(a)), 
      200*cos(radians(a/7.3)));  // the 5th parameter: corner
    popMatrix();
  }
}

[Chrisir]

Explanation

the 5th parameter makes the corners of the rect round; it looks funny, when the values get negative. Try -6 without cos(), just -6 as the 5th parameter for rect(). Nice.
With cos() the roundness changes between pos and neg values I think.

(you can also address the roundness of each 4 corners separately, see reference rect)

[noel]

@angela1811

I want to make the poster like this code below but change the shape by my traditional pattern.

Actually, I’m a bit confused, because you posted a nice animated code, but it has little to do with the pattern poster image. I tried to write a code using parametric functions to draw the pattern but did not succeed. So what I did was using my shape bezier editor code, which imports a b&w image shape and converts and prints it to a bezierVertex shape. The result is the shape below. I added some lines placing the shapes. Placing shapes is really basic, so I hope no-one is going to eat my liver because I posted a code on a homework-tagged topic.

PShape shp1, shp2;

void setup() {
  size(730, 710);
  background(255);
  smooth(4);
  shp1 = createShape(PShape.PATH);
  shp1.beginShape();
  shp1.vertex(406, 23);
  shp1.bezierVertex(522, 35, 592, 67, 752, 48);
  shp1.bezierVertex(735, 98, 736, 123, 740, 175);
  shp1.bezierVertex(743, 226, 769, 277, 780, 342);
  shp1.bezierVertex(771, 371, 748, 378, 710, 377);
  shp1.bezierVertex(671, 375, 593, 343, 539, 347);
  shp1.bezierVertex(518, 354, 499, 362, 506, 373);
  shp1.bezierVertex(512, 383, 534, 413, 576, 412);
  shp1.bezierVertex(650, 427, 716, 384, 757, 420);
  shp1.bezierVertex(777, 509, 759, 597, 771, 643);
  shp1.bezierVertex(669, 629, 601, 657, 543, 654);
  shp1.bezierVertex(497, 651, 508, 643, 496, 631);
  shp1.bezierVertex(489, 609, 510, 569, 505, 522);
  shp1.bezierVertex(500, 497, 496, 494, 470, 484);
  shp1.bezierVertex(430, 466, 363, 472, 322, 481);
  shp1.bezierVertex(280, 489, 251, 509, 222, 534);
  shp1.bezierVertex(209, 534, 206, 520, 201, 512);
  shp1.bezierVertex(218, 497, 287, 459, 328, 447);
  shp1.bezierVertex(368, 434, 400, 430, 443, 438);
  shp1.bezierVertex(485, 445, 554, 468, 582, 494);
  shp1.bezierVertex(610, 519, 616, 557, 611, 592);
  shp1.bezierVertex(637, 569, 627, 549, 634, 531);
  shp1.bezierVertex(650, 528, 703, 577, 707, 575);
  shp1.bezierVertex(711, 572, 671, 533, 658, 517);
  shp1.bezierVertex(697, 515, 710, 473, 707, 470);
  shp1.bezierVertex(704, 466, 683, 503, 640, 495);
  shp1.bezierVertex(596, 486, 526, 435, 445, 417);
  shp1.bezierVertex(390, 407, 335, 430, 312, 435);
  shp1.bezierVertex(372, 376, 428, 354, 492, 334);
  shp1.bezierVertex(555, 313, 640, 309, 692, 310);
  shp1.bezierVertex(677, 289, 667, 286, 638, 279);
  shp1.bezierVertex(608, 271, 540, 268, 517, 267);
  shp1.bezierVertex(540, 236, 636, 151, 631, 147);
  shp1.bezierVertex(625, 142, 527, 210, 482, 240);
  shp1.bezierVertex(484, 221, 491, 198, 483, 176);
  shp1.bezierVertex(475, 153, 456, 121, 434, 107);
  shp1.bezierVertex(446, 186, 426, 244, 401, 295);
  shp1.bezierVertex(375, 345, 296, 413, 279, 412);
  shp1.bezierVertex(292, 386, 310, 330, 298, 286);
  shp1.bezierVertex(275, 202, 216, 177, 206, 143);
  shp1.bezierVertex(209, 105, 239, 81, 235, 78);
  shp1.bezierVertex(230, 74, 192, 77, 179, 123);
  shp1.bezierVertex(158, 123, 113, 77, 110, 81);
  shp1.bezierVertex(112, 95, 165, 129, 161, 143);
  shp1.bezierVertex(140, 137, 77, 154, 85, 161);
  shp1.bezierVertex(130, 161, 172, 161, 204, 183);
  shp1.bezierVertex(235, 204, 265, 252, 274, 291);
  shp1.bezierVertex(282, 329, 270, 379, 255, 414);
  shp1.bezierVertex(240, 470, 197, 486, 182, 498);
  shp1.bezierVertex(165, 490, 169, 490, 160, 482);
  shp1.bezierVertex(208, 439, 219, 394, 229, 359);
  shp1.bezierVertex(238, 323, 225, 290, 216, 271);
  shp1.bezierVertex(206, 252, 200, 248, 174, 245);
  shp1.bezierVertex(134, 243, 106, 264, 52, 250);
  shp1.bezierVertex(34, 237, 18, 237, 14, 214);
  shp1.bezierVertex(15, 169, 39, 129, 20, 32);
  shp1.bezierVertex(107, 39, 177, 20, 225, 24);
  shp1.bezierVertex(273, 27, 290, 36, 308, 51);
  shp1.bezierVertex(334, 91, 282, 170, 301, 213);
  shp1.bezierVertex(311, 243, 354, 239, 370, 235);
  shp1.bezierVertex(385, 230, 393, 216, 392, 186);
  shp1.bezierVertex(390, 155, 357, 80, 360, 53);
  shp1.bezierVertex(362, 25, 389, 27, 405, 23);
  shp1.endShape();
  shp2 = createShape(PShape.PATH);
  shp2.beginShape();
  shp2.vertex(170, 10);
  shp2.bezierVertex(247, 12, 284, 122, 287, 155);
  shp2.bezierVertex(297, 155, 332, 140, 341, 148);
  shp2.bezierVertex(344, 265, 282, 338, 243, 346);
  shp2.bezierVertex(223, 340, 209, 336, 189, 328);
  shp2.bezierVertex(178, 301, 206, 216, 180, 184);
  shp2.bezierVertex(163, 202, 159, 236, 165, 330);
  shp2.bezierVertex(144, 336, 129, 345, 108, 348);
  shp2.bezierVertex(18, 287, 3, 187, 17, 152);
  shp2.bezierVertex(32, 154, 37, 152, 66, 157);
  shp2.bezierVertex(83, 58, 113, 42, 169, 10);
  shp2.endShape(CLOSE);
  shapeMode(CENTER);
  fill(0);
  circle(width/2+7, height/2, 90);
  scale(.5, .45);
  shp1.setFill(color(0));
  shp2.setFill(color(0));
  shapeMode(CENTER);
  translate(400,400);
  rotate(-HALF_PI);    
  shape(shp1);
  translate(0, 680);
  scale(1, -1);
  shape(shp1);
  translate(-770, 680);
  rotate(PI);
  shape(shp1);
  translate(0, 680);
  scale(1, -1);
  shape(shp1);
  scale(.90);
  translate(-430, 80);
  shape(shp2);
  translate(10, 590);
  rotate(PI);
  shape(shp2);
  translate(340, 290);
  rotate(HALF_PI);
  scale(.9, 1.2);
  shape(shp2);
  translate(10,560);
  rotate(PI); 
  shape(shp2);
}

Here is my shape bezier editor code for if you want to draw other shapes.
You’ll need the openCV library installed.
On line 32 you import your b&w bitmap.
Sometimes there are some extra points that result in multiple contours, so you need to set the right one in line 40: Contour contour = contours.get(0); Try from 0 up to the total number of contours printed in the console. You’ll also need to set the width and height of the shape you want on line 13: img.resize(360, 360); This resize will determine the shape size. Just run the sketch and reduce the number of knots using the slider, which almost all the time means totally to the right. Then click edit and drag the green circles to change the curves. The red square knots can also be moved and removed. The latter I do not recommend at the moment because I haven’t included an undo button. Later on, I’ll do that and will modify this post with some improvements needed. To finish just hit the print button and copy the code from the console

import gab.opencv.*;
import java.awt.Point;
import java.util.Queue;
import java.util.LinkedList;
import java.util.*;

float[][] cc = {{210, 168}, {430, 30}, {493, -35}, {410, 10}, {450, -75}, {400, 148}, {292, -75}, {185, 135}, {130, 110}, {180, 216}, {130, 215}, {210, 280}, {70, 185}}; // circle center
float[][] ca = {{-.15, .5}, {.18, .3}, {0.02, .12}, {.22, .35}, {.08, .16}, {.66, 1.56}, {-.29, -.02}, {-.67, -.23}, {-.18, -.08}, {-.54, -.08}, {-.07, .06}, {-.38, 0}, {0, .2}}; // circle arc {start,stop}
int[] radius = {300, 148, 160, 150, 177, 105, 255, 110, 110, 110, 110, 110, 250};

PImage img;
PShape shp1;
ArrayList<PVector> contol1 = new ArrayList<PVector>();
ArrayList<PVector> contol2 = new ArrayList<PVector>();
ArrayList<PVector> anchor1 = new ArrayList<PVector>();
ArrayList<PVector> anchor2 = new ArrayList<PVector>();
ArrayList<PVector> all_points = new ArrayList<PVector>();
ArrayList<PVector> rdp_points = new ArrayList<PVector>();
ArrayList<Contour> contours;
float loc = 15, epsilon = 1, x1, y1, x2, y2, x3, y3, x4, y4;
int control_point, control_index;
boolean curve_mode = true, bezier_mode;
OpenCV ocv;
CurveToBezier c2b = new CurveToBezier();


void setup() {
  size(800, 800);
  surface.setTitle("Bezier edit");
 
  img = loadImage("pattern2.png");
  img.resize(360, 360);
  filter(INVERT);

  ocv = new OpenCV(this, img);
  contours = ocv.findContours();
  println("number of contours = "+contours.size()); // Cheque if you have more then 1 !
  // Bitmap created by parametric function above has 2 contours so be sure to selct the right one here.
  Contour contour = contours.get(0); 
  for (PVector point : contour.getPoints()) {
    point(point.x, point.y);
    all_points.add(new PVector(point.x, point.y));
  }
  textSize(18);
}

void draw() {
  background(255);
  stroke(220, 220, 255);
  strokeWeight(4);
  noFill();
  beginShape();
  for (PVector v : all_points) {
    vertex(v.x, v.y);
  }  
  endShape();
  if (curve_mode) {
    rdp_points = new ArrayList<PVector>();
    int total = all_points.size();
    PVector start = all_points.get(0);
    PVector end = all_points.get(total-1);
    rdp_points.add(start);
    rdp(0, total-1, all_points, rdp_points);
    rdp_points.add(end);
    stroke(0);
    strokeWeight(1);
    beginShape();
    PVector v1 = new PVector();
    v1 = rdp_points.get(rdp_points.size()-1);
    curveVertex(v1.x, v1.y); 
    for (PVector v : rdp_points) {
      curveVertex(v.x, v.y);
      fill(255, 0, 0);
      ellipse(v.x, v.y, 5, 5);
    }  
    PVector v2 = new PVector();
    v2 = rdp_points.get(0);
    curveVertex(v2.x, v2.y);
    noFill();
    endShape();
    fill(0);
    text("epsilon: " + nf(epsilon, 2, 2), 150, 80);
    text("Total Points: " + (rdp_points.size()-1), 50, 50);
    drawSlider();
    fill(0);
    text("Edit", 510, 430);
  } else if (bezier_mode) {
    fill(0);
    text("Total Points: "+(contol1.size()), 50, 50);
    stroke(0);
    strokeWeight(1);
    beginShape();
    vertex(rdp_points.get(1).x, rdp_points.get(1).y);
    for (int i = 0; i <  anchor2.size(); i++) {
      x1 = anchor1.get(i).x;      
      y1 = anchor1.get(i).y;   
      x2 = contol1.get(i).x;     
      y2 = contol1.get(i).y;      
      x3 = contol2.get(i).x;     
      y3 = contol2.get(i).y;      
      x4 = anchor2.get(i).x;      
      y4 = anchor2.get(i).y;    
      fill(0, 255, 255);
      circle(contol1.get(i).x, contol1.get(i).y, 8); 
      circle(contol2.get(i).x, contol2.get(i).y, 8);
      stroke(150);
      line(x4, y4, x3, y3);
      line(x2, y2, x1, y1);
      stroke(0);
      fill(255, 130, 130);
      circle(rdp_points.get(0).x, rdp_points.get(0).y, 7);
      circle(anchor1.get(i).x, anchor1.get(i).y, 7);
      circle(anchor2.get(i).x, anchor2.get(i).y, 7);
      noFill();
      bezierVertex(x2, y2, x3, y3, x4, y4);
    } 
    endShape();
    drawSlider();
    fill(0);
    text("Print", 510, 430);
  }
  noFill();
  strokeWeight(1.3);
  rect(490, 410, 80, 28);
}

void mousePressed() {
  if (mouseX > 530 &&  mouseY < 50) {
    println();
  }

  if (curve_mode) {
    if (mouseX > 490 && mouseY > 410 && mouseY < 438) {
      rdp_points.add(0, rdp_points.get(0));
      rdp_points.add(rdp_points.get(0));
      for (int i = 0; i < rdp_points.size(); i++) { 
        c2b.makeBezierVertex(rdp_points.get(i).x, rdp_points.get(i).y);
      }
      for (int i = 1; i <  rdp_points.size(); i++) {
        anchor1.add(new PVector(rdp_points.get(i).x, rdp_points.get(i).y));
      }
      curve_mode = false;
      bezier_mode = true;
    }
  } else if (bezier_mode ) {
    for (int i = 0; i < contol1.size(); i++) {
      if (mouseX < contol1.get(i).x+6 && mouseX > contol1.get(i).x-6 &&
        mouseY < contol1.get(i).y+6 && mouseY > contol1.get(i).y-6) {
        control_point = 1;
        control_index = i;
      }
      if (mouseX < contol2.get(i).x+6 && mouseX > contol2.get(i).x-6 &&
        mouseY < contol2.get(i).y+6 && mouseY > contol2.get(i).y-6) {
        control_point = 2;
        control_index = i;
      }
      if (mouseX < anchor2.get(i).x+6 && mouseX > anchor2.get(i).x-6 &&
        mouseY < anchor2.get(i).y+6 && mouseY > anchor2.get(i).y-6) {
        control_point = 3;
        control_index = i;
        if (mouseButton == RIGHT && i != anchor2.size()-1) {
          anchor1.remove(i+1);
          anchor2.remove(i);
          contol1.remove(i);
          contol2.remove(i);
        }
      }
    }
    if (mouseX > 490 && mouseY > 410 && mouseY < 438) {
      println();
      println("shp2 = createShape(PShape.PATH);");
      println("shp2.beginShape();");
      println("shp2.vertex("+int(rdp_points.get(1).x)+", "+int(rdp_points.get(1).y)+");");
      for (int i = 0; i <  contol2.size(); i++) {
        x1 = anchor1.get(i).x;      
        y1 = anchor1.get(i).y;   
        x2 = contol1.get(i).x;     
        y2 = contol1.get(i).y;      
        x3 = contol2.get(i).x;     
        y3 = contol2.get(i).y;      
        x4 = anchor2.get(i).x;      
        y4 = anchor2.get(i).y;    
        println("shp2.bezierVertex("+int(x2)+", "+int(y2)+", "+int(x3)+", "+int(y3)+", "+int(x4)+", "+int(y4)+");");
      }  
      println("shp2.endShape();");
    }
  }
}

void mouseDragged() {
  if (curve_mode) {
    loc = mouseX;
    if (loc < 15) loc = 15;
    if (loc > width-15) loc = width-15;
    epsilon =  int(map(loc-10.55, 0.0, width, 1.0, 17.0));
  } else if (bezier_mode) {
    if (control_point == 1) contol1.set(control_index, new PVector(mouseX, mouseY));
    if (control_point == 2) contol2.set(control_index, new PVector(mouseX, mouseY));
    if (control_point == 3 && control_index < anchor2.size()-1) {
      anchor2.set(control_index, new PVector(mouseX, mouseY));
      anchor1.set(control_index+1, new PVector(mouseX, mouseY));
      float tx1 = contol1.get(control_index+1).x;
      float ty1 = contol1.get(control_index+1).y;
      float tx2 = contol2.get(control_index).x;
      float ty2 = contol2.get(control_index).y;
      contol1.set(control_index+1, new PVector(tx1+(mouseX-pmouseX), ty1+(mouseY-pmouseY)));
      contol2.set(control_index, new PVector(tx2+(mouseX-pmouseX), ty2+(mouseY-pmouseY)));
    }
  }
}

void rdp(int start_index, int end_index, ArrayList<PVector> all_points, ArrayList<PVector> rdp_points) {
  int next_index = findFurthest(all_points, start_index, end_index);
  if (next_index > 0) {
    if (start_index != next_index) {
      rdp(start_index, next_index, all_points, rdp_points);
    }
    rdp_points.add(all_points.get(next_index));
    if (end_index != next_index) {
      rdp(next_index, end_index, all_points, rdp_points);
    }
  }
}

int findFurthest(ArrayList<PVector> points, int a, int b) {
  float record_distance = -1;
  PVector start = points.get(a);
  PVector end = points.get(b);
  int furthest_index = -1;
  for (int i = a+1; i < b; i++) {
    PVector current_point = points.get(i);
    float d = lineDist(current_point, start, end);
    if (d > record_distance) {
      record_distance = d;
      furthest_index = i;
    }
  }
  if (record_distance > epsilon) {
    return furthest_index;
  } else {
    return -1;
  }
}

float lineDist(PVector c, PVector a, PVector b) {
  PVector norm = scalarProjection(c, a, b);
  return PVector.dist(c, norm);
}

PVector scalarProjection(PVector p, PVector a, PVector b) {
  PVector ap = PVector.sub(p, a);
  PVector ab = PVector.sub(b, a);
  ab.normalize(); // Normalize the line
  ab.mult(ap.dot(ab));
  PVector normal_point = PVector.add(a, ab);
  return normal_point;
}

void drawShapeBorder() {
  float step = 2*PI/60;
  float px = 0, py = 0;
  for (int i = 0; i < 13; i++) {
    push();
    translate(cc[i][0], cc[i][1]);
    int j = 0;
    for (float t = ca[i][0]*PI; t < ca[i][1]*PI+step; t += step) {
      float x = radius[i]*sin(t);
      float y = radius[i]*cos(t);
      if (j == 0) { 
        px = x; 
        py = y;
      }  
      line(x, y, px, py);
      px = x; 
      py = y; 
      j++;
    }
    pop();
  }
}

void fillShape() {
  img = get();
  img.loadPixels(); 
  Queue<Point> queue = new LinkedList<Point>();
  queue.add(new Point(width/2, height/2));
  while (!queue.isEmpty()) {
    Point p = queue.remove();
    if (check(p.x, p.y)) {     
      queue.add(new Point(p.x, p.y-1)); 
      queue.add(new Point(p.x, p.y+1)); 
      queue.add(new Point(p.x-1, p.y)); 
      queue.add(new Point(p.x+1, p.y));
    }
  }
  img.updatePixels();
}

boolean check(int x, int y) {
  if (x < 0 || y < 0 || y >= img.height || x >= img.width) return false;
  int pp = img.pixels[x+(y*img.width)];
  if (pp != color(0)) return false; 
  img.pixels[x + (y * img.width)] = color(255); 
  return true;
}

void drawSlider() {
  push();
  noStroke();
  fill(255);
  rect(0, height-30, width, 30); 
  fill(200, 200, 255);
  rect(10, height-15, width-20, 5); 
  fill(150, 150, 255);
  ellipse(loc, height-13, 15, 15);
  pop();
} 

class CurveToBezier {
  private PVector ring[] = new PVector[4];
  private int count = 0;

  CurveToBezier() {
    ring[0] = new PVector();
    ring[1] = new PVector();
    ring[2] = new PVector();
    ring[3] = new PVector();
  }

  void makeBezierVertex(float x, float y) {
    ring[count % 4].x = x;
    ring[count % 4].y = y;
    if (count >= 3) makeBezierZero(ring[(count-3)%4], ring[(count-2)%4], ring[(count-1)%4], ring[count%4]);
    count++;
  }

  private void makeBezierZero(PVector c0, PVector c1, PVector c2, PVector c3) {
    PVector b1 = new PVector(0, 0);
    PVector b2 = new PVector(0, 0);
    b1.add(c2);  
    b1.sub(c0);  
    b1.add(PVector.mult(c1, 6));  
    b1.div(6); 
    b2.add(c1);
    b2.sub(c3);
    b2.add(PVector.mult(c2, 6));
    b2.div(6);
    contol1.add(b1); 
    contol2.add(b2); 
    anchor2.add(new PVector(c2.x, c2.y));
  }
}

[angela1811]

Thank you so much.

I tried it and it’s wonderful, but I want to modify the rectangular shape to my own patterns. Because I created 10 patterns on adobe illustrator and then I need to apply 10 patterns to 10 motion posters by processing similar to your code but just changing the patterns. It’s hard for me because I only learned to Processing in a short time and not in English or my 1st language T^T Hope you help me and thank you again

I would like to include the 10 patterned motifs I drew below and the poster layouts I aim for my homework but I want the poster to have movement, not “static” like that.

My reference: https://419.vn/khi-hoa-tiet-gach-bong-viet-mot-thoi-biet-chuyen-dong/

(https://drive.google.com/drive/folders/1XucDvK01G0xHk9zPjpL4frdf3VcMVUxO?usp=sharing)

[angela1811]

Thank you so much.

I ran your first code and it was awesome <3 but when I run the 2nd code it can get faulty. I will attach the photos below.

Vietnamese pattern-10|690x400

I have a total of 10 textures that I drew in Illustrator, which I’ll attach to the linked drive.

I want to redraw your first coding model in Processing and I need something in motion maybe individual cubes come out one after another and linked together because my homework is to do some pattern posters with those motifs in motion to attract the viewers.

My reference: https://419.vn/khi-hoa-tiet-gach-bong-viet-mot-thoi-biet-chuyen-dong/

Can you take a look and help me?

I really thank you for your help.

[angela1811]

My pattern file: https://drive.google.com/drive/folders/1XucDvK01G0xHk9zPjpL4frdf3VcMVUxO?usp=sharing

[noel]

@angela1811

I want to redraw your first coding model in Processing and I need something in motion

I watched the reference videos, and they are beautiful. And yes, you can animate patterns like that with the ceramic look texture in Processing. But Processing can’t handle textures on custom shapes, so I recommend using transparent images. The code below is just an example of how you can move those around.
By opening the embed below you can copy the code and images.
Edit: I noticed that for copying the images you need to go to the site itself, clicking on the code button, then on the three dots top/right, and at last on the files tab.
Here the link.

@angela1811

the 2nd code it can get faulty

That is because your image had over a hundred contours (I saw printed in the console). This means that the borders were not smooth and had a lot of loose pixels which count as contours as well. I’ll see if tomorrow I fix that by choosing automatically the largest.

[angela1811]

I already made the code but it’s not smooth and I don’t know how to reduce the distance between patterns.

PImage pattern1;
int edge = 80, sz = 100, frms = 80;
float theta; 
 
void setup() {
  size(1200, 1200);
  pattern1 = loadImage("pattern1.png");
  pattern1.resize(sz, 0);
  imageMode(CENTER);
}
 
void draw() {
  background(255);
  for (int x=edge+sz; x<width-edge; x += sz*2) {
    for (int y=edge+sz; y<height-edge; y+= sz*2) {
      float distance = dist(x, y, width/2, height/2);
      float r = map(distance, 0, sqrt(sq(width/2)+sq(height/2)), 0, HALF_PI);
      pushMatrix();
      translate(x, y);
      rotate(theta+r);
      image(pattern1, 0, 0);
      popMatrix();
    }
  }
  if (frameCount<=frms) saveFrame("image-###.gif");
  theta += TWO_PI/frms;
}

Moreover, I don’t know how to export the gif file when I run the code. Here is my draft layout poster I want to make:

Could you help me to fix the code? I want to use your code (make the pattern in the Processing) as below and combine it with the code I wrote above. I think when I have a gif file, I will make it become the poster with the pattern are moving.

PShape shp1, shp2;

void setup() {
  size(730, 710);
  background(255);
  smooth(4);
  shp1 = createShape(PShape.PATH);
  shp1.beginShape();
  shp1.vertex(406, 23);
  shp1.bezierVertex(522, 35, 592, 67, 752, 48);
  shp1.bezierVertex(735, 98, 736, 123, 740, 175);
  shp1.bezierVertex(743, 226, 769, 277, 780, 342);
  shp1.bezierVertex(771, 371, 748, 378, 710, 377);
  shp1.bezierVertex(671, 375, 593, 343, 539, 347);
  shp1.bezierVertex(518, 354, 499, 362, 506, 373);
  shp1.bezierVertex(512, 383, 534, 413, 576, 412);
  shp1.bezierVertex(650, 427, 716, 384, 757, 420);
  shp1.bezierVertex(777, 509, 759, 597, 771, 643);
  shp1.bezierVertex(669, 629, 601, 657, 543, 654);
  shp1.bezierVertex(497, 651, 508, 643, 496, 631);
  shp1.bezierVertex(489, 609, 510, 569, 505, 522);
  shp1.bezierVertex(500, 497, 496, 494, 470, 484);
  shp1.bezierVertex(430, 466, 363, 472, 322, 481);
  shp1.bezierVertex(280, 489, 251, 509, 222, 534);
  shp1.bezierVertex(209, 534, 206, 520, 201, 512);
  shp1.bezierVertex(218, 497, 287, 459, 328, 447);
  shp1.bezierVertex(368, 434, 400, 430, 443, 438);
  shp1.bezierVertex(485, 445, 554, 468, 582, 494);
  shp1.bezierVertex(610, 519, 616, 557, 611, 592);
  shp1.bezierVertex(637, 569, 627, 549, 634, 531);
  shp1.bezierVertex(650, 528, 703, 577, 707, 575);
  shp1.bezierVertex(711, 572, 671, 533, 658, 517);
  shp1.bezierVertex(697, 515, 710, 473, 707, 470);
  shp1.bezierVertex(704, 466, 683, 503, 640, 495);
  shp1.bezierVertex(596, 486, 526, 435, 445, 417);
  shp1.bezierVertex(390, 407, 335, 430, 312, 435);
  shp1.bezierVertex(372, 376, 428, 354, 492, 334);
  shp1.bezierVertex(555, 313, 640, 309, 692, 310);
  shp1.bezierVertex(677, 289, 667, 286, 638, 279);
  shp1.bezierVertex(608, 271, 540, 268, 517, 267);
  shp1.bezierVertex(540, 236, 636, 151, 631, 147);
  shp1.bezierVertex(625, 142, 527, 210, 482, 240);
  shp1.bezierVertex(484, 221, 491, 198, 483, 176);
  shp1.bezierVertex(475, 153, 456, 121, 434, 107);
  shp1.bezierVertex(446, 186, 426, 244, 401, 295);
  shp1.bezierVertex(375, 345, 296, 413, 279, 412);
  shp1.bezierVertex(292, 386, 310, 330, 298, 286);
  shp1.bezierVertex(275, 202, 216, 177, 206, 143);
  shp1.bezierVertex(209, 105, 239, 81, 235, 78);
  shp1.bezierVertex(230, 74, 192, 77, 179, 123);
  shp1.bezierVertex(158, 123, 113, 77, 110, 81);
  shp1.bezierVertex(112, 95, 165, 129, 161, 143);
  shp1.bezierVertex(140, 137, 77, 154, 85, 161);
  shp1.bezierVertex(130, 161, 172, 161, 204, 183);
  shp1.bezierVertex(235, 204, 265, 252, 274, 291);
  shp1.bezierVertex(282, 329, 270, 379, 255, 414);
  shp1.bezierVertex(240, 470, 197, 486, 182, 498);
  shp1.bezierVertex(165, 490, 169, 490, 160, 482);
  shp1.bezierVertex(208, 439, 219, 394, 229, 359);
  shp1.bezierVertex(238, 323, 225, 290, 216, 271);
  shp1.bezierVertex(206, 252, 200, 248, 174, 245);
  shp1.bezierVertex(134, 243, 106, 264, 52, 250);
  shp1.bezierVertex(34, 237, 18, 237, 14, 214);
  shp1.bezierVertex(15, 169, 39, 129, 20, 32);
  shp1.bezierVertex(107, 39, 177, 20, 225, 24);
  shp1.bezierVertex(273, 27, 290, 36, 308, 51);
  shp1.bezierVertex(334, 91, 282, 170, 301, 213);
  shp1.bezierVertex(311, 243, 354, 239, 370, 235);
  shp1.bezierVertex(385, 230, 393, 216, 392, 186);
  shp1.bezierVertex(390, 155, 357, 80, 360, 53);
  shp1.bezierVertex(362, 25, 389, 27, 405, 23);
  shp1.endShape();
  shp2 = createShape(PShape.PATH);
  shp2.beginShape();
  shp2.vertex(170, 10);
  shp2.bezierVertex(247, 12, 284, 122, 287, 155);
  shp2.bezierVertex(297, 155, 332, 140, 341, 148);
  shp2.bezierVertex(344, 265, 282, 338, 243, 346);
  shp2.bezierVertex(223, 340, 209, 336, 189, 328);
  shp2.bezierVertex(178, 301, 206, 216, 180, 184);
  shp2.bezierVertex(163, 202, 159, 236, 165, 330);
  shp2.bezierVertex(144, 336, 129, 345, 108, 348);
  shp2.bezierVertex(18, 287, 3, 187, 17, 152);
  shp2.bezierVertex(32, 154, 37, 152, 66, 157);
  shp2.bezierVertex(83, 58, 113, 42, 169, 10);
  shp2.endShape(CLOSE);
  shapeMode(CENTER);
  fill(0);
  circle(width/2+7, height/2, 90);
  scale(.5, .45);
  shp1.setFill(color(0));
  shp2.setFill(color(0));
  shapeMode(CENTER);
  translate(400,400);
  rotate(-HALF_PI);    
  shape(shp1);
  translate(0, 680);
  scale(1, -1);
  shape(shp1);
  translate(-770, 680);
  rotate(PI);
  shape(shp1);
  translate(0, 680);
  scale(1, -1);
  shape(shp1);
  scale(.90);
  translate(-430, 80);
  shape(shp2);
  translate(10, 590);
  rotate(PI)

Thank you so much

[noel]

@angela1811

float distance = dist(x, y, width/2, height/2);
float r = map(distance, 0, sqrt(sq(width/2)+sq(height/2)), 0, HALF_PI);

Before answering I have to know what you want to archive with the float ‘distance’ and ‘r’ in these lines.
As it is, it will only increase the angle step theta with a fixed amount, so I don’t see the purpose of it.
Do you want to vary the rotating speed over time? Are you going to vary the number of shapes in the canvas by varying sz, meaning also reducing the distance between them? Or you want a fixed amount, but only reducing the distance between them? Is it, that at the end, you only want a static poster, you described above?

[glv]

Hello,

@angela1811

I have to submit a project very soon for the final exam at university T^T

@angela1811

I want to use your code (make the pattern in the Processing) as below and combine it with the code I wrote above.

Please be mindful of the Homework Policy:
https://discourse.processing.org/faq#format-your-code

I am looking out for the best interest of everyone; this will be part of your academic record and this topic is publicly available.

Be sure to credit all contributors to your project.

:)

[noel]

@angela1811

I want to use your code (make the pattern in the Processing) as below and combine it with the code I wrote above.

Actually she is using a tool (bitmap to bezierVertex shape) using her own shape design, so I don’t see a problem with that. It isn’t my code.

[angela1811]

@noel

Before answering I have to know what you want to archive with the float ‘distance’ and ‘r’ in these lines.
As it is, it will only increase the angle step theta with a fixed amount, so I don’t see the purpose of it.
Do you want to vary the rotating speed over time? Are you going to vary the number of shapes in the canvas by varying sz, meaning also reducing the distance between them? Or you want a fixed amount, but only reducing the distance between them? Is it, that at the end, you only want a static poster, you described above?

I want a fixed amount, but only to reduce the distance between them.

In the end, you just want a motion poster. The poster I have described above is just an illustration and I want to depict the motifs in motion.

Thank you

[angela1811]

Yes, I got it. Thank you.