GogA Jun 8 2007 at 10:57

Уроки рисования в notepad

1 min

3.7K

Design

+47

110

Comments 110

Vitart Jun 8 2007 at 11:13

Конечно слабо, на такое только китайцы способны. :)

GogA Jun 8 2007 at 11:24

У меня только сомнения есть, реально ли нарисовали так.
То что нарисовать можно - сомнений не возникает.
Код поискал странички - не наткнулся.. надо в китайский/японский знать, чтобы найти.

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

Vitart Jun 8 2007 at 11:26

Так, речь идет о китайцах, а они очень трудолюбивые. :) Похоже на првду.

Archy Jun 8 2007 at 14:50

Интерфейс блокнота и експлорера на японском, так что китайцы тут не при чём...
А то что это не руками сделано - имхо наиболее правдоподобный вариант, т.к. если делать это вручную, то как минимум итераций и ошибок будет больше в разы...

anaheim2by Jun 8 2007 at 15:25

Руками-руками, просто видео потом ускорили

kuil Jun 8 2007 at 21:09

это сделано руками.
Более того, из этой же серии видел, как в паинте была нарисована Мона Лиза. Причем хорошо нарисована. Но в паинте)

Archy Jun 8 2007 at 21:27

Пеинтов и я видел, причём их на youtube довольно много, но одно дело нарисовать в пеинте и совсем другое - создать подобного качества html на ходу.

На тему пеинта очень рекомендую посмотреть на то, как создаются картины в OpenCanvas http://en.wikipedia.org/wiki/OpenCanvas после этого создание качественных работ в пеинте не будет казаться чем-то особенным.

Предположу, что в данном случае у них там на фоне менеджер буфера обмена, типа Clipmate, в котором по шагам разобран весь код и автору остаётся только перемещать курсор в нужные места и жать Ctrl+V, остальные действия и ускорение времени сделаны для создания эффекта того, что всё это сделано руками. За пол часика тренировок и с использованием программ, которые тут в комментах не раз предлагались думаю подобный шедевр станет доступен не только нашим восточным братьям.

kuil Jun 8 2007 at 22:41

а мне кажется, именно руками, ввод по минимуму, много копипаста - видно ведь. А потом ускорили видео, как сказано ранее. Да и не так уж много тут кода

sgnppv Jun 8 2007 at 22:52

интересно, зачем вооооообще такой фигнёй заниматься? неужели им просто нечего делать?

UFO just landed and posted this here

ega Jun 8 2007 at 11:29

Помоему там японские иероглифы. Но я шокирован.

bolk Jun 8 2007 at 12:14

Японцы пишут китайскими иероглифами.

dimaniko Jun 8 2007 at 13:31

+1. Только в ролике вроде катакана виднеется.

Archy Jun 8 2007 at 14:51

Верно, верно, кроме кандзи есть ещё две каны, которыми пишут только японцы, которые и видно в ролике

Nightquest Jun 8 2007 at 11:18

Даешь «Рисунок beta», безтабличный, на дивах :)

dimaniko Jun 8 2007 at 12:03

Ну это совсем просто. Пиксель - див с абсолютными размерами и координатами. Кстати, это идея...

Nightquest Jun 8 2007 at 12:13

Вся картинка с девушкой (то есть самая главная таблица) — 132

Nightquest Jun 8 2007 at 12:22

Ого, что за хабраглюки?..
Я только что комментарий с математическими расчетами написал, а он обрезался перед знаком умножения. Странно

Nightquest Jun 8 2007 at 12:27

Вся картинка с девушкой (то есть самая главная таблица) — 132 х 246. Перемножаем. Получаем 32472 пикселей². Отнимаем примерно треть, ведь у нас фон там черный, допустим, что он у нас будет одним дивом. Итого, 32472 – 10824 = 21648 дивов с абсолютными координатами :о)

chx Jun 8 2007 at 12:38

а сильно ли там меньше таблиц?

h8every1 Jun 8 2007 at 12:40

Пиксель² - это прям так здорово! =)

kulikoff Jun 8 2007 at 13:02

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

the_ghost Jun 8 2007 at 13:15

:) А где коммерция?

kulikoff Jun 8 2007 at 13:45

Это стартап "за идею" :) Ради удовлетворения мании собственного величия :)

Deenamo Jun 8 2007 at 16:48

Продавать пиксели спонсорам :)))

svt Jun 8 2007 at 18:40

