<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://androman.pro/wp-content/themes/androman/assets/feed.xsl?ver=0.9.4" type="text/xsl"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Canvas &#8212; ANDROMAN.PRO</title>
	<atom:link href="https://androman.pro/tag/canvas/feed/" rel="self" type="application/rss+xml" />
	<link>https://androman.pro</link>
	<description>Независимый 1С-архитектор и AI-автоматизация корпоративных процессов: аудит, PoC на реальных данных, проверка качества и внедрение. · build 0.9.4</description>
	<lastBuildDate>Tue, 05 May 2026 11:57:11 +0000</lastBuildDate>
	<language>ru-RU</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>Когда заниматься 1С становится скучно</title>
		<link>https://androman.pro/2026/04/28/1c-stalo-skuchno/</link>
					<comments>https://androman.pro/2026/04/28/1c-stalo-skuchno/#respond</comments>
		
		<dc:creator><![CDATA[Androman.pro]]></dc:creator>
		<pubDate>Sun, 26 Apr 2026 21:00:00 +0000</pubDate>
				<category><![CDATA[дев-лог]]></category>
		<category><![CDATA[лаборатория]]></category>
		<category><![CDATA[1С]]></category>
		<category><![CDATA[Canvas]]></category>
		<category><![CDATA[creative-code]]></category>
		<category><![CDATA[npm]]></category>
		<category><![CDATA[vibe-coding]]></category>
		<category><![CDATA[WebGL]]></category>
		<guid isPermaLink="false">https://androman.pro/2026/04/27/1c-stalo-skuchno/</guid>

					<description><![CDATA[1С-разработчик, не знающий что такое display:flex, выкатил 7 WebGL/Canvas проектов за 5 недель. Потому что заскучал на ползунке опросника.]]></description>
										<content:encoded><![CDATA[<style>
.lava-orb-demo input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  background: linear-gradient(to right, #3b82f6 0%, #06b6d4 25%, #fbbf24 60%, #ef4444 100%);
  border-radius: 6px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
  outline: none;
  cursor: pointer;
}
.lava-orb-demo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  cursor: grab;
}
.lava-orb-demo input[type="range"]::-moz-range-thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  opacity: 0;
  cursor: grab;
}
</style>
<div class="lava-orb-demo" style="text-align:center;padding:36px 24px;background:rgba(8,20,36,0.6);border:1px solid var(--border);border-radius:12px;margin:32px 0;">
<div style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);letter-spacing:0.25em;margin-bottom:6px;">// LIVE DEMO · ДВА ОРБА</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim);letter-spacing:0.05em;margin-bottom:24px;">дёрни резко — оторвутся от ползунка → сведи вместе — взорвутся</div>
<div style="max-width:480px;margin:0 auto 48px;padding:0 40px;">
    <input type="range" min="0" max="10" value="3" step="1" id="lo-demo-slider-1" style="width:100%;"></p>
<div style="text-align:center;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;"><span id="lo-demo-label-1">холодный</span> · <span id="lo-demo-val-1" style="font-size:18px;">3</span></div>
</p></div>
<div style="max-width:480px;margin:0 auto;padding:0 40px;">
    <input type="range" min="0" max="10" value="7" step="1" id="lo-demo-slider-2" style="width:100%;"></p>
