Как стать автором
Обновить

Комментарии 55

Очень наглядно выглядит. :) Молодцы!

Спасибо! :)

Оно как-то автономно может работать? Чтобы свой код посмотреть.

Свой код смотреть не получится. Пока можно смотреть только конкретные алгоритмы, которые мы поддержали.

Визуализация произвольного кода — отдельная большая задача.

Вы изобрели debug?

Продвинутый дебаггер с перемещением во времени, комментариями к происходящему и визуализацией.

Т.е. VisuAlgo.

Не сношайте себе мозги. Чтоб научиться писать код, нужно писать код. И в процессе работы мозг сам создает нужные связи, ассоциации, абстрактные сущности, модели, которыми мы в последующем манипулируем. То что описано в статье, конечно интересно, но вряд ли научит программированию. Человек не машина. Изучите нейронные сети и поймете всю суть.

Человек не машина.

Человек не машина, и поэтому мы сделали так, чтобы алгоритм человеку было проще представить и воспринять. Чтобы ассоциации и концептуальные модели в голове возникали быстрее мы визуализируем состояние алгоритма и рассказываем о нем на человеческом языке.

Но алгоритм — это не про код. Алгоритм — это про способ решения задачи, а только потом это перекладывается в код на любом из языков. Учиться по коду больше похоже на реверсинженеринг. Понимаю когда такая задача стоит при разборе нового вируса или при написании кейгенов, но не при изучении алгоритмов.
Но это только про позиционирование, а сам проект классный и позволяет заменить учителя в умении дебажить.
Согласен! Выглядит супер, сделано классно. Но смотреть код не возможно. Но наверное надо добавить блок схему. Блок схема — можно сказать это мультиязычный (крос) код)
И начинать надо с теории. Это ведь обучение? Тогда сначала теория, потом блок-схема, потом код.
Программист который доходит в своей практике до хеш таблиц уже может из теории понять что происходит.
+ наверное не хватает кода отлова момента коллизии, типа if «ячейка не пуста» и мы туда хотим писать — колизия!
Удачи!

Возможно сложно это воспринять, так как это что-то новое. У всех разное восприятие, невозможно для всех использовать одни и те же методы. Но я думаю найдутся люди, кого это заинтересует. Главное не останавливаться и продолжать работу!)

Мне кажется если вы хотите просто представить и воспринять именно сами алгоритмы, то возьмите вещи созданные для обучения детей этим самым алгоритмам. Уж там всё отлично представлено и визуализировано.

Даже в те относительно древние времена когда я был ребёнком уже были всякие «черепашки» и «роботы», которых нужно было проводить по лабиринтам при помощи алгоритмов. И это великолепно работало. Неужели сейчас нет ничего подобного?
«Я» и «мой мозг» с этой позиции — не одно и то же?
Если говорить на примитивном уровне, то можно и так сказать.
Но я разделяю эти понятия, так как мозг — это орган, который рулит парадом, обрабатывая информацию со всех органов чувств, а также сопоставляя ее с уже имеющейся информацией. И прежде чем информация дойдет до нужного места и сохранится там, она пройдет через защитные механизмы. Для того чтоб всякий хлам в голове не хранился. Но все же это происходит и так появляются ложные убеждения.
«Я» это сознательная часть себя, хотя по природе своей непостижима и неосознаваема.
«Я» является посредником между внешним и внутренним миром и не может напрямую участвовать в процессе формирования какой-либо информации в мозге, а лишь дает ему сигналы. Почему я отделяю «Я» от «мозга»? Потому что непонятно, то ли «Я» это сгусток нейронов в какой-то области мозга, либо оно вообще находится где-то в космосе, либо еще что-то. И мнений много по этому поводу, а истина вряд ли кому-то известна.
Потому что непонятно, то ли «Я» это сгусток нейронов в какой-то области мозга, либо оно вообще находится где-то в космосе, либо еще что-то. И мнений много по этому поводу, а истина вряд ли кому-то известна.


Сознание это эмерджентное свойство нервной системы, в частности, в этом принимает участие ее орган под названием «головной мозг». Все остальное это не нужные сущности которые вы плодите, отрезаем это согласно бритве Оккама.

а где можно подробнее почитать об этом?

Мозг — скопление нейронов, личность — результат взаимодействия этих самых нейронов. Если приводить аналогии, то «мой мозг» — это hardware, а «я» — это software.
вы против интерфейсов, которые лучше обьясняют суть происходящего?
может тогда пересядете с графического интерфейса в командную строку мсдоса?

А прикольно было бы всего Кнута так разрисовать.


Если серьезно, то добавить бы контекста про представленные алгоритмы. Скажем, в вашей реализации коллизии разрешаются переносом в соседнюю незанятую ячейку, но об этом можно только догадаться по самому коду. Ведь это не единственный способ. Нашел неприметную кнопку "Теория".

