Processing

Learning Processing

Processing.org

Tutorials

These are playlists of tutorial videos from The Coding Train (Dan Schiffman) who has created many tutorials, books, etc. about creative coding (Processing, p5js, JavaScript, etc.)

Processing Basics:
Introduction to Processing
1: Pixels
2: Processing Environment
3: Interaction
4: Variables
5: Conditionals
6: Loops
7: Functions
8: Object-oriented programming
9: Arrays
10: Images and Files

The Nature of Code (view as one big playlist):
Intro
Vectors
Forces
Oscillation
Particle Systems
Physics Libraries
Autonomous Agents
Cellular Automata
Fractals
Genetic Algorithms

Examples

Image processing
WormsJS - Pierre Marzin

Generative pieces
Hommage à Long-lost drawing
Golden Flower

Computational Textiles in Processing - can be woven into throw blankets and pillows by WOVNS

Grid Examples

int numRows = 20;
int margin = 100;
void setup() {
  size(785, 1000);
  background(255);
  noFill();
  stroke(0);

  for (int row = 0; row < numRows; row++) {
    float y = map(row, 0, numRows, margin, height - margin);
    line(margin, y, width - margin, y);
  }
}

float rowStep = 10;

void setup() {
  size(1080, 1080);
  
  float y = 0;
  while (y < height) {
    y += rowStep;
    
  }
}

int gridSize = 23;
int margin = 100;
float scl = 15;

void setup() {
  size(823, 1000); // Increase canvas size to accommodate margin
  float gridHeight = height - 2 * margin;
  float gridWidth = width - 2 * margin;
  float gridSpacing = min(
    (gridWidth) / (float) (gridSize - 1),
    (gridHeight) / (float) (gridSize - 1)
  );
  int horizontalCircles = (int) ((gridWidth) / gridSpacing);
  int verticalCircles = (int) ((gridHeight) / gridSpacing);
  
  
  for (int i = 0; i <= horizontalCircles; i++) {
    for (int j = 0; j <= verticalCircles; j++) {
      float x = margin + i * gridSpacing;
      float y = margin + j * gridSpacing;
      // ellipse(x, y, circleDiameter, circleDiameter);
      ellipse(x, y, 10, 10);
    }
  }
}