есть сайты которые конвертируют не в точки, а просто символы *#% итд =)

если вспомню, кину ссылку или кто-то скажет может)

reasonspace Jun 11 2007 at 11:59

это ascii-art называется, лол

dimaniko Jun 8 2007 at 13:28

Все круче. Можно реально векторные картинки из прямоугольников рисовать без привязки к крупнопиксельному растру. ;]

bubuq Jun 8 2007 at 19:55

Да, слышали мы про рисование пикселями на *ML-е:

<pixel>
<colormap>
<red>0xFB </red> <green>0x04</green> <blue>0xA4;</blue>
</colormap>
<position>
<x-axis> 288 </x-axis> <y-axis> 151 </y-axis>
</position>
</pixel>

Можно патентовать. Вебдваноль нервно курит ручку швабры.

Smorpy Jun 8 2007 at 11:29

А страничка то наверняка не оптимизирована... :)

G0rnap5chtickn3R Jun 8 2007 at 11:30

А я подобной дурью маялся в свое время. Началось с рисования в экселе от нечего делать, потом увидел, что получается неплохо, прописал макрос, который создал хтмл-код, потом еще яваскриптом анимацию добавил. Жалко, что стерлось.

the_ghost Jun 8 2007 at 12:58

Где-то в закромах лежит рнр скрипт, который генерирует подобную таблицу из скармливаемого ему рисунка. Правда, там была проблема с тем, что indexcolor, кажется, использует только 256 цветов. Но получалось весьма забавно. И время экономится по сравнению с ручным рисование колосально.

sanitar Jun 8 2007 at 13:11

на коленке примерно так:

the_ghost Jun 8 2007 at 13:15

sanitar Jun 8 2007 at 13:17

не запостилось ))

<table>
<?php
$im = ImageCreateFromJPEG("logo.jpg");
$imx = imagesx($im);
$imy = imagesy($im);

for($x=0;$x<=$imy;$x++)
{
?>
<tr width="1">
<?
for($y=0;$y<=$imx;$y++)
{
$rgb = ImageColorAt($im, $y, $x);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
echo "<td bgcolor=\"".dechex($r).dechex($g).dechex($b)."\" width=1></td>";

}
?>
</tr>
<?
}

?>
</table>

GogA Jun 8 2007 at 13:24

к table добавь cellpadding="0" cellspacing="0"

sanitar Jun 8 2007 at 13:30

в серьёз не надо это воспринимать)

GogA Jun 8 2007 at 13:29

не нмого код подредактировал, вот что вышло:
http://gogolev.net/habr.html (осторожно, почти полметра!)

dobriykot Jun 8 2007 at 14:52

сила :)

pxx Jun 8 2007 at 15:31

А в данном конкретном случае можно все много оптимизировать:
1. colspan, rowspan.
2. Для каждого из цветов прописать отдельный стиль и в коде получится td id="a", td id="b", ...

sanitar Jun 8 2007 at 15:35

простите конечно, но скрипт мой) поэтому отвечу)

1.колспаны и роуспаны значительно увеличат работу скрипта, хотя идея таковая конечно была)
2.учитывая что первой картинкой рабочей была фотография - подход дичайший) но конечно правильный, с точки зрения "эстетики программирования". для лого хабра конечно было бы всего два айдишника))

pxx Jun 12 2007 at 10:56

Не 2 айдишника, чуть больше. Не забываем про dithering.

GogA Jun 8 2007 at 19:08

2. id на то и id, чтобы сделать уникальный индификатор :)
тут уж class

PersY Jun 8 2007 at 17:00

А если воспользоваться CSS код получаться куда меньше. Воде
и

PersY Jun 8 2007 at 17:01

td class =1 и td class =1

dreamwind Jun 8 2007 at 18:26

напоминает методы Яндекс.Директ по выводу иконки телефона в объявлениях...

mas Jun 8 2007 at 11:30

Японцы.

GogA Jun 8 2007 at 11:31

спасибо
UPD1: китайцы/японцы жгут
UPD2: Японцы жгут

delightmanua Jun 8 2007 at 11:31

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

но всё равно товарищ мололец

anaheim2by Jun 8 2007 at 11:33

И чеь вам этот РуТьюб нравится - как то на коленке явно сделан. YouTube гораздо удобней и оптимизированней

fog Jun 8 2007 at 11:50

Согласен. Какой-то он странный, вечно на какие-то глюки нарываюсь.