Тоже пытаюсь придумать как визуализировать алгоритмы, но лучше анимации пока не видел и не придумал. Код вообще выглядит здесь неуместным. Поняв алгоритм можно написать его в коде любого нужного языка — у вас выбор языка планируется?

На мой взгляд, потеть должна машина, а человек учиться, не выворачивая мозги наизнанку.

Мне всегда казалось, что любое обучение это всегда тяжело. Как говорил препод по матану в университете: "Вы думаете мне дается легко то что я вам преподаю? Я на это потратил 30 лет жизни и не все они были прекрасны, но мне нравится это делать, нравится преодолевать собственное непонимание."

Именно так, преодоление собственной лени и осознание результата обучения чему-то новому. Мне кажется что это происходит только у тех, кто уже достаточно опытен, и понимает сам процесс обучения, а у более молодых есть открытость к познанию, которая постепенно атрофируется с возрастом или временем.
Они пытаются заставить нас думать как компьютер, а не наоборот — подчинить железо нашим потребностям. Чтобы понять, как работает код алгоритма, нужно представлять, как машина будет его выполнять. Я решил, что хочу уйти от этого подхода.

Любопытно, что функциональное программирование в целом пытается сделать то же самое, но другим путем: отказаться от конкретной реализации и идти по пути абстрактного математического языка (лямбда счисление, теория категорий, комбинаторика и т.д.).

Отладчик с возможностью шага назад это интересно.
Связь команд компьютера и естественного языка — полезно.
Вот только исходный посыл в статье абсолютно неверный


Чтобы понять как они работают, приходится изучать их код и представлять, как компьютер будет его выполнять. Это странно — почему мы должны учиться думать как компьютер, вместо того, чтобы заставить его помогать нам учиться?

Чтобы научиться программировать, человеку неизбежно придется понять логику его работы.
Мне пришлось сделать отдельные упражнения для того, чтобы ученик тренировался представлять выполнение программы. Без этого ученики стопорятся где-то в районе изучения циклов и не растут дальше.


Ну и я в целом не одобряю подход с "анимацией для объяснения". После их просмотра люди думают "ну вроде понятно". А если попросишь написать, то утонет в тысяче нюансов реализации. В коде важно не только то, что написано, но и то, что не написано.

Оно самое, но там нет хеш-кодов. Видимо, автор решил дополнить.

Очень круто

Вангую, что сейчас разойдется как паттерн во всякие онлайн школы )

Прекрасно! А ваш движок позволяет сделать следующее:
1. Я остановился на 20-ом шаге из 50.
2. Хочу поменять входные параметры и посмотреть, как изменится результат на этом шаге.
Сейчас меня сразу перебрасывает в конец, а я хочу наблюдать (по возможности) промежуточный результат.
Если добавить div с определённой начальной позицией, и потом сразу же поменять координаты на конечные, то браузер склеит эти два изменения в одно. Div сразу окажется в конечной позиции без анимации. Чтобы такое не происходило, приходится вставлять задержку в два фрейма анимации с помощью window.requestAnimationFrame().

window.requestAnimationFrame() не гарантирует что анимация запустится.
Чтобы не городить костыли можно использовать reflow — то что вызовет перерассчет блока. Например, можно обратиться к свойству element.offsetHeight;

Применяется так:
element.style.height = '0';
element.offsetHeight; // reflow
element.style.height = '100px';

Про reflow знаю. Если не ошибаюсь, это тяжелая штука, которую по 10 раз в секунду не позовешь. Кроме того, я сталкивался с тем, что в каких-то ситуациях ее браузеры тоже оптимизируют.

Молодцы, больше алгоритмов и их визуализации!
Удачи!

Большое спасибо, как раз искал что то подобное!

Спорно, если говорить про алгоритм. Но как продвинутый дебаггер, который «проигрывает» код Step by Step с короткой задержкой — такая штука может быть полезна для изучения чужого кода в debug mode.
спасибо Вам огромное, за такую идею, может со временем можно будет изучать программирование с Вашей помощью…
сам давно пробую изучаю, но склад ума устаёт наверное, а вот недавно всего за месяц начал программировать на CFC, так как он наглядно блочен, вот бы для создания программ был бы такой аналог графического языка программирования
Это позволяет избежать совсем сложного императивного кода с запутанным состоянием и ручными вычислениями. Получается тоже не просто, и в итоге анимациями заведует огромный класс на 1000 строк.

Я потрясен этим кодом и поражен вашим упорством

В ИТМО когда-то писали много визуализаторов для разных алгоритмов. Сейчас это всё осталось только в Wayback Machine, так что запустить их теперь вряд ли получится.

