Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Объект из точек (https://javascript.ru/forum/misc/71689-obekt-iz-tochek.html)

Bicou 05.12.2017 17:25
Объект из точек
 
Я только начинаю разбираться в JS, поэтому банальная история стала для меня проблемой. Но хочу разобраться по возможности сама.
Итак, задача.
Есть некая картинка (например буква, цифра или произвольная с неровными краями) и мне бы хотелось заполнить ее с помощью скрипта цветными точками.
Вот как на картинке "S"


Понимаю, что надо создать эту точку, которая будет "ставится" и задать ей возможности изменения (допустим цвет в массиве)
Но вот как определить область, где точка может появляться (допустим букв несколько в одной картинке) не знаю.
Подскажите как решить такую задачу.

laimas 05.12.2017 18:10
Так понятно будет https://cdn1.savepice.ru/uploads/201...14378-full.gif ?

Bicou 05.12.2017 22:44
laimas,
то ли у меня гиф не воспроизводится, то ли не понятно. Буквы просто белые на черном фоне. Или может быть я бестолково объяснила.
Мне нужно, чтобы внутри буквы с помощью скрипта появлялись другие фигуры (например, точки) но строго в контуре буквы. Как кляксы в S на картинке


Я могу понять, как отрисовать нужную область с помощью Canvas Но как задать ее для области применения скрипта не понимаю.

void() 05.12.2017 23:23 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Шутка :)</title>
</head>
<body>
	<div ><img src="http://i.piccy.info/i9/57282bf6f05c9c52c009ad5cc31593d7/1512505065/23584/1198225/1.jpg" class="img wheel"> <img class="img s" src="http://i.piccy.info/i9/4a0a5cd907e989d8df088e55836b8549/1512505097/21131/1198225/s.png" alt=""></div>

	<style>
	div{
		width: 100px;
		height: 100px;
		position: relative;
		overflow: hidden;
	}
	img{
		width: 100px;
		position: absolute;
	}
	.s{
		z-index: 999;
	}
	.wheel {
		animation-name: spin;
		animation-duration: 30000ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		z-index: 100;
	}
	@keyframes spin {
		from {
			transform:rotate(0deg);
		}
		to {
			transform:rotate(360deg);
		}
	}
</style>
</body>
</html>

:)

laimas 05.12.2017 23:29
Цитата:
Сообщение от Bicou
то ли у меня гиф не воспроизводится
Это не анимация. Вам же надо определить области, а делается это так:

- изображение переводится в градации серого
- добавляется яркость и контрастность таким образом, чтобы "вырезать" детали на изображении (например полос на w, t и точек на s теперь а нем нет)
- в цветовой модели HSB задается некий порог черного с которым сверяется (в этой же цветовой модели) считанные значения пикселей изображения и если они превышают порог, то это область в которой рисуем

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

Bicou 06.12.2017 00:02
Вложений: 1
void(), спасибо, про маски не додумалась, но не совсем то. Хотя попытаться можно)

laimas, меня скорее интересовало можно ли (и если можно, то как) определить некую область (ну допустим отрисовать фигуру через canvas (Это то, что я как-то освоила, отсюда предположение) и скриптом оперировать с получившейся областью. Добавлять в нее объекты, чтобы они не заходили за край области
Т.е. чисто технически нужно будет пройтись по фигуре с шагом в несколько пикселей и сравнить есть ли в данных координатах фигура. Если есть, то туда ставить объект, если нет, то объект не ставить. Вот только не могу понять как эту область задать.
Или как вариант, выставлять объекты по некой ломаной линии. Использовать ее как траекторию (не в смысле движения по ней, а как ниточку для бус)

рони 06.12.2017 00:10
Bicou,
https://developer.mozilla.org/ru/doc...Context2D/clip

https://developer.mozilla.org/en-US/...ositeOperation

Bicou 06.12.2017 00:40
рони,
т.е. с помощью .clip (FillRule); можно проверить принадлежит ли точка области и если да, то поставить свой объект? Я правильно понимаю?

laimas 06.12.2017 00:40
Bicou,
я думал есть некое фото, на котором нужно найти области.

Bicou 06.12.2017 00:48
Цитата:
Сообщение от laimas (Сообщение 472175)
Bicou,
я думал есть некое фото, на котором нужно найти области.
В общем и целом да. Но области должны быть прозрачными) Т.е. вот в исходнике с буквами: допустим что буквы должны состоять из набора "клякс", а фон вокруг них оставаться прежним (и допустим, что он какой-то цветной) и таких мест на страничке несколько)

Я чуть выше вставила картинку с пояснением, чего хочу от скрипта)

рони 06.12.2017 00:54
Bicou,
не знаю

laimas 06.12.2017 02:34
Цитата:
Сообщение от Bicou
области должны быть прозрачными
Не проблема, но вам же сначала нужно найти эти области. Не знаю чего посоветовать почитать, может быть о том как программно распознают и взламывают каптчи. На них к примеру шум, его удаляют посредством Blur, затем яркость/контрастность и все это в серых градациях. Почему выгоднее работать в цветовой модели HSB, а не RGB можно понять, если выбирать на шкале RGB цвет и видеть рядом шкалу HSB.

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

Bicou 06.12.2017 12:29
Rise,
laimas,
вот на флеше такое достаточно просто реализовать. Но там есть возможность прохождения по контуру неровной области с заданным шагом. А вот есть ли что-то подобное в JS не знаю.
Мне собственно для решения нужно создать эту самую область (допустим обводку буквы) и сказать скрипту что начиная с верхнего угла ему надо проходить ее с шагом в несколько пикселей и проверять принадлежит новая точка области или нет. Если да, ставить точку. Если нет идти дальше.

laimas 06.12.2017 12:59
Bicou,
если вам надо соединить две точки нужно ли знать координаты обеих точек или достаточно одной? Чтобы "сказать скрипту" куда и с каким шагом идти, нужно же знать куда ему "ноги ставить". :)

Вам же не нарисовать путь абстрактный нужно, а фактически распознать объект, его контур, а далее можете апроксимировать точки контура для упрощения, и потом только "ходить" по нему.

join 06.12.2017 15:32
Bicou,

Вам надо познакомится с этой технологией. Это сложно, но возможно, хотя не факт. threejs

или копать svg. он любит ломаные конструкции. http://envek.github.io/Amestris/

Bicou 06.12.2017 17:06
Цитата:
Сообщение от join (Сообщение 472240)
Bicou,

Вам надо познакомится с этой технологией. Это сложно, но возможно, хотя не факт. threejs

или копать svg. он любит ломаные конструкции. http://envek.github.io/Amestris/
Спасибо, больше всего похоже на то, что нужно. Ну, а разобраться можно во всем. Это не те проблемы, которые не решаемы.

Bicou 06.12.2017 17:08
Цитата:
Сообщение от Rise (Сообщение 472239)
Какое такое? Статичную картинку? Так в фотошопе еще проще нарисовать.
Если бы было проще нарисовать, то давно бы нарисовала.
Картинка то статичная, но любая картинка ФШ это прямоугольник, что никак не помогает "распознать контур буквы"


Часовой пояс GMT +3, время: 18:57.