03 Random

1 Mosaic

马赛克发源于古希腊,君士坦丁堡(拜占庭)的教堂都用大量马赛克来装饰美化。当时最常用的形式是用黑色与白色相互搭配而成的铺石马赛克。马赛克艺术伴随着人类社会的发展,在人们的生活中具有着不容忽视的影响力。

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
}

function draw() {
  let weight = 10;
  for (y = 0; y < height; y = y + weight) {
    for (x = 0; x < width; x = x + weight) {
      fill(random(120, 255));
      rect(x, y, weight, weight);
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Run the code. And try to change the mosic size and color to make a new mosaic picutre.

2 Rectangles and Circles

function setup() {
  createCanvas(500, 500);
}

function draw() {
  //fill(v1, v2, v3, [alpha])
  fill(random(255), random(255), random(255), random(255));
  //rect(x, y, w, [h])
  rect(random(500), random(500), random(40), random(40));
}

Please change the code to make it like this.

3 Bubbles

  1. Talk about what concept has been used in this picutre.
  2. Make bubble picture like this.
  3. Can you do some different bubbles by yourself.

4 Stereogram

Stereograms are illusions of 3D surfaces. how to make a stereogram.

5 Dice

Play the dice here:

Source

6 Line Boom

Can you make a picutre like this?

7 Stickers

let maxTranslate = 10;
let maxRotate = 30;
let cellSize = 50;

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER)
  angleMode(DEGREES)
  noLoop();
}

function draw() {
  background(220);

  drawCell(100,100);
}

function drawCell(x, y) {
  push()
  translate(x, y)

  var translateBy = random(-maxTranslate, maxTranslate) * y / height
  var rotateBy = random(-maxRotate, maxRotate) * y / height

  translate(0, translateBy);
  rotate(rotateBy);
  fill(random(0),random(150, 255), 255);
  rect(0, 0, cellSize, cellSize)
  pop()
}

8 Squares

https://editor.p5js.org/oneandzeros/sketches/DasgVoD0_ https://editor.p5js.org/oneandzeros/sketches/OHBy5tlSA https://editor.p5js.org/oneandzeros/sketches/ccgFYjN4u