Вдохновившись статьёй, посвящённой написанию клеточного автомата на Godot и экспорту проекта в HTML, хочу показать вам, как использовать для этих целей модерновый онлайн-движок p5py. Код живой не только потому, что мы про игру «Жизнь», но и благодаря способу его разработки и запуска. Всё очень живо!
Чёрный плащ
TL;DR: финальный проект вот здесь. Только кликните, и он появится.
В чем магия?
Мы получим похожий результат, но намного быстрее и увлекательнее. Нам не придётся ничего настраивать и скачивать, что отлично подходит для новичков. Просто переходите по ссылкам в статье и запускайте рабочие примеры.
Экспорт в HTML нам тоже не понадобится, поскольку код на Python, благодаря
p5pyи онлайн-IDE, запускается прямо в браузере.Более того, если у вас возникнет творческая идея, как улучшить код, и вы её реализуете, то: а) сразу увидите результат, б) нажав «Сохранить», получите готовую ссылку, которой можно поделиться с друзьями или в комментариях.
p5py
Это адаптация популярного Processing (p5.js) для Python. Я написал его для проведения занятий в детских кружках по программированию и для книги, про которую уже рассказывал в статье «Как я написал книгу для детей: «Мама, не отвлекай. Я Python учу!».
Для него же разработана и онлайн-IDE, которая запускается по всем ссылкам в этой статье. Там всего две кнопки: «Запустить» и «Сохранить». Не перепутаете.
Получаем
Вместо GDScript — самый стандартный Python (+модуль
p5py).Не нужен отдельный экспорт — результат сразу доступен по ссылке онлайн.
Живая песочница — код автоматически перезапускается в живом режиме по мере его написания (по желанию можно отключить).
Размер не гигабайт, а 4,5 мегабайта.
А был он в Жизнь влюбленный...
Воссоздадим «Игру Жизнь» Конвея — клеточный автомат, способный генерировать сложные паттерны, имитирующие жизнь.
Исходный код на Godot:
extends Node2D
@export var cell_scene : PackedScene
var row_count : int = 45
var column_count : int = 80
var cell_width: int = 15
var cell_matrix: Array = []
var previous_cell_states: Array = []
var is_game_running: bool = false
var is_interactive_mode: bool = falseНаш код на p5py:
row_count = 45
column_count = 80
cell_width = 15Почему такой короткий? А потому, потому, потому...
...что мы используем проектно-ориентированный подход и не пишем строчки кода, которые не пригодятся на следующем шаге. Зачем их держать в голове? Только шум создают. А пока что, всё, что нам нужно знать, — это размер поля 45х80 и размер ячейки 15х15.
Полем, полем, полем...
Белым, белым сделаем пустое поле из клеточек.
from p5py import *
run()
row_count = 45
column_count = 80
cell_width = 15
size(column_count * cell_width, row_count * cell_width)
def draw():
background(255) # Белый фон
draw_grid()
def draw_grid():
stroke(0) # Черные линии сетки
for x in range(column_count + 1):
line(x * cell_width, 0, x * cell_width, row_count * cell_width)
for y in range(row_count + 1):
line(0, y * cell_width, column_count * cell_width, y * cell_width)
# Здесь мы просто отображаем пустое поле
Нажмите здесь, чтобы запустить. Если вдруг выдало ошибку, напишите, пожалуйста, в личку. Версия всё ещё 0.XXX, могут быть баги.
Поэкспериментируйте! Поменяйте цвет фона и линий. Например,
background(200, 100, 0)— это оттенок оранжевого, аstroke(255, 120, 0)— оттенок красного.
Случай решит, как заполнить ячейки
Улучшим оригинальный код:
Сразу заполняем поле случайными значениями — так игроку интереснее наблюдать за процессом. При запуске сразу что-то происходит.
А так как в online-IDE
p5pyлегко нажать крестик, закрыв программу, и сразу же нажатьRUN, снова её запустив, — можно играть с разными стартовыми условиями.
# Инициализация состояния клеток случайными значениями
cell_matrix = [[rand(0, 15) <= 1 for _ in range(row_count)] for _ in range(column_count)]
def draw_cells():
for col in range(column_count):
for row in range(row_count):
if cell_matrix[col][row]:
fill(0) # Черный цвет для живых клеток
else:
no_fill() # Без заливки для мертвых клеток
rect(col * cell_width, row * cell_width, cell_width, cell_width)
Вот так получилось. Здесь я сделал ячейки жёлтого цвета. Можете поэкспериментировать с кодом вживую, например заменив число 15 на другое, чтобы изменить плотность заполнения поля.
Подготовку закончили, теперь у нас есть и сетка, и клетки, случайным образом раскрашенные.
Самое время перейти к...
Обновлению поля. Игра не по правилам
Добавим функцию update_game_state(), которая просто пройдёт по каждой клетке поля и запишет в неё новый статус. Который узнает, в свою очередь, у функции get_next_state().
def update_game_state():
global cell_matrix
for col in range(column_count):
for row in range(row_count):
cell_matrix[col][row] = get_next_state(col, row)
def get_next_state(column, row):
return rand(0, 15) <= 1
А вот и ссылка на поиграться.
Да-да, пока игра не по правилам. Мы используем mock (заглушку), чтобы побыстрее увидеть результат и было интересно по шагам улучшать программу.
А теперь перейдем к...
Игровым правилам
А вот и самое важное — создание правил для игры «Жизнь». Пишем функции для подсчёта живых соседей и определения будущего состояния каждой клетки. Это классические правила Конвея: клетка становится живой, если у неё ровно три живых соседних клетки, и остаётся живой, если у неё две или три живых соседних клетки.
Исходный код на Godot:
func get_count_of_alive_neighbours(column, row):
var count = 0
for x in range(-1, 2):
for y in range(-1, 2):
if not (x == 0 and y == 0):
var neighbor_column = column + x
var neighbor_row = row + y
if neighbor_column >= 0 and neighbor_column < column_count and neighbor_row >= 0 and neighbor_row < row_count:
if previous_cell_states[neighbor_column][neighbor_row]:
count += 1
return count
func get_next_state(column, row):
var current = previous_cell_states[column][row]
var neighbours_alive = get_count_of_alive_neighbours(column, row)
if current:
return neighbours_alive == 2 or neighbours_alive == 3
else:
return neighbours_alive == 3Практически такой же на p5py:
def get_next_state(column, row):
alive_neighbors = count_alive_neighbors(column, row)
current = previous_cell_states[column][row]
if current:
# Cell is alive, it stays alive if it has 2 or 3 neighbors
return alive_neighbors == 2 or alive_neighbors == 3
else:
# Cell is dead, it becomes alive if it has exactly 3 neighbors
return alive_neighbors == 3
def count_alive_neighbors(column, row):
count = 0
for x in range(-1, 2):
for y in range(-1, 2):
if x == 0 and y == 0:
continue # Skip the cell itself
neighbor_col = column + x
neighbor_row = row + y
if 0 <= neighbor_col < column_count and 0 <= neighbor_row < row_count:
if previous_cell_states[neighbor_col][neighbor_row]:
count += 1
return countНо и функцию update_game_state() нам тоже придётся немного поменять, чтобы сохранять предыдущее значение ячеек во временный массив.
Как думаете, для чего этот шаг?
def update_game_state():
global previous_cell_states, cell_matrix
# Copy current state to previous
for col in range(column_count):
for row in range(row_count):
previous_cell_states[col][row] = cell_matrix[col][row]
# Apply the Game of Life rules
for col in range(column_count):
for row in range(row_count):
cell_matrix[col][row] = get_next_state(col, row)А если хотите больше Python-стиля, то замените на previous_cell_states = [row.copy() for row in cell_matrix].
Парам-пам-пам
Ну вот и всё! Вот он, наш готовый код.
NoDB: баг или фича
Вы уже заметили, что ссылка на наш код длинная, как предложения в книгах Хулио Кортасара. Но так задумано. Это современный подход NoDB (точнее, URL-based storage), когда небольшие программы немного сжимаются и сохраняются прямо в URL. Небольшие, поручик, я сказал, небольшие!
Вообще, за несколько часов перед публикацией предыдущей статьи сломалась основная база данных, и я временно посадил проект на запасной аэродром NoDB, который был готов раньше. Как появится время, верну сохранение в постоянной базе данных и короткие ссылки.
Добавим интерактивность
В оригинальной статье пользователь мог сам рисовать существ на поле. Давайте сделаем так же на p5py, но только немного улучшим использование исходного кода:
Сразу включим режим «вмешательства». Пусть игрок сможет сразу добавлять новые фигуры:
is_game_running = True.Уберём кнопку включения-выключения этого рисования, так как неясно, зачем она нужна. Только интерфейс перегружает.
Заменим кнопку остановки игры на... автоматическое действие. При нажатии мышки игрок может нарисовать новую фигуру, а игра на это время приостанавливается. Как только игрок отпустит мышку — игра возобновляется. Да, здесь я осознанно жертвую возможностью в паузе нарисовать много фигур сразу, но у нас же демо, а для демо так будет интуитивно понятнее.
Добавим в def draw():
...подсказку:
fill(255, 140)
text_size(20)
text("Вы можете нарисовать фигуру мышкой", 30, 30)…и запуск/остановку игры:
if is_game_running:
update_game_state()
if mouse_is_pressed:
toggle_cell_at_mouse_position()
is_game_running = False
def toggle_cell_at_mouse_position():
col = int(mouse_x / cell_width)
row = int(mouse_y / cell_width)
if 0 <= col < column_count and 0 <= row < row_count:
cell_matrix[col][row] = True
def mouse_released():
global is_game_running
is_game_running = TrueThe end. Рисуйте...
Когда мобайл-друзья со мной
Если вы вдруг читаете эту статью на мобильном и кликнули по одной из ссылок выше, то результат оказался нехороший: поле в исходной статье фиксированной ширины и вылезает за границы. Но наш IDE для p5py адаптирован под мобильные. Давайте сразу поправим код. Просто добавим авторасчёт ширины и высоты под текущий экран. Заменим это:
cell_width = 15
column_count = 80
row_count = 45
size(column_count * cell_width, row_count * cell_width)на это:
cell_width = 15
# Проверяем условия для установки размеров окна
# Предположим, что 600 — это ширина типичного мобильного устройства
if display_width < 600:
w = display_width
h = display_height * 2 // 3
else:
w = display_width * 2 // 4
h = display_height * 2 // 4
# Рассчитываем количество строк и столбцов
column_count = w // cell_width
row_count = h // cell_width
w = column_count * cell_width
h = row_count * cell_width
size(w, h)
И вот, теперь можно кликать и с мобильных: сюда.
Что можно сделать еще?
Давайте улучшим usability.
Следующим шагом может быть простая доработка: «Сделать так, чтобы надпись исчезла после первого нажатия мышкой. Ведь пользователь уже прочитал инструкцию и выполнил необходимые действия».
Тому, кто только начал изучать Python, может быть интересно сделать такое задание самостоятельно. При желании делитесь своими решениями и улучшениями в комментариях.
Примечание
Модуль p5py имеет множество ограничений. В отличие от Godot, он не предназначен для больших и средних проектов. Зато хорош для маленьких демонстраций и в учебных целях.
Сообщество. Там, где трудно одному...
Справлюсь вместе с вами. Мини-IDE и p5py получились хорошими и добрыми. Решил потихоньку-понемногу собирать сообщество вокруг p5py. Вот мой старенький и почти пустой Telegram-канал: t.me/p4kids. Попробую собрать заинтересованных учителей, преподавателей и родителей вокруг этой технологии.