<div style="text-align:center;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;"><span id="lo-demo-label-2">тёплый</span> · <span id="lo-demo-val-2" style="font-size:18px;">7</span></div>
</p></div>
</div>
<script src="https://unpkg.com/@andromanpro/lava-orb@latest/dist/lava-orb.js"></script>
<script>
(function(){
  // value (0-10) → { label, color, glow }
  function temp(v){
    var n = +v;
    if (n <= 1)  return { label: 'мороз',       color: '#3b82f6', glow: 'rgba(59,130,246,0.5)' };
    if (n <= 3)  return { label: 'холодный',    color: '#06b6d4', glow: 'rgba(6,182,212,0.5)'  };
    if (n <= 5)  return { label: 'прохладный',  color: '#84cc16', glow: 'rgba(132,204,22,0.5)' };
    if (n <= 7)  return { label: 'тёплый',      color: '#fbbf24', glow: 'rgba(251,191,36,0.5)' };
    if (n <= 9)  return { label: 'горячий',     color: '#f97316', glow: 'rgba(249,115,22,0.5)' };
    return         { label: 'огонь',         color: '#ef4444', glow: 'rgba(239,68,68,0.5)'  };
  }
  function update(v, labelEl, valEl){
    var t = temp(v);
    valEl.textContent = v;
    labelEl.textContent = t.label;
    labelEl.style.color = t.color;
    valEl.style.color = t.color;
    valEl.style.textShadow = '0 0 12px ' + t.glow;
  }
  function init(){
    var i1 = document.getElementById('lo-demo-slider-1');
    var v1 = document.getElementById('lo-demo-val-1');
    var l1 = document.getElementById('lo-demo-label-1');
    var i2 = document.getElementById('lo-demo-slider-2');
    var v2 = document.getElementById('lo-demo-val-2');
    var l2 = document.getElementById('lo-demo-label-2');
    if (!i1 || !i2 || !window.LavaOrb) { setTimeout(init, 200); return; }
    var group = (typeof LavaOrb.createGroup === 'function')
      ? LavaOrb.createGroup({ name: 'demo' })
      : undefined;
    LavaOrb.attach(i1, { size: 60, group: group, detach: true, onChange: function(v){ update(v, l1, v1); } });
    LavaOrb.attach(i2, { size: 60, group: group, detach: true, onChange: function(v){ update(v, l2, v2); } });
    update(i1.value, l1, v1);
    update(i2.value, l2, v2);
  }
  init();
})();
</script>
<hr>
<p>В общем делаю автоматический воркфлоу по анализу бизнес-процессов в 1С для обследования предприятий. Добавил генерацию опросника — можно выбрать роль или должность, протыкать варианты ответов на вопросы, которые были выявлены ранее на основе анализа конфигурации и документации, и выгрузить всё в JSON. Не нужно тратить время на многочасовые интервью.</p>
<p>Но дело не в этом.</p>
<p>Посмотрел я, с какой скоростью с ИИ получится сделать опросник. Добавил тёмную тему на выбор, контроль неотвеченных вопросов, даже салют при завершении. Всё, можно закрывать.</p>
<p>А потом мой взгляд упал на скучные ползунки выбора приоритетов.</p>
<p>Тут-то всё и заверте…</p>
<hr>
<p>Наступили выходные, а ощущение незавершённости не отпускало. Обычный ползунок от 1 до 10 — это же просто цифра, не показательно.</p>
<p>Пришлось развивать — прототип, другой, третий. Покрутил настройки частиц. Узнал что есть Canvas 2D и WebGL 2 (ну как узнал — просто что они существуют). Добавил DOOM-fire (прям как из культовой игры, ну вы поняли) режим как альтернативный движок пламени. Попробовал сделать взрывы, физику воды, отрывающиеся от ползунка орбы, которые улетают по дуге.</p>
<p>Задача была в том числе — проверить, получится ли через ИИ сделать что-то в незнакомой области. Без глубокого погружения в шейдеры и прочие термины которые я впервые увидел на прошлой неделе.</p>
<p>Получилось.</p>
<p>Я думал — сделаю пару эффектов на ползунок и пойду обратно к опроснику.</p>
<p><strong>Что выросло за 5 недель параллельной работы:</strong></p>
<ul>
<li><strong>npm-библиотека <code>@andromanpro/lava-orb</code></strong> — привязывается к любому <code>&lt;input type="range"&gt;</code> одной строкой. От мороза до огня, взрывов и молний.</li>
<li><strong>2 одностраничные игры</strong> — ORB 2048 (жидкие сливающиеся сферы с процедурной музыкой) и ORB ARKANOID (арканоид где блоки — орбы с физикой волн). Оба работают офлайн одним HTML-файлом.</li>
<li><strong>2 интерактивных редактора</strong> — для тонкой настройки жидкости и огня в реальном времени. С экспортом пресетов.</li>
<li><strong>Библиотека из 7 WebGL2-фонов</strong> — drop-in для любой страницы.</li>
</ul>
<p>Всё это — MIT, на GitHub.</p>
<p><img decoding="async" alt="От холода к огню — один и тот же ползунок, разные значения" src="https://raw.githubusercontent.com/andromanpro/lava-orb/main/article/gifs/02-cold-to-hot.gif"></p>
<p>Ни одного профильного курса по веб-разработке я не проходил. Я вообще не знаю, что такое <code>box-sizing</code> и <code>display: flex</code>)))</p>
<hr>
<p>Помните 2048? Ту простую головоломку с плитками, которая в 2014-м разошлась по всем сторам за несколько недель. Сделал свою версию — с жидкими светящимися сферами вместо цифровых плиток. И залип.</p>
<p><strong>Геймплей:</strong><br />
&#8212; Классическая сетка 4×4, свайпы / стрелки / WASD<br />
&#8212; Ячейки — жидкие metaballs через marching squares, сливаются как капли ртути<br />
&#8212; На высоких значениях — процедурный огонь частицами с glow и затуханием<br />
&#8212; При 2048 — <strong>supernova</strong>: space warp, chromatic aberration, 250 частиц, тряска камеры<br />
&#8212; Игра продолжается — 4096, 8192, логотип подхватывает</p>
<p><strong>Звук:</strong><br />
8 процедурных треков через Web Audio API, никаких mp3. Oscillator + filter + reverb синтезируются в браузере. Адаптивный темп — чем больше ячеек, тем быстрее.</p>
<p><strong>Рендеринг:</strong><br />
WebGL2 с Canvas2D fallback. 4 фона на выбор (Cyberpunk / Space / Dark / Synthwave). RU/EN локализация.</p>
<p><strong>Бот / Autoplay</strong> — запускаешь, смотришь как играет сам. Максимум набирает <strong>65 536</strong> (16 слияний — дальше на сетке 4×4 места нет, но есть настройка для большей сетки!).</p>
<p>Для СДВГ-шников — идеальная сенсорная подкормка. Запускаешь на втором мониторе или в углу экрана, свернул — периферическое зрение ловит постоянное мельтешение жидких сфер, мозгу хорошо, на основной задаче сидишь ровнее.</p>
<p>Режим отладки оставил прямо в сборке — FPS, хитбоксы, статистика. Не стал прятать от прода, пусть смотрит кто хочет.</p>
<p>Один файл <code>Orb-2048.html</code> ~330 KB. Скачал на телефон в самолёт — играешь офлайн.</p>
<div class="game-embed" data-src="https://andromanpro.github.io/orb-2048/" data-label="ЗАПУСТИТЬ ORB 2048" style="position:relative;cursor:pointer;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#030712;margin:24px 0;">
  <img decoding="async" src="https://raw.githubusercontent.com/andromanpro/orb-2048/main/media/gameplay1.gif" alt="ORB 2048 gameplay" style="display:block;width:100%;height:auto;"></p>
