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
can you post the 2 codes please?
Are you planning to work with svg files?
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:
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.
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:
The first sketch is processing / java, the 2nd one is p5.js, another dialect
here is the 2nd sketch in processing language
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);
}
}
//
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 
Unfortunately not
Not enough time…
ok, thank you anyways!