#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Help to calculate the Rect on this image beginner?

edited March 2017

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.

Tagged:

• edited March 2017 Answer ✓

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

``````/**
* 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);
``````