<div class="game-embed-overlay" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,7,18,0.55);transition:background 0.2s;">
    <button type="button" style="background:var(--cyan);color:#030712;border:none;padding:14px 28px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;border-radius:4px;cursor:pointer;letter-spacing:0.15em;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/25b6.png" alt="▶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> ЗАПУСТИТЬ ORB 2048</button>
  </div>
</div>
<p><strong>Live:</strong> <a href="https://andromanpro.github.io/orb-2048/">andromanpro.github.io/orb-2048</a></p>
<hr>
<p>Если 2048 — про «плавное слияние», то арканоид — про «разрушение». Идея: блоки — это не кубики, а светящиеся орбы-капсулы с жидкостью. Она реагирует на удар волной, а при разрушении выливается вниз, передавая волну соседям.</p>
<p>Так и сделал.</p>
<p><strong>Геймплей:</strong><br />
&#8212; 15 уровней, каждый со своей темой, музыкой и фоном<br />
&#8212; 9 типов орбов — Fire, Ice, Water, Earth, Lava, Steel, Gold, TNT, Rainbow (у каждого своя физика и звук удара)<br />
&#8212; 8 power-up — расширение/сужение платформы, огненный шар, мультишар, прилипание, лазерные турели, жизнь, замедление времени<br />
&#8212; Комбо-система и локальная таблица рекордов</p>
<p><strong>Технологии:</strong><br />
&#8212; WebGL2 SDF-шейдер для орбов — круглый SDF, 2 слоя жидкости с Catmull-Rom интерполяцией, спекулярный блик<br />
&#8212; Verlet 6-колоночная пружинная симуляция волн<br />
&#8212; Процедурная музыка на каждый уровень</p>
<p><strong>Тюнинг шарика:</strong><br />
Тип хвоста (FIRE / LAVA / PLASMA / ICE), длина S/M/L, размер S/M/L. Превью шарика в настройках — живая анимация на весь экран, клик для запуска.</p>
<p><strong>Бот</strong> со скоростью ×2.5. Прицеливается в конкретные орбы, проходит уровни сам. Можно включить и бесконечный режим — уровни продолжают генерироваться сверх 15 штук, бот разбивает бесконечно. Играет лучше меня.</p>
<p>Запустил бота в бесконечном режиме, свернул окно в угол — и пока работаешь в основном, боковым зрением ловишь как шарик дробит орбы, жидкость выливается, комбо растут.</p>
<p>Режим отладки тоже оставил в сборке — FPS, хитбоксы, прыжки между уровнями через <code>[</code> и <code>]</code>. Dev-инструменты не прятал.</p>
<p><strong>97 unit-тестов</strong> встроенных в <code>game.js</code>. Я сам не представлял, что в браузерной игре буду их писать. Но если разрабатывать <strong>с</strong> ИИ — приходится проверять каждый шаг.</p>
<p>Один файл ~225 KB, работает офлайн.</p>
<div class="game-embed" data-src="https://andromanpro.github.io/orb-arkanoid/" data-label="ЗАПУСТИТЬ ORB ARKANOID" style="position:relative;cursor:pointer;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#030712;margin:24px 0;">
  <img decoding="async" src="https://raw.githubusercontent.com/andromanpro/orb-arkanoid/main/media/gameplay.gif" alt="ORB ARKANOID gameplay" style="display:block;width:100%;height:auto;"></p>
