# Randomly arrange imported shapes on canvas

**URL:** <https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667>\
**Category:** Coding Questions\
**Created:** [April 26, 2019, 2:34pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667 "2019-04-26T14:34:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![annab](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@annab](https://discourse.processing.org/u/annab)\
**Post date:** [April 26, 2019, 2:34pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/1 "2019-04-26T14:34:29Z")

</div>

Hi,

I am completely new to processing and need to solve a problem. I am trying to write a simple code to allow me to arrange imported shapes randomly scattered on the canvas. I have found the tutorial for circle packing (did not manage to run it successfully) and a separate one for importing shapes but I am struggling to combine them. Could anyone help me in trying to combine these two functions?  
I would really appreciate it,

Anna

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 26, 2019, 2:35pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/2 "2019-04-26T14:35:56Z")

</div>

can you post the 2 codes please?

Are you planning to work with svg files?

---

<div class="post-metadata">

**Author:** ![annab](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@annab](https://discourse.processing.org/u/annab)\
**Post date:** [April 26, 2019, 2:58pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/3 "2019-04-26T14:58:35Z")

</div>

Hi,

Thanks for getting back to me.

I have been using svg yes but would like to export it as vector or png after if possible?  
This one imports the shape fine:

```auto
PShape s;

void setup() {
  size(2000,1000);
  // The file "bot.svg" must be in the data folder
  // of the current sketch to load successfully
  s = loadShape("plant.svg");
}

void draw() {
  shape(s, width/2, height/2, 10, 10);
}

```

For the second part,  
I am trying to understand this one now but it gives me a syntax error when I paste it in my sketchbook.

```auto
var circles;
var img;

function preload() {
  img = loadImage("assets/kitten.jpg");
}

function setup() {
  createCanvas(600, 600);
  var density = displayDensity();
  pixelDensity(1);
  img.loadPixels();
  circles = [];

  console.log(img.width);
  console.log(img.height);
  console.log("pixels", img.pixels.length);
  console.log(density)
}

function draw() {
  background(0);

  var total = 10;
  var count = 0;
  var attempts = 0;

  while (count < total) {
    var newC = newCircle();
    if (newC !== null) {
      circles.push(newC);
      count++;
    }
    attempts++;
    if (attempts > 1000) {
      noLoop();
      console.log("finished");
      break;
    }
  }

  for (var i = 0; i < circles.length; i++) {
    var circle = circles[i];

    if (circle.growing) {
      if (circle.edges()) {
        circle.growing = false;
      } else {
        for (var j = 0; j < circles.length; j++) {
          var other = circles[j];
          if (circle !== other) {
            var d = dist(circle.x, circle.y, other.x, other.y);
            var distance = circle.r + other.r;

            if (d - 1 < distance) {
              circle.growing = false;
              break;
            }
          }
        }
      }
    }

    circle.show();
    circle.grow();
  }
}

function newCircle() {
  var x = random(0, img.width);
  var y = random(0, img.height);

  var valid = true;
  for (var i = 0; i < circles.length; i++) {
    var circle = circles[i];
    var d = dist(x, y, circle.x, circle.y);
    if (d - 2 < circle.r) {
      valid = false;
      break;
    }
  }
  if (valid) {
    var index = (int(x) + int(y) * img.width) * 4;
    var r = img.pixels[index];
    var g = img.pixels[index+1];
    var b = img.pixels[index+2];
    var c = color(r,g,b);
    return new Circle(x, y, color(c));
  } else {
    return null;
  }
}

```

It comes from here:

[![](https://img.youtube.com/vi/XATr_jdh-44/hqdefault.jpg "9.8: Random Circles with No Overlap - p5.js Tutorial") ](https://www.youtube.com/watch?v=XATr_jdh-44)

> <https://github.com/CodingTrain/website-archive/blob/main/CodingChallenges/CC_050.2_CirclePackingImage/P5/sketch.js>

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 26, 2019, 3:37pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/4 "2019-04-26T15:37:05Z")

</div>

The first sketch is processing / java, the 2nd one is p5.js, another dialect

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 26, 2019, 3:49pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/5 "2019-04-26T15:49:17Z")

</div>

here is the 2nd sketch in processing language

```auto
ArrayList<Circle> circles=new ArrayList();
PImage img;

void setup() {
  size(600, 600);

  img = loadImage("kitten.jpg");
  float density = displayDensity();
  pixelDensity(1);
  img.loadPixels();

  println (img.width);
  println (img.height);
  println ("pixels", img.pixels.length);
  println (density);
}

void draw() {
  background(0);

  int total = 10;
  int count = 0;
  int attempts = 0;

  while (count < total) {
    Circle newC = newCircle();
    if (newC != null) {
      circles.add(newC);
      count++;
    }
    attempts++;
    if (attempts > 1000) {
      // noLoop();
      println("finished");
      break;
    }
  }

  for (int i = 0; i < circles.size(); i++) {
    Circle circle = circles.get(i);

    if (circle.growing) {
      if (circle.edges()) {
        circle.growing = false;
      } else {
        for (int j = 0; j < circles.size(); j++) {
          Circle other = circles.get(j);
          if (circle != other) {
            float d = dist(circle.x, circle.y, 
              other.x, other.y);
            float distance = circle.r + other.r;

            if (d - 1 < distance) {
              circle.growing = false;
              break;
            }
          }
        }
      }
    }

    circle.show();
    circle.grow();
  }
}

Circle newCircle() {
  float x = random(0, img.width);
  float y = random(0, img.height);

  boolean valid = true;
  for (int i = 0; i < circles.size(); i++) {
    Circle circle = circles.get(i);
    float d = dist(x, y, circle.x, circle.y);
    if (d - 2 < circle.r) {
      valid = false;
      break;
    }
  }
  if (valid) {
    int index = (int(x) + int(y) * img.width) ; // * 4;
    float r = img.pixels[index];
    float g = img.pixels[index+1];
    float b = img.pixels[index+2];
    color c = color(r, g, b);
    return new Circle(x, y, c);
  } else {
    return null;
  }
}
//
// https://github.com/CodingTrain/website/blob/master/CodingChallenges/CC_050.2_CirclePackingImage/Processing/CC_050_2_CirclePackingImage/Circle.pde

class Circle {
  float x;
  float y;
  float r;
  color c;

  boolean growing = true;

  Circle(float x_, float y_, 
    color c_) {
    x = x_;
    y = y_;
    c = c_;
    r = 1;
  }

  void grow() {
    if (growing) {
      r = r + 0.5;
    }
  }

  boolean edges() {
    return (x + r > width || x - r < 0 || y + r > height || y -r < 0);
  }

  void show() {
    stroke(255);
    //strokeWeight(2);
    //noFill();
    fill(c);
    // noStroke();
    ellipse(x, y, r*2, r*2);
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![annab](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@annab](https://discourse.processing.org/u/annab)\
**Post date:** [April 27, 2019, 4:49pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/6 "2019-04-27T16:49:10Z")

</div>

Thanks so much! This is working great!  
Any chance you could show me how to substitute the circle for my file shape and choose the maximum number of shapes?  
Thank you for your help 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 27, 2019, 7:18pm UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/7 "2019-04-27T19:18:12Z")

</div>

Unfortunately not

Not enough time…

---

<div class="post-metadata">

**Author:** ![annab](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@annab](https://discourse.processing.org/u/annab)\
**Post date:** [April 29, 2019, 8:04am UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667/8 "2019-04-29T08:04:36Z")

</div>

ok, thank you anyways!