let g, g2

function setup() {
  createCanvas(400, 400)
  g = createGraphics(40, 40)
  g.point(0 + 1, 3 + 1)
  g.point(1 + 1, 3 + 1)
  g.point(2 + 1, 3 + 1)
  g.point(5 + 1, 2 + 1)
  g.point(5 + 1, 3 + 1)
  g.point(5 + 1, 4 + 1)
  // frameRate(4)
}

function draw() {
  background(220)
  g2 = createGraphics(g.width, g.height)
  for (let i = 1; i < g.width-1; i++) {
    for (let j = 1; j < g.height-1; j++) {
      let state, state2
      state = g.get(i, j)[3] / 255
      state2 = state
      let neighbours =
        g.get(i - 1, j + 1)[3] / 255 +
        g.get(i - 1, j    )[3] / 255 +
        g.get(i - 1, j - 1)[3] / 255 +
        g.get(i    , j - 1)[3] / 255 +
        g.get(i    , j + 1)[3] / 255 +
        g.get(i + 1, j - 1)[3] / 255 +
        g.get(i + 1, j    )[3] / 255 +
        g.get(i + 1, j + 1)[3] / 255
      if (state == 0) {
        if (neighbours == 3) {
          state2 = 1
        }
      } else {
        if (neighbours < 2 || neighbours > 3) {
          state2 = 0
        }
      }
      if (state2 == 1) {
        g2.point(i,j)
      }
    }
  }
  g = g2
  image(g, 0, 0, width, height)
  // noLoop()
}

function mouseDragged() {
  g.point(floor(mouseX*g.width/width),
          floor(mouseY*g.height/height)-1)
  
  g.point(floor(mouseX*g.width/width),
          floor(mouseY*g.height/height))
  
  g.point(floor(mouseX*g.width/width),
          floor(mouseY*g.height/height)+1)
}

let g, g2

function setup() {
  createCanvas(400, 400)
  g = createGraphics(20, 20)
  g.background(0)
  g.stroke(255)
  g.point(0 + 1, 3 + 1)
  g.point(1 + 1, 3 + 1)
  g.point(2 + 1, 3 + 1)
  g.point(5 + 1, 2 + 1)
  g.point(5 + 1, 3 + 1)
  g.point(5 + 1, 4 + 1)
  // for (let i = 0; i < g.width; i++) {
  //   for (let j = 0; j < g.height; j++) {
  //     if (random() < .4)
  //       g.point(i, j)
  //   }
  // }
  // frameRate(4)
  image(g, 0, 0, width, height)
  
}

function draw() {
  background(220)
  g2 = createGraphics(g.width, g.height)
  for (let i = 1; i < g.width - 1; i++) {
    for (let j = 1; j < g.height - 1; j++) {
      let state, state2
      state = g.get(i, j)[0]
      if (state == 255 && frameCount > 5)console.log(state)
      state2 = state
      let neighbours =
        (g.get(i - 1, j + 1)[0] == 255 ? 1 : 0) +
        (g.get(i - 1, j)[0] == 255 ? 1 : 0) +
        (g.get(i - 1, j - 1)[0] == 255 ? 1 : 0) +
        (g.get(i, j - 1)[0] == 255 ? 1 : 0) +
        (g.get(i, j + 1)[0] == 255 ? 1 : 0) +
        (g.get(i + 1, j - 1)[0] == 255 ? 1 : 0) +
        (g.get(i + 1, j)[0] == 255 ? 1 : 0) +
        (g.get(i + 1, j + 1)[0] == 255 ? 1 : 0)
      if (state < 255) {
        if (neighbours == 3) {
          state2 = 255
        } else {
          state2 = state-10
        }
      } else {
        if (neighbours < 2 || neighbours > 3) {
          state2 = 254
        }
      }
      // console.log(state2)
      g2.stroke(state2)
      g2.point(i, j)
    }
  }
  g = g2
  image(g, 0, 0, width, height)
  // noLoop()
}

function mouseDragged() {
  g.stroke(255)
  
  g.point(floor(mouseX * g.width / width),
    floor(mouseY * g.height / height) - 1)

  g.point(floor(mouseX * g.width / width),
    floor(mouseY * g.height / height))

  g.point(floor(mouseX * g.width / width),
    floor(mouseY * g.height / height) + 1)
}

var cells = []

function setup() {
	randomSeed(1)
	frameRate(100)
  colorMode(HSB)
	size = [102*4/3,102]
	cell_width = 4
  createCanvas(size[0]*cell_width, size[1]*cell_width);
	noStroke()
	for(i=0;i<size[0];i++){
		cells.push([])
		for(j=0;j<size[1];j++){
			if(i==0 || j==0){cells[i].push(0)}
			else{cells[i].push(floor(random(0,2)*255))}
			//else{cells[i].push(0)}
		}
	}
	cells[51][51] = 255
	cells[50][51] = 255
	cells[51][50] = 255
	cells[52][51] = 255
	cells[50][52] = 255
	cells[52][52] = 255
}

function draw() {
	// draw
	for(i=1;i<size[0]-1;i++){
		for(j=1;j<size[1]-1;j++){
			fill(cells[i][j],256,cells[i][j]/2+128)
			rect(i*cell_width, j*cell_width, cell_width, cell_width)
		}
	}

	// process
	cells_new = JSON.parse(JSON.stringify(cells))
	for(i=1;i<size[0]-1;i++){
		for(j=1;j<size[1]-1;j++){
			// считаем соседние клекти, в кторых ровно 255
			var near = 0
			if(cells[i-1][j-1]>=255){near += 1}
			if(cells[i-1][j  ]>=255){near += 1}
			if(cells[i-1][j+1]>=255){near += 1}

			if(cells[i  ][j-1]>=255){near += 1}
			if(cells[i  ][j+1]>=255){near += 1}

			if(cells[i+1][j-1]>=255){near += 1}
			if(cells[i+1][j  ]>=255){near += 1}
			if(cells[i+1][j+1]>=255){near += 1}
			// ОСТАЁТСЯ МЁРТВОЙ
			// уменьшаем значениеa
			if(cells[i][j] < 255){cells_new[i][j] -= 10}
			// УМИРАЕТ
			// если  мало клеточек, умирает (254)
			if(cells[i][j] >= 255 && (near < 2 || near > 3)){cells_new[i][j] = 254}
			// РОЖДАЕТСЯ
			if(near == 3){cells_new[i][j] = 255}
		}
	}
	cells = cells_new
}

function mouseClicked(){
//	saveFrames("life.png","png")
}