Ellipse limit of the drawing

Processing Coding Questions
1

Hello everyone !

after a lot of research, I am asking for your help.

I draw a random Bezier inside an ellipse, but I would like this ellipse to be the limit of the drawing as well to avoid continuing the lines outside the ellipse.

the line stay inside.

Thank you in advance for your help.

int savedTime;
int totalTime = 500;

import processing.svg.*;




void setup() {
  size(793, 793);
  background(255); 
  savedTime = millis();
  
}

void draw() {
  
  
  stroke(0);
  strokeWeight(2); //Epaisseur ligne cercle
  noFill(); // pas de rempliçage
  beginRecord(SVG, "frame1.svg");
  
  
  
  ellipse(396.5, 396.5, height, height);
 


  
  //
  float radc;
  float radx;   // Radius
  float rady;
  
  float angle1; // angle
  float angle2; // angle
  float angle3; // angle
  float angle4; // angle

  float x;      // result
  float y;
  float x1;      // result
  float y1;
  float x2;
  float y2;
  float x3;      // result
  float y3;
  
  //

    
    
    
    radx=396.5;
    rady=396.5;
    radc=175;
    angle1= 0;
    angle2= 180;
    angle3= random(360);
    angle4= random(360);
  
    //

    x=(radx*cos(radians(angle1)))+width/2;
    y=(radx*sin(radians(angle1)))+height/2;
    x1=(radx*cos(radians(angle2)))+width/2;
    y1=(radx*sin(radians(angle2)))+height/2;
    x2=(radc*cos(radians(angle3)))+width/2;
    y2=(radc*sin(radians(angle3)))+height/2;
    x3=(radc*cos(radians(angle3)))+width/2;
    y3=(radc*sin(radians(angle4)))+height/2;
 
 
   noFill();
 
 
   int counter = 0;
    while (counter < 10) { 
  int i = (40 + (counter * 15));
  
  bezier(x-(i/7.0), y+i, x2-(i/2.0), y2-(i/2.0), x3+i, i+y3, x1-(i/7.0), y1+i);  

  counter += 1; 
  } 
  
     int passedTime = millis() - savedTime;
  // Has five seconds passed?
  if (passedTime > totalTime){
    noLoop();
  }
}
2

Hi,

One way to do this is to mask all the pixels that are outside the ellipse, here in this case putting them white. You could have a function like this :

void maskOutsideEllipse(float centerX, float centerY, float radius, color c) {
  loadPixels();
  // Loop through every pixels
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j++) {
      float distFromCenter = dist(i, j, centerX, centerY);
      
      // If it's outside the ellipse
      if (distFromCenter >= radius) {
        // Replace it with the color
        pixels[i + j * width] = c;
      }
    }
  }
  updatePixels();
}

Then you would need to call it before the noLoop() statement :

// Mask with white
maskOutsideEllipse(width / 2, height / 2, width / 2, color(255));

If you are not familiar with manipulating pixels, you should check this tutorial :

This is probably not the simplest solution and is rather a “hack” but it allow you to draw freely your shapes then mask what you don’t want.

Another solution is to restrict your bezier curve points to the bounds of the ellipse but your code had to much variables to change :wink:

3

Thanks Josephh, that works !
Just a question, i’m exporting everything to svg. And when exporting it I still have the lines outside the ellipse. Do you think it’s possible to do the same?

1 Like
4

I’m glad it works! :wink:

So yeah basically if you want to export it to svg, then manipulating pixels doesn’t work because your are now dealing with vector graphics so the solution is to constrain the bezier curve points so that they don’t go outside the ellipse.

You can also export it and make a mask in InkScape for example : as explained in the docs

5

Thanks for this solution, I tried with inkscape 1.1 but also with Rhino6. Too bad it is not possible to export in svg only the interior of the ellipse. Next step :wink:

Thanks again