Help to calculate the Rect on this image beginner?

blank1000

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.

jeremydouglass

@blank1000 --

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

• https://processing.org/reference/rect_.html

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

• https://processing.org/reference/fill_.html

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

• https://processing.org/reference/stroke_.html

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

• https://processing.org/reference/strokeWeight_.html

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

GoToLoop

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: https://OpenProcessing.org/sketch/412049 :bz

/**
 * Quadricules (v1.0.3)
 * GoToLoop (2017-Mar-08)
 *
 * forum.Processing.org/two/discussion/21259/
 * help-to-calculate-the-rect-on-this-image-beginner#Item_2
 *
 * OpenProcessing.org/sketch/412049
 */

"use strict";

const BOLD = 6.5, Palette = {}, rects = [];

function setup() {
  createCanvas(700, 600);
  noLoop();

  colorMode(RGB).rectMode(CORNER).blendMode(REPLACE);
  strokeWeight(BOLD).stroke(0);

  createPalette(), createRects();
}

function draw() {
  background(Palette.WHITE);
  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]);
    Object.freeze(colour);
  }

  Object.freeze(Palette);
}

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));

  Object.freeze(rects);
}

class Rect {
  constructor(x, y, w, h, c) {
    this.x = x, this.y = y;
    this.w = w, this.h = h;
    this.c = c;

    Object.freeze(this);
  }

  display() {
    fill(this.c).rect(this.x, this.y, this.w, this.h);
  }
}

Object.freeze(Object.freeze(Rect).prototype);