Очень жаль. Есть хотя бы скриншот как это выглядело?

По-моему, тут визуализируются не алгоритмы, а код программы. Что, в свою очередь, кажется довольно-таки бесполезным без низкоуровневых деталей вроде доступа по нулевым указателям, выходов за границы массивов и прочих машинных прелестей, делающих нашу жизнь увлекательной.

Когда деятели на ютубе рисуют на доске или вытанцовывают состояния пузырьковой сортировки, они не имеют в виду таким образом на ходу разрабатывать её алгоритм.
В сортировке пузырьком ошибка:
if swapped:                            
    break

Должно быть
if not swapped:
    break
Я не раз обращал внимание, что при восприятии на слух объяснения алгоритмов и доказательств теорем через несколько минут, как говорится, теряется нить, и всё остальное время лекции пропадает почти даром. И если написание алгоритма на доске заменить показами слайдов, то это сильно сэкономит время. Поэтому упор надо делать на объяснение общей идеи, а детали можно додумать и потом при самостоятельной работе. Тогда лучше запомнится! Выгоднее всего запоминать идеи. И запоминание происходит лучше, когда задействуются эмоции и образы. Помню, как одна советская учительница нем. языка говорила: «Der Lappen», — и шлёпала тряпкой для вытирания доски по столу. Поэтому хочется попробовать сделать изучение алгоритмов в виде игры на каком-нибудь игровом движке.
Простите, а что никто не читал «Структуры данных и алгоритмы JAVA» Лафоре? Где к каждому алгоритму сделан интерактивный java-апплет (загрузка которого доступна с сайта издательства, в данном случае издательства Питер).

Замечательная инициатива, молодцы!

Оставлю свое пожелание. Из всех тем про алгоритмы и структуры данных хуже всего у меня получилось усвоить динамическое программирование и рекурентное соотношение (в частности, задачу о рюкзаке). Если когда-нибудь доберетесь до такого, то это мне бы очень помогло.

Попробуйте поискать это название на этой странице.

Большинство учителей программирования начинают с пропедевтического курса. То есть изучают по классике блок-схемы или новомодный SCRATCH. Благодаря этому у детей на образах связывается действие и формальная его команда. Что очень положительно влияет уже на изучение конкретного языка программирования.

К сожалению, уже в процессе изучения языка программирования они часто сталкиваются с непониманием работы алгоритмической конструкции. Например, условие проверяется вне цикла или в нем. Второй цикл вложенный или последовательный. Эта команда подчиняться или нет. Вы можете сказать, что надо учить скобки и отступы, но на то это и этап изучения языка программирования и детям не хватает опыта конструирования. И вот тут было бы классно обращать алгоритмическую конструкцию с языка программирования обратно в блочный или графический вид.

Какая разница? танцем рисованием… ты все равно видиш код и все равно думаеш что произойдет.
А вот мгновенно видеть результат!!! это другое, это тема!
Вы не правильно поняли этого мужика и сами запутались, теперь других путаете.
Вот когда в IDE? любом мы сразу, мговенно будем видеть результат каждого клика, или хотябы каждого знака или элемента… без никаких эхо или еще чего, то тогда и будет что сказал тот чувак.
ты когда вырезаешь из дерева статуэтку ты сразу ее видишь, каждый срез.
даже убираясь на столе или ремонтируя агрегат машины ты видишь, и видишь созидаешь или косячишь.
Вот смысл сказанного.

Чтобы такое видеть, придумали автоматические тесты.

Как тесты позволяют моментально увидеть результат? Вот у меня персонаж прошёл сквозь стену. Я останавливаю время и отматываю назад. Ловлю момент, когда персонаж касается стены и... вырезаю, удаляю дальнейшую историю. Среда разработки удивлена и следит что будет далее.

А далее я запускаю время и снова двигаю персонажа туда же или в похожую стену - он снова проходит как обычно. И я снова останавливаю время, отматываю, вырезаю... Случился повтор - очень важный для среды разработки сигнал, т.к. это паттерн, шаблон. Похоже, человек не хочет, чтобы этот объект проходил через вот такие линии.

Я проверяю - снова иду на стену, и при касании персонажа стены всё останавливается - среда спрашивает продолжить ли движение. Ответ "нет" вызывает в нём создание кода коллизий.

Читается текст выше дольше, чем происходит "обучение" такой системы - несколько секунд.

Человеку незачем видеть ни кода, ни чисел, типичного дебага, ни борьбы с языком программирования. Проявился баг? Отматываешь время и "удаляешь" его.

Изучаю такую интересную идею и пока вижу, что не требуется не то что мощный универсальный ИИ, но даже типичная современная прожорливая нейросеть.

За такой быстрой обратной связью явно будущее.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.