How to use custom shapes in a repeating loop pattern?

user_15251299 0
Viewed 159

I already made a custom shape (myFunction), and I also made patterns using simpler shapes. I want to know how to replace those simple shapes with my custom shape while maintaining the pattern drawn on processing...

processing
1 Answers

You're already calling functions such as noFill(), noStroke(), etc.

It's the same for your function: call it by simply using it's name and () (because it has no arguments): myFunction();

Let's say you want to draw it in pattern 1, you could do something like:

if (pattern==1) { 
    for (int x=50; x<width; x+=100) { 
      for (int y=20; y<height; y+=100) {
        myFunction();
      }
    }
  }

You will need to pay attention to rendering though. Running the above will not display anything you call in noFill() in myFunction() and also noStroke() in draw(), right after background(): you won't be able to see a shape with no fill and no stroke :)

One suggestion is to add a stroke:

void myFunction() {
  noFill(); 
  stroke(255);
  ellipse(300, 300, 200, 400); 
  ellipse(300, 300, 400, 200); 
  translate(300, 300); 
  rotate(radians(130)); 
  ellipse(0, 0, 200, 400); 
  translate(0, 0); 
  rotate(radians(0)); 
  ellipse(0, 0, 400, 200);
}

Of course feel free to experiment and make this look nicer.

Here's a modified version of your sketch that uses a few key presses to change the pattern type and shape type at runtime:

int pattern = 1;
// 0 = pluseEllipseCluser, 1 = blobs, 2= myFunction spirograph circles
int shape = 0;

void setup() {
  size(600, 600);
  println("press 1,2 to change pattern");
  println("press p/b/c to change shapes");
}

void draw() {
  background(30);
  noStroke();

  if (pattern==1) { 
    for (int x=50; x<width; x+=100) { 
      for (int y=20; y<height; y+=100) {
        drawSelectedShapes(x, y);
      }
    }
  }

  if (pattern==2) { 
    float rando = random(10, 90);
    for (float x= rando; x >= 0; x-=random(2.5)) { 
      for (float y= rando; y >= 0; y-=random(2.5)) {
        drawSelectedShapes(x, y);
      }
    }
  }
}

void drawSelectedShapes(float x, float y){
  if(shape == 0){
    plusEllipseCluser(x, y);
  }
  if(shape == 1){
    blobs();
  }
  if(shape == 2){
    myFunction();
  }
}

void plusEllipseCluser(float x, float y){
  fill(random(255), random(255), random(255), random(255));
  ellipse(x, y+30, 50, 20); //plus ellipse cluster
  ellipse(x, y+30, 20, 50);
}

void blobs(){
  noStroke(); 
  fill(random(250), random(120), random(100));
  ellipse(random(width), random(height), 20, 50); 
  noFill();
  stroke(random(255));
  ellipse(random(width), random(height), 50, 20);
}

void myFunction() {
  noFill(); 
  stroke(255);
  ellipse(300, 300, 200, 400); 
  ellipse(300, 300, 400, 200); 
  translate(300, 300); 
  rotate(radians(130)); 
  ellipse(0, 0, 200, 400); 
  translate(0, 0); 
  rotate(radians(0)); 
  ellipse(0, 0, 400, 200);
}

void keyPressed(){
  if(key == '1') {
    pattern = 1;
  }
  if(key == '2') {
    pattern = 2;
  }
  if(key == 'p'){
    shape = 0;
  }
  if(key == 'b'){
    shape = 1;
  }
  if(key == 'c'){
    shape = 2;
  }
}

Notice that the example above also calls plusEllipseCluser() passing two arguments: it's a basic example of defining and calling a function that takes two arguments. Of course you've already called functions with arguments before (e.g. random(min,max), ellipse(x,y,w,h), etc.)

Have fun with shapes and patterns.

user_897660
Related