<div class="game-embed-overlay" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,7,18,0.55);transition:background 0.2s;">
    <button type="button" style="background:var(--cyan);color:#030712;border:none;padding:14px 28px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;border-radius:4px;cursor:pointer;letter-spacing:0.15em;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/25b6.png" alt="▶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> ЗАПУСТИТЬ ORB ARKANOID</button>
  </div>
</div>
<p><strong>Live:</strong> <a href="https://andromanpro.github.io/orb-arkanoid/">andromanpro.github.io/orb-arkanoid</a></p>
<p><strong>Важный юридический момент.</strong> Arkanoid — зарегистрированная торговая марка Taito с 1986 года (легендарная японская компания, сейчас в составе Square Enix). Моя игра называется ORB ARKANOID чисто как дань уважения жанру — пока это open-source прикол, никто не придёт.</p>
<p>Но если я начну рубить с этого капусту — Taito быстро найдёт меня через юристов. Код можно форкать (MIT разрешает), но имя «Arkanoid» — не моё чтобы его дарить. Для коммерческого форка придётся переименовать в что-то нейтральное вроде <strong>ORB BREAKOUT</strong> (слово «breakout» — общий жанр, не товарный знак), поменять логотип — и тогда можно идти в сторы.</p>
<p>Это к вопросу «а можно я возьму и продам» — в принципе можно, но с переименованием.</p>
<hr>
<p>Решил посчитать — сколько я реально на это потратил.</p>
<p>Прошёлся по логам сессий Claude Code — там у каждого сообщения timestamp. Если между сообщениями меньше 2 минут — это активная работа. Больше 2 минут — отошёл или задумался без ИИ.</p>
<p><strong>Итог: 41 час активного общения. На 7 артефактов, 40 981 строку кода.</strong></p>
<p>Для сравнения, 1С-разработчику без веб-опыта (это я) без ИИ на это ушло бы:<br />
&#8212; 3 месяца на изучение стека (HTML / CSS / JS / Canvas2D / WebGL2 / WebAudio)<br />
&#8212; Ещё ~6 месяцев на реализацию</p>
<p>Грубая оценка — около 8 месяцев full-time вместо 5 недель коротких периодических сессий. Не научная цифра, просто мой внутренний «сколько бы я на это убил, если бы шёл один».</p>
<p>Ускорение не в «ИИ пишет код за тебя». Оно в том, что ИИ убирает <strong>барьер незнания</strong>. Можешь формулировать задачу словами и сразу получать рабочий прототип — вместо того чтобы тонуть в документации к шейдерам, которая предполагает, что ты уже знаешь что такое SDF, metaballs и Verlet integration.</p>
<p>Для меня это самая сильная зона ИИ: незнакомые специализированные домены, где сначала нужно месяцами накапливать словарь, а только потом начинать делать.</p>
<script>
(function(){
  document.querySelectorAll('.game-embed').forEach(function(el){
    var overlay = el.querySelector('.game-embed-overlay');
    if (overlay) {
      el.addEventListener('mouseenter', function(){ overlay.style.background = 'rgba(3,7,18,0.25)'; });
      el.addEventListener('mouseleave', function(){ overlay.style.background = 'rgba(3,7,18,0.55)'; });
    }
    el.addEventListener('click', function(){
      var src = el.dataset.src;
      if (!src) return;
      var iframe = document.createElement('iframe');
      iframe.src = src;
      iframe.setAttribute('allow', 'autoplay; fullscreen');
      iframe.setAttribute('loading', 'lazy');
      iframe.style.cssText = 'display:block;width:100%;height:700px;border:none;';
      el.innerHTML = '';
      el.appendChild(iframe);
      el.style.cursor = 'default';
    });
  });
})();
</script>


<p style="margin-top:1em;font-family:monospace;font-size:0.9em;">→ <a href="https://androman.pro/2026/04/28/1c-stalo-skuchno/">открыть на androman.pro</a></p>]]></content:encoded>
					
					<wfw:commentRss>https://androman.pro/2026/04/28/1c-stalo-skuchno/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
