Home

4: Basics

Line and Rect

setup() { createCanvas(100, 100); line(25, 25, 50, 50); }

setup() { createCanvas(100, 100); rect(25, 25, 50, 50); }

Rotation

setup() { createCanvas(100, 100); rotate(PI / 4); rect(25, 25, 50, 50); }

Matrix: Push and pop

push and pop help to reset the transformation matrix.

setup() { createCanvas(100, 100); push(); rotate(PI / 4); rect(25, 25, 50, 50); pop(); }

This will still draw things as the currently are.

If we wanted to make things more centered, we could do the following:

setup = () => { createCanvas(400, 400) background(230, 230, 230) angleMode(DEGREES) rectMode(CENTER) push() translate(width / 2, height / 2) rotate(45) rect(0, 0, 100, 100) push() }

Rotation + Color

setup = () => { createCanvas(400, 400) background(230, 230, 230) angleMode(DEGREES) rectMode(CENTER) push() translate(width / 2, height / 2) rotate(45) rect(0, 0, 100, 100) push() }

Repository

https://github.com/okeeffed/developer-notes-nextjs/content/generative-art/Programming-Graphics-Course/4-Basics

Sections


Related