Help to calculate the Rect on this image beginner?

I'm a beginner and wanna know how I can calculate this image to forms as rect(40, 40, 35, 45); and such. I just really love this image and want to recreate it in someway.


  • edited March 2017 Answer ✓

    @blank1000 --

    Use rect() for each rectangle. See the examples here:

    To make each rect filled with red, blue, etc., use fill(). See the examples here:

    To make every rect have a (black) colored stroke outline, use stroke():

    To make the stroke outline thick, use strokeWeight():

    If you try and need feedback, post your example code here along with any follow-up questions that you have!

  • edited March 2017 Answer ✓

    Here's my initial attempt. Still needs some adjustments in order to look like the art pic though.
    But it's up to you from now on. If you're in doubt about some part of the code, just ask here.
    Visit this link to view it online: :bz

     * Quadricules (v1.0.3)
     * GoToLoop (2017-Mar-08)
     * help-to-calculate-the-rect-on-this-image-beginner#Item_2
    "use strict";
    const BOLD = 6.5, Palette = {}, rects = [];
    function setup() {
      createCanvas(700, 600);
      createPalette(), createRects();
    function draw() {
      for (const r of rects)  r.display();
    function createPalette() {
      Palette.WHITE = color('white');
      Palette.RED = color('red');
      Palette.YELLOW = color('yellow');
      Palette.SLATEBLUE = color('darkslateblue');
      for (const c in Palette) {
        const colour = Palette[c];
        for (const p in colour)  Object.freeze(colour[p]);
    function createRects() {
      const w = width, h = height,
            w2 = w>>1, h2 = h>>1,
            w7 = w/7, h6 = h/6;
      rects.push(new Rect(0, 0, 3*w7, 4*h6, Palette.RED));
      rects.push(new Rect(3*w7, 0, w7, h6 + h6/3, Palette.YELLOW));
      rects.push(new Rect(w - w7, 0, h6, h6, Palette.RED));
      rects.push(new Rect(4*w7, 2*h6 + h6/3, w7<<1, h6 - h6/3, Palette.SLATEBLUE));
      rects.push(new Rect(3*w7, h - 2*h6, w7, h6<<1, Palette.SLATEBLUE));
      rects.push(new Rect(w - 3*w7, h - h2, 3*w7, h2, Palette.YELLOW));
    class Rect {
      constructor(x, y, w, h, c) {
        this.x = x, this.y = y;
        this.w = w, this.h = h;
        this.c = c;
      display() {
        fill(this.c).rect(this.x, this.y, this.w, this.h);
Sign In or Register to comment.