# Making generative art on the web

## Processing

Processing is a super-popular family of tools that is used to build a wide range of art, by many kinds of people: students, professional artists, musicians, poets, kids and more.

You can use it in several different environments. Each one shares the same central idea and *basically* the same commands. So if you learn in one, you can easily transfer the knowledge and --with a little work-- the programs you build.

### Processing's big idea
Processing is based around core concept of drawing to a **"canvas"**, so Processing programs are often called "sketches". This canvas is *similar* to the **HTML canvas** we will talk about later.

When we draw in Processing, we draw into the **pixel buffer** of the canvas. You can think of it like a grid of colored squares. A 400px x 300px canvas has 120,000 pixels in its buffer. You can also think about it like drawing on a sheet of paper. Unless we erase or start a new sheet of paper, we keep drawing *on top of* our previous marks. This an *accumulative* drawing process, which makes certain kinds of blurring and emergent animations easy.

> Most other approaches to graphics, like 3D rendering (which Processing can do) and sprite or vector based engines instead store a **scene graph**, and each frame, automatically erase and **re-render** the scene graph. In that case, you perform animations by changing the scene graph, moving or adding objects, between frames. That has the advantage of you-the-artist not having to remember all the objects you wanted to draw, but is harder to program and think about. In Processing, if you want to draw a rectangle, you tell it to draw a rectangle.

Processing is *imperative* programming, which means it is a seuqence of commands given to the computer. In Processing, some of those commands may be:

* drawing something `circle(0,0,50)` `line(0,0,150,50)`
* setting the **style** that you are currently drawing with `strokeWeight(5)` `fill(red)`
* copying or shifting regions of the buffer `filter(BLUR)` `copy(56, 176, 80, 80, 280, 200, 400, 400)`
* transforming your frame of refence (think of it like rotating the paper) `scale(.5, 2)` `rotate(90)`

You will also use the normal programming syntax of whichever language you are using Processing with. Processing has been "ported" to a few languages. It was originally in Java, **P5** is a very popular Javascript port, and **Processing.py** is a recent python port. If you want to play with electronics, Arduino's primary dev environment was spun off the original Processing IDE, and will look familiar (but is a very different language)

In Javascript and Java versions of Processing, You can use it in one of two ways.

You can use it in a special Processing mode that keeps you from having to type some of the confusing and tiresome syntax of the full language: e.g., it creates a canvas and window so you don't have to manually create a canvas to draw into, and all commands automatically apply to the canvas it creates for you. This is useful for beginners, and is the way that the hosted sketches are served

### Places to use Processing

Javascript
https://p5js.org/

Python
https://py.processing.org/

Create a sketch
https://openprocessing.org/sketch/create
https://openprocessing.org/