A tutorial on creating circular patterns within a pyramid structure using p5.js and matter.js

Question

A tutorial on creating circular patterns within a pyramid structure using p5.js and matter.js

I've been attempting to create a pyramid shape using multiple circles, similar to this: balls in pyramid shape

To achieve this, I've developed a 'Balls' class:

class Balls {
  constructor(x, y, radius, color, ballCount) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.balls = [];

    this.ballCount = ballCount;

    this.option = { restitution: 1, friction: 0.01, label: "ball" };
  }

  setupBalls() {
    for (var i = 0; i < this.ballCount; i++) {
      var ball = Bodies.circle(this.x, this.y , this.radius, this.option);
      this.balls.push(ball);
      World.add(engine.world, [this.balls[i]]);
    }
  }

  
  drawBalls() {
    fill(this.color);
    noStroke();
    for(var i = 0; i<this.balls.length; i++){
        drawVertices(this.balls[i].vertices);
    }
  }
}

The 'setupBalls()' method needs to be called within the 'function setup()', while 'drawBalls()' should be invoked inside 'function draw()' of p5.js as shown below:

function setup() {
    createCanvas(1200, 600);

    //create engine
    engine = Engine.create();
    //set world gravity to 0
    engine.world.gravity.y = 0;


    //balls
    balls = new Balls(width / 2 + 100, 250, 8, color(200, 0, 0), 15);
    balls.setupBalls();


}

 function draw() {

    background(125);
    Engine.update(engine);

    //balls
    balls.drawBalls();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"> 
</script>

I experimented with adjusting the x and y positions using nested loops but couldn't achieve the desired pyramid shape.

javascript p5.js matter.js

Answer 1

Answer №1

I don't have much experience with matter.js, but here's a code snippet that uses nested for loops to create a triangle shape using circles in a pool ball rack arrangement:

let numBalls = [1, 2, 3, 4, 5]; // Balls per column
let ballsMax = 5;
let lenDisparity = 0;
let counter = 0;

// Building the grid by column
function circleGrid(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  for (let j = 0; j < numBalls.length; j++) {
    for (let k = 0; k < numBalls[counter]; k++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        y += lenDisparity*hgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function setup() {
  createCanvas(400, 400);
  circleGrid(60,60,28,30,30);
}

function draw() {
}

CircleGridByColAndRow

This source code showcases the differences between building the grid by column and building it by row:

let numBalls = [1, 2, 3, 4, 5]; 
let ballsMax = 5;
let lenDisparity = 0;

function circleGridByCol(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  counter = 0;
  for (let j = 0; j < numBalls.length; j++) {
    for (let k = 0; k < numBalls[counter]; k++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        y += lenDisparity*hgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function circleGridByRow(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  counter = 0;
  for (let k = 0; k < numBalls.length; k++) {
    for (let j = 0; j < numBalls[counter]; j++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        x += lenDisparity*vgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function setup() {
  createCanvas(600, 250);
  circleGridByCol(60,60,28,30,30);
  circleGridByRow(250,60,28,30,30);
}

function draw() {
}

Answer 2

I don't have much experience with matter.js, but here's a code snippet that uses nested for loops to create a triangle shape using circles in a pool ball rack arrangement:

let numBalls = [1, 2, 3, 4, 5]; // Balls per column
let ballsMax = 5;
let lenDisparity = 0;
let counter = 0;

// Building the grid by column
function circleGrid(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  for (let j = 0; j < numBalls.length; j++) {
    for (let k = 0; k < numBalls[counter]; k++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        y += lenDisparity*hgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function setup() {
  createCanvas(400, 400);
  circleGrid(60,60,28,30,30);
}

function draw() {
}

CircleGridByColAndRow

This source code showcases the differences between building the grid by column and building it by row:

let numBalls = [1, 2, 3, 4, 5]; 
let ballsMax = 5;
let lenDisparity = 0;

function circleGridByCol(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  counter = 0;
  for (let j = 0; j < numBalls.length; j++) {
    for (let k = 0; k < numBalls[counter]; k++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        y += lenDisparity*hgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function circleGridByRow(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  counter = 0;
  for (let k = 0; k < numBalls.length; k++) {
    for (let j = 0; j < numBalls[counter]; j++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        x += lenDisparity*vgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function setup() {
  createCanvas(600, 250);
  circleGridByCol(60,60,28,30,30);
  circleGridByRow(250,60,28,30,30);
}

function draw() {
}

A tutorial on creating circular patterns within a pyramid structure using p5.js and matter.js

Answer №1

Similar questions

Alter the language settings of the Datepicker feature in Material Angular 4

Having trouble importing Material UI and working with ClickAwayListener

How can we achieve the same functionality as React Native's { flex: 1 } in React JS?

Uncover hidden content by clicking a button with JavaScript

Can the Angular.js scope be maintained while also making changes to the template?

Execute a Node.JS query using an HTML select dropdown

Ensuring Secure API Request Distribution

Harnessing the power of the bluebird promise library

Adjust the background color of a specific list item when hovering over another list item

Show pagination control only when there are multiple pages in AngularJS using ui-bootstrap

io.emit is unable to send messages to all connected clients

A see-through object appears only properly when viewed from one specific angle

Encountering a loading error with r.js while attempting to optimize

Error alert: Object expected on OnClientClick in Microsoft JScript runtime

sending a selection of JSON string values to a jQuery function

Exploring the power of jQuery and Ajax together

Prevent the ability to add options dynamically to a drop-down select list

I need help figuring out the right way to define the scope for ng-model within a directive

Error with Google Maps Display

Bookshelf.js has implemented a new feature where it automatically encrypts passwords with bcrypt every time data is updated