Comments 55
Человек не машина.
Человек не машина, и поэтому мы сделали так, чтобы алгоритм человеку было проще представить и воспринять. Чтобы ассоциации и концептуальные модели в голове возникали быстрее мы визуализируем состояние алгоритма и рассказываем о нем на человеческом языке.
Но это только про позиционирование, а сам проект классный и позволяет заменить учителя в умении дебажить.
И начинать надо с теории. Это ведь обучение? Тогда сначала теория, потом блок-схема, потом код.
Программист который доходит в своей практике до хеш таблиц уже может из теории понять что происходит.
+ наверное не хватает кода отлова момента коллизии, типа if «ячейка не пуста» и мы туда хотим писать — колизия!
Удачи!
Даже в те относительно древние времена когда я был ребёнком уже были всякие «черепашки» и «роботы», которых нужно было проводить по лабиринтам при помощи алгоритмов. И это великолепно работало. Неужели сейчас нет ничего подобного?
Потому что непонятно, то ли «Я» это сгусток нейронов в какой-то области мозга, либо оно вообще находится где-то в космосе, либо еще что-то. И мнений много по этому поводу, а истина вряд ли кому-то известна.
Сознание это эмерджентное свойство нервной системы, в частности, в этом принимает участие ее орган под названием «головной мозг». Все остальное это не нужные сущности которые вы плодите, отрезаем это согласно бритве Оккама.
может тогда пересядете с графического интерфейса в командную строку мсдоса?
А прикольно было бы всего Кнута так разрисовать.
Если серьезно, то добавить бы контекста про представленные алгоритмы. Скажем, в вашей реализации коллизии разрешаются переносом в соседнюю незанятую ячейку, но об этом можно только догадаться по самому коду. Ведь это не единственный способ. Нашел неприметную кнопку "Теория".
Тоже пытаюсь придумать как визуализировать алгоритмы, но лучше анимации пока не видел и не придумал. Код вообще выглядит здесь неуместным. Поняв алгоритм можно написать его в коде любого нужного языка — у вас выбор языка планируется?
На мой взгляд, потеть должна машина, а человек учиться, не выворачивая мозги наизнанку.
Мне всегда казалось, что любое обучение это всегда тяжело. Как говорил препод по матану в университете: "Вы думаете мне дается легко то что я вам преподаю? Я на это потратил 30 лет жизни и не все они были прекрасны, но мне нравится это делать, нравится преодолевать собственное непонимание."
Они пытаются заставить нас думать как компьютер, а не наоборот — подчинить железо нашим потребностям. Чтобы понять, как работает код алгоритма, нужно представлять, как машина будет его выполнять. Я решил, что хочу уйти от этого подхода.
Любопытно, что функциональное программирование в целом пытается сделать то же самое, но другим путем: отказаться от конкретной реализации и идти по пути абстрактного математического языка (лямбда счисление, теория категорий, комбинаторика и т.д.).
Отладчик с возможностью шага назад это интересно.
Связь команд компьютера и естественного языка — полезно.
Вот только исходный посыл в статье абсолютно неверный
Чтобы понять как они работают, приходится изучать их код и представлять, как компьютер будет его выполнять. Это странно — почему мы должны учиться думать как компьютер, вместо того, чтобы заставить его помогать нам учиться?
Чтобы научиться программировать, человеку неизбежно придется понять логику его работы.
Мне пришлось сделать отдельные упражнения для того, чтобы ученик тренировался представлять выполнение программы. Без этого ученики стопорятся где-то в районе изучения циклов и не растут дальше.
Ну и я в целом не одобряю подход с "анимацией для объяснения". После их просмотра люди думают "ну вроде понятно". А если попросишь написать, то утонет в тысяче нюансов реализации. В коде важно не только то, что написано, но и то, что не написано.
Есть такой ресурс по визуализации алгоритмов https://visualgo.net/ru
Очень круто
Вангую, что сейчас разойдется как паттерн во всякие онлайн школы )
Чем то напомнило проект который я писал, что-бы визуализировать решение Ханойской башни
https://github.com/anatoly314/HanoiTower
1. Я остановился на 20-ом шаге из 50.
2. Хочу поменять входные параметры и посмотреть, как изменится результат на этом шаге.
Сейчас меня сразу перебрасывает в конец, а я хочу наблюдать (по возможности) промежуточный результат.
Если добавить div с определённой начальной позицией, и потом сразу же поменять координаты на конечные, то браузер склеит эти два изменения в одно. Div сразу окажется в конечной позиции без анимации. Чтобы такое не происходило, приходится вставлять задержку в два фрейма анимации с помощью window.requestAnimationFrame().
window.requestAnimationFrame() не гарантирует что анимация запустится.
Чтобы не городить костыли можно использовать reflow — то что вызовет перерассчет блока. Например, можно обратиться к свойству element.offsetHeight;
Применяется так:
element.style.height = '0';
element.offsetHeight; // reflow
element.style.height = '100px';
Удачи!
Большое спасибо, как раз искал что то подобное!
visualgo.net чем не устроил?
сам давно пробую изучаю, но склад ума устаёт наверное, а вот недавно всего за месяц начал программировать на CFC, так как он наглядно блочен, вот бы для создания программ был бы такой аналог графического языка программирования
Это позволяет избежать совсем сложного императивного кода с запутанным состоянием и ручными вычислениями. Получается тоже не просто, и в итоге анимациями заведует огромный класс на 1000 строк.
Я потрясен этим кодом и поражен вашим упорством
Когда деятели на ютубе рисуют на доске или вытанцовывают состояния пузырьковой сортировки, они не имеют в виду таким образом на ходу разрабатывать её алгоритм.
if swapped:
break
Должно быть
if not swapped:
break
Замечательная инициатива, молодцы!
Оставлю свое пожелание. Из всех тем про алгоритмы и структуры данных хуже всего у меня получилось усвоить динамическое программирование и рекурентное соотношение (в частности, задачу о рюкзаке). Если когда-нибудь доберетесь до такого, то это мне бы очень помогло.
Большинство учителей программирования начинают с пропедевтического курса. То есть изучают по классике блок-схемы или новомодный SCRATCH. Благодаря этому у детей на образах связывается действие и формальная его команда. Что очень положительно влияет уже на изучение конкретного языка программирования.
К сожалению, уже в процессе изучения языка программирования они часто сталкиваются с непониманием работы алгоритмической конструкции. Например, условие проверяется вне цикла или в нем. Второй цикл вложенный или последовательный. Эта команда подчиняться или нет. Вы можете сказать, что надо учить скобки и отступы, но на то это и этап изучения языка программирования и детям не хватает опыта конструирования. И вот тут было бы классно обращать алгоритмическую конструкцию с языка программирования обратно в блочный или графический вид.
Классная идея. Спасибо.
А вот мгновенно видеть результат!!! это другое, это тема!
Вы не правильно поняли этого мужика и сами запутались, теперь других путаете.
Вот когда в IDE? любом мы сразу, мговенно будем видеть результат каждого клика, или хотябы каждого знака или элемента… без никаких эхо или еще чего, то тогда и будет что сказал тот чувак.
ты когда вырезаешь из дерева статуэтку ты сразу ее видишь, каждый срез.
даже убираясь на столе или ремонтируя агрегат машины ты видишь, и видишь созидаешь или косячишь.
Вот смысл сказанного.
Чтобы такое видеть, придумали автоматические тесты.
Как тесты позволяют моментально увидеть результат? Вот у меня персонаж прошёл сквозь стену. Я останавливаю время и отматываю назад. Ловлю момент, когда персонаж касается стены и... вырезаю, удаляю дальнейшую историю. Среда разработки удивлена и следит что будет далее.
А далее я запускаю время и снова двигаю персонажа туда же или в похожую стену - он снова проходит как обычно. И я снова останавливаю время, отматываю, вырезаю... Случился повтор - очень важный для среды разработки сигнал, т.к. это паттерн, шаблон. Похоже, человек не хочет, чтобы этот объект проходил через вот такие линии.
Я проверяю - снова иду на стену, и при касании персонажа стены всё останавливается - среда спрашивает продолжить ли движение. Ответ "нет" вызывает в нём создание кода коллизий.
Читается текст выше дольше, чем происходит "обучение" такой системы - несколько секунд.
Человеку незачем видеть ни кода, ни чисел, типичного дебага, ни борьбы с языком программирования. Проявился баг? Отматываешь время и "удаляешь" его.
Изучаю такую интересную идею и пока вижу, что не требуется не то что мощный универсальный ИИ, но даже типичная современная прожорливая нейросеть.
За такой быстрой обратной связью явно будущее.
Как я пытался придумать новый подход к изучению алгоритмов через интерактивные визуализации