diamant Jun 8 2007 at 15:23

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

sgnppv Jun 8 2007 at 22:57

у меня ютуб бывает так жжот.

Кстати, а как с рутуба ролики качать? не хочется избранное г*вном набивать, а друзьям показать чтото хочется :)

habrauser Jun 9 2007 at 08:15

На самом рутюбе справа от ролика изображение дискеты, там выбери требуемый формат.

sgnppv Jun 9 2007 at 10:05

спасибо, осталось только зарегицо :(

GogA Jun 9 2007 at 08:18

M_org, иногда не качает, вот оригинал ролика:
http://gogolev.net/files/h/notepad.wmv

burzum Jun 8 2007 at 11:39

Шокирует. А ведь можно такое на postscript писать. Так, между делом, в блокноте штрихкод какой-нибудь написать. Потом вооружиться арифмометром «Феликс», счётами и растрировать потихоньку =)

Gunger Jun 8 2007 at 11:45

Жаль, что видео очень ускоренное.
Но интересно на такое взглянуть ;)

DEL Jun 8 2007 at 11:58

Убейтесь фотошоперы:)

Paul Jun 8 2007 at 12:05

Круто. Хотелось бы еще на страничку вживую посмотреть.

DEL Jun 8 2007 at 12:23

Столько ячеек в таблице будут тормозить весьма. особенно в IE.

p1lot Jun 8 2007 at 12:09

прям как корейцы в старкрафте :)

suprom Jun 8 2007 at 12:12

Недаром они СУДОКУ пидумали:)

azrael Jun 8 2007 at 12:13

Здорово, мне понравилось :)

Lola2grp Jun 8 2007 at 12:16

Завораживает!!!
Просто завораживает!
Да, мне так слабо...

Lola2grp Jun 8 2007 at 12:17

особенно с такой скоростью печатать иероглифами....

sgnppv Jun 8 2007 at 22:58

ускорено видео, раз в 100 наверное.

nosex Jun 8 2007 at 12:18

саундтрек неплохой.
под него можно и не такое написать

h8every1 Jun 8 2007 at 12:28

Японцы, мне кажется, скоро будут jpg-файлы прямо в блокноте писать.

never_again Jun 8 2007 at 12:32

сильно!
впечатлило!

gorinich Jun 8 2007 at 12:35

Сколько такой верстальщик стоит?

chx Jun 8 2007 at 12:41

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

skylix Jun 8 2007 at 12:50

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

gorinich Jun 8 2007 at 12:50

ИМХО, в данном конкретном случае задача стояла не написать правильный документ, а нарисовать картинку средствами HTML.
Только то, как данный человек ориентируется в этой всей верстке чего-то да стоит. Я не видел ни одного промаха :) А это не таблица 10х10, это картинка!

chx Jun 8 2007 at 12:57

вот был бы код страницы, был бы и разговор более предметный.
нарисовать картинку нетрадиционным способом человеку вроде бы удалось.
но результат мы не видим фактически.

wtf Jun 8 2007 at 13:57

верстальщики, которые убивают время на ручную генерацию html-ной картинки, если это можно сделать автоматически, действительно ничего не стоят. Как и кодеры, пишущие руками ascii-арт. Фактически это-же xpm.

Однако ascii-арт имеет право на существование, как и, наверное, рисование в css и html.

chx Jun 8 2007 at 14:03

дело в том, что аски-арт мы видим, а здесь только сумбурное видео.

wtf Jun 8 2007 at 14:09

Да, я конечно, ждал что в конце будет ссылка.

chx Jun 8 2007 at 14:12

а была бы ссылка - было бы и отношение другое.
но всё равно.
ascii-арт не издевается над текстом так, как этот пример над кодом.

wtf Jun 8 2007 at 14:18

Аскиарт тоже разный быввает.

Про видео, свое имхо я написал. Сгенерировали плагином аля htmltable для гимпа и портили, пустили задом наперед. Начало/конец приделали.

habraUL Jun 8 2007 at 12:46

Эх...черт. Я так надеялся что там хентай будет =)

wtf Jun 8 2007 at 13:33

хентай : )
http://bestpics.ru/full/1.colorxhtml

olegkrasnov Jun 8 2007 at 12:58

я где-то видал javascript ray-trace render.

wtf Jun 8 2007 at 13:38

