Design rules

We want to achieve a clean, minimal and consistent visuality for this book-project. That's why all of your examples and illustrations must follow some design-rules.

1. All embedded images and animations shall have a defined canvas-size of 300x300px.

2. There a three basic colors that shall be enough to explain the most topics. Sure you can use grayscales between the black and the white, but please try to avoid using too many shades if you don't need them. Our aim is clarity, not subjective beauty. Backgrounds should be white, foregroung elements black. If you intend to point something out, use the red.

3. The StrokeWeight shall be 1. But if you need to alter it, feel free to break the rule :-)

Black – #222222 - RGB ( 34,34,34 )
White – #eeeeee – RGB ( 238,238,238 )
Red   – #E14C45 - RGB ( 225,76,69 )

Here's a sketch-template with all the design-parameters included. Just copy and paste it if you like.

TSL: Colors are initialized with color() function rather than # operator to enable syntax highlighting

// This is a sketch template for the p5diary

color black = color(34,34,34); // #222222
color white = color(238,238,238); // #EEEEEE
color red = color(225,76,69); // #E14C45

void setup() {
  size(300, 300); // set windows size to 300x300 pixels
  smooth(8); // smooth lines
  fill(red); // fill shape with color 'red'
  background(white); // fill background with color 'white'
  stroke(black); // fill shape outline with color 'black'
}

void draw() {
  // put your code here
}