в ГИМПе есть целых 2 плагина для представления картинки в html.
Есть подозрение, что для создания ролика как раз использовался один из них (который 0.html). Достаточно просто открыть файл в блокноте и постепенно его стирать. Затем проиграть в обратной последовательности. Ну и самое начало сделать руками.

GogA Jun 8 2007 at 13:40

Достойно, больше похоже на правду объяснение, чем результат

wtf Jun 8 2007 at 13:44

Другие объяснения включают распечатку увеличенной в 10 раз картинки, разлиновывание ее, разбивку на прямоугольные области и так далее. Все это тоже делается (вспомним вышивки), но результат слишком многоцветный для ручной работы.

Хотя, если убиться веником, можно и руками сделать.

wtf Jun 8 2007 at 13:32

Слабо, говорите : ) вот, например (http://bestpics.ru/full/0.html). Примерно 10 мин работы, из которых 8 ожидание открытия файла.

wazd Jun 8 2007 at 13:49

Самое ужасное, что в самом конце ролика он дальше начал что-то фигачить в блокноте :) Хотя возможно просто ридми :) Но эт жесть конечно.

GogA Jun 8 2007 at 13:53

кто-нибудь силён в японском? переведите записи в блокноте :)
думаю описание, может и разгадка о создании ролика

Drevlyanin Jun 8 2007 at 14:08

Впечатлил саундтрек. %)

almarz Jun 8 2007 at 14:12

Абалдеть!
вот кому то реально нечего было делать...

pomidorchi Jun 8 2007 at 14:31

Так вот для чего ты, табличная верстка! *))

Fade Jun 8 2007 at 15:15

Да, круто. Сам когда-то пробовал, но немного в другом духе:
http://www.parser.ru/forum/?id=54218
сверстано с учетом ограничений синтаксиса/ограничений форума

PersY Jun 8 2007 at 16:45

Тоже рисовал когдато так Мона Лизу, а вообще есть программы типо bmp2html (http://leo.yuriev.ru/bmp2html) которые это делают это автоматом.

UFO just landed and posted this here

altmind Jun 8 2007 at 17:38

хабранарод, познакомьтесь с PNM форматом, и так же счастливо рисуйте в блокноте!

(сам когда увидел в linux, в осадок выпал)

altmind Jun 8 2007 at 17:43

забыл, что pnm расширен и заменен XPM ом

bubuq Jun 8 2007 at 20:14

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

Было бы что-то вроде чисто текстового батона "W3C compliant", то я бы понял.

altmind Jun 9 2007 at 23:21

вы о чем. код это код. а тут можно на самом деле рисовать в блокноте.

и что такое батон? если button, то при чем он тут, и при чем тут w3c?

Nicholass Jun 8 2007 at 19:03

Как говорят у нас в ЖЖ - "в мемориз!"
Действительно шокирован. такое даже в голову не приходило!

Lermont Jun 8 2007 at 20:56

А вот, к примеру, Хабра-лого без единого пиксела графики. Такой же мутотой сделано.

GogA Jun 9 2007 at 05:47

Что-то у тебя лого растянуто немного...
Хотя код лучше чем у меня, посмотри выше:
http://www.habrahabr.ru/blog/creative/14…

b14cKc47 Jun 8 2007 at 23:13

Одно время сам такой же фигней баловался. Вообще довольно забавно :-)

kr1 Jun 8 2007 at 23:33

Дорогие японцы, IE конечно плохой браузер, но прогресс дошел до того, что и он уже давно поддерживает картинки, а скоро случится чудо и он начнет поддерживать прозрачность PNG! Так что пользуйтесь фотошопом и не парьтесь)

klyavin Jun 9 2007 at 03:15

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

smitana Jun 9 2007 at 11:12

ужас нереальные психи

xexsus Jun 9 2007 at 17:48

Любой нормальный html-верстальщик-маньяк не признающий wysiwyg может также.

reasonspace Jun 11 2007 at 12:00

а чо doctype не указан? :)

an2an Jun 13 2007 at 11:53

Мне понравилось.
Только реальнее это в обратную сторону сделать:)
Перевести цвета в код, а потом сделать вид, что руками кодишь..

Innuendo108 May 10 2010 at 17:05

не похоже что на ролике делали вручную и потом ускорили. Когда этот длинющий код вставляется в блокнот, то блокнот всегда не активен, а эксплорер — активен… и не моргает… больше же времени он находился в блокноте, а в эксплорере только «обновить» нажимали