Как сгенерировать картинки с заданным размером деталей, определенным количеством элементов и максимальной случайностью?
Пишу простую развивающую игру со следующими правилами: Дан набор картинок из которых 2 одинаковые, а остальные разные, при нажатии на одну из одинаковых набор изменяется а игроку зачисляются баллы.Вроде этой
Игра предполагается для развития непроизвольного внимания, и потому, в идеале, нужны картинки каждый раз генерируемые заново или, хотя бы, большой их набор. Отсюда вопрос: Как сгенерировать картинки которые имеют определенный размер элементов(игра не должна чрезмерно напрягать зрение), имеют максимальное разнообразие элементов?
В идеале нужен алгоритм создающий изображения с заданным размером элементов, заданным количеством взаимодействующих сущностей(т.е. картинка не должна быть набором точек, иначе можно было бы использовать qr-коды например- она должна быть набором линий, искривленных капель, всего чего угодно покрывающего весь континуум форм, каждый элемент, при том должен быть непрерывным), для того чтобы она без труда запоминалась человеком.
Нужен сам алгоритм, не обязательно код, и решения вроде "возьми коллекцию элементов и изменяй их размер накладывая поочередно на холст", я понимаю- нужен именно весь континуум форм в их взаимодействии.
Ответы (1 шт):
Автор решения: Кирилл Малышев
→ Ссылка
Предлагаю вариант взять китайские иероглифы. Их много, рисуются очень разнообразно. Может быть, это не идеальный вариант, зато почти готовый.
Вот, например, есть набор иероглифов в формате SVG: https://github.com/skishore/makemeahanzi/tree/master/svgs
Там только надо убрать анимацию, пунктирные линии и поменять цвет на чёрный.
То есть было так
<svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<g stroke="lightgray" stroke-dasharray="1,1" stroke-width="1" transform="scale(4, 4)">
<line x1="0" y1="0" x2="256" y2="256"></line>
<line x1="256" y1="0" x2="0" y2="256"></line>
<line x1="128" y1="0" x2="128" y2="256"></line>
<line x1="0" y1="128" x2="256" y2="128"></line>
</g>
<g transform="scale(1, -1) translate(0, -900)">
<style type="text/css">
@keyframes keyframes0 {
from {
stroke: blue;
stroke-dashoffset: 481;
stroke-width: 128;
}
61% {
animation-timing-function: step-end;
stroke: blue;
stroke-dashoffset: 0;
stroke-width: 128;
}
to {
stroke: black;
stroke-width: 1024;
}
}
#make-me-a-hanzi-animation-0 {
animation: keyframes0 0.6414388020833334s both;
animation-delay: 0s;
animation-timing-function: linear;
}
@keyframes keyframes1 {
from {
stroke: blue;
stroke-dashoffset: 870;
stroke-width: 128;
}
74% {
animation-timing-function: step-end;
stroke: blue;
stroke-dashoffset: 0;
stroke-width: 128;
}
to {
stroke: black;
stroke-width: 1024;
}
}
#make-me-a-hanzi-animation-1 {
animation: keyframes1 0.9580078125s both;
animation-delay: 0.6414388020833334s;
animation-timing-function: linear;
}
@keyframes keyframes2 {
from {
stroke: blue;
stroke-dashoffset: 1604;
stroke-width: 128;
}
84% {
animation-timing-function: step-end;
stroke: blue;
stroke-dashoffset: 0;
stroke-width: 128;
}
to {
stroke: black;
stroke-width: 1024;
}
}
#make-me-a-hanzi-animation-2 {
animation: keyframes2 1.5553385416666667s both;
animation-delay: 1.5994466145833335s;
animation-timing-function: linear;
}
@keyframes keyframes3 {
from {
stroke: blue;
stroke-dashoffset: 823;
stroke-width: 128;
}
73% {
animation-timing-function: step-end;
stroke: blue;
stroke-dashoffset: 0;
stroke-width: 128;
}
to {
stroke: black;
stroke-width: 1024;
}
}
#make-me-a-hanzi-animation-3 {
animation: keyframes3 0.9197591145833334s both;
animation-delay: 3.15478515625s;
animation-timing-function: linear;
}
</style>
<path d="M 397 665 Q 440 696 464 718 Q 530 776 552 788 Q 574 801 560 818 Q 545 834 516 847 Q 491 860 477 855 Q 464 854 469 839 Q 478 809 426 740 Q 404 712 381 679 C 364 654 373 647 397 665 Z" fill="lightgray"></path>
<path d="M 393 622 Q 402 621 413 628 Q 468 647 609 673 Q 622 674 630 668 Q 639 664 639 649 Q 638 612 622 546 Q 616 515 587 521 Q 553 527 524 532 Q 506 535 511 525 Q 512 513 543 490 Q 580 456 601 419 Q 608 409 618 412 Q 625 413 643 436 Q 668 467 677 507 Q 701 642 718 656 Q 730 669 723 681 Q 713 694 669 717 Q 654 726 603 710 Q 561 710 398 662 C 369 654 364 614 393 622 Z" fill="lightgray"></path>
<path d="M 398 662 Q 397 663 397 665 C 398 671 398 671 381 679 Q 366 689 348 696 Q 329 703 319 693 Q 312 687 321 675 Q 345 630 332 406 Q 328 372 321 338 Q 315 316 332 300 Q 354 282 374 296 Q 440 338 633 354 Q 747 366 767 346 Q 780 333 763 288 Q 754 222 741 154 Q 732 102 708 67 Q 698 54 670 55 Q 627 68 587 78 Q 571 82 571 75 Q 571 68 581 60 Q 651 2 678 -40 Q 688 -62 707 -51 Q 774 -14 788 56 Q 810 152 825 257 Q 835 297 855 332 Q 868 348 857 363 Q 838 385 798 409 Q 776 422 744 409 Q 687 387 635 384 Q 562 377 411 353 Q 383 349 383 372 Q 383 583 393 622 C 397 652 398 662 398 662 Z" fill="lightgray"></path>
<path d="M 404 182 Q 440 185 475 190 Q 578 202 664 195 Q 686 194 691 202 Q 697 214 685 224 Q 657 248 616 265 Q 490 244 365 223 Q 164 195 125 192 Q 112 191 112 181 Q 112 169 129 157 Q 145 147 174 137 Q 184 133 200 142 Q 212 146 261 156 Q 325 172 404 182 Z" fill="lightgray"></path>
<clipPath id="make-me-a-hanzi-clip-0">
<path d="M 397 665 Q 440 696 464 718 Q 530 776 552 788 Q 574 801 560 818 Q 545 834 516 847 Q 491 860 477 855 Q 464 854 469 839 Q 478 809 426 740 Q 404 712 381 679 C 364 654 373 647 397 665 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-0)" d="M 477 845 L 490 836 L 508 807 L 446 730 L 399 681 L 391 682" fill="none" id="make-me-a-hanzi-animation-0" stroke-dasharray="353 706" stroke-linecap="round"></path>
<clipPath id="make-me-a-hanzi-clip-1">
<path d="M 393 622 Q 402 621 413 628 Q 468 647 609 673 Q 622 674 630 668 Q 639 664 639 649 Q 638 612 622 546 Q 616 515 587 521 Q 553 527 524 532 Q 506 535 511 525 Q 512 513 543 490 Q 580 456 601 419 Q 608 409 618 412 Q 625 413 643 436 Q 668 467 677 507 Q 701 642 718 656 Q 730 669 723 681 Q 713 694 669 717 Q 654 726 603 710 Q 561 710 398 662 C 369 654 364 614 393 622 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-1)" d="M 397 628 L 416 650 L 542 681 L 618 694 L 662 684 L 677 667 L 673 642 L 649 525 L 627 487 L 616 477 L 520 524" fill="none" id="make-me-a-hanzi-animation-1" stroke-dasharray="742 1484" stroke-linecap="round"></path>
<clipPath id="make-me-a-hanzi-clip-2">
<path d="M 398 662 Q 397 663 397 665 C 398 671 398 671 381 679 Q 366 689 348 696 Q 329 703 319 693 Q 312 687 321 675 Q 345 630 332 406 Q 328 372 321 338 Q 315 316 332 300 Q 354 282 374 296 Q 440 338 633 354 Q 747 366 767 346 Q 780 333 763 288 Q 754 222 741 154 Q 732 102 708 67 Q 698 54 670 55 Q 627 68 587 78 Q 571 82 571 75 Q 571 68 581 60 Q 651 2 678 -40 Q 688 -62 707 -51 Q 774 -14 788 56 Q 810 152 825 257 Q 835 297 855 332 Q 868 348 857 363 Q 838 385 798 409 Q 776 422 744 409 Q 687 387 635 384 Q 562 377 411 353 Q 383 349 383 372 Q 383 583 393 622 C 397 652 398 662 398 662 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-2)" d="M 328 685 L 339 680 L 363 651 L 355 368 L 359 332 L 386 330 L 529 358 L 761 383 L 787 375 L 814 346 L 792 261 L 767 115 L 749 58 L 732 29 L 705 9 L 693 12 L 577 73" fill="none" id="make-me-a-hanzi-animation-2" stroke-dasharray="1476 2952" stroke-linecap="round"></path>
<clipPath id="make-me-a-hanzi-clip-3">
<path d="M 404 182 Q 440 185 475 190 Q 578 202 664 195 Q 686 194 691 202 Q 697 214 685 224 Q 657 248 616 265 Q 490 244 365 223 Q 164 195 125 192 Q 112 191 112 181 Q 112 169 129 157 Q 145 147 174 137 Q 184 133 200 142 Q 212 146 261 156 Q 325 172 404 182 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-3)" d="M 123 181 L 182 167 L 356 200 L 611 231 L 680 209" fill="none" id="make-me-a-hanzi-animation-3" stroke-dasharray="695 1390" stroke-linecap="round"></path>
</g>
</svg>Нужно сделать так:
<svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<g transform="scale(1, -1) translate(0, -900)">
<path d="M 397 665 Q 440 696 464 718 Q 530 776 552 788 Q 574 801 560 818 Q 545 834 516 847 Q 491 860 477 855 Q 464 854 469 839 Q 478 809 426 740 Q 404 712 381 679 C 364 654 373 647 397 665 Z" fill="black"></path>
<path d="M 393 622 Q 402 621 413 628 Q 468 647 609 673 Q 622 674 630 668 Q 639 664 639 649 Q 638 612 622 546 Q 616 515 587 521 Q 553 527 524 532 Q 506 535 511 525 Q 512 513 543 490 Q 580 456 601 419 Q 608 409 618 412 Q 625 413 643 436 Q 668 467 677 507 Q 701 642 718 656 Q 730 669 723 681 Q 713 694 669 717 Q 654 726 603 710 Q 561 710 398 662 C 369 654 364 614 393 622 Z" fill="black"></path>
<path d="M 398 662 Q 397 663 397 665 C 398 671 398 671 381 679 Q 366 689 348 696 Q 329 703 319 693 Q 312 687 321 675 Q 345 630 332 406 Q 328 372 321 338 Q 315 316 332 300 Q 354 282 374 296 Q 440 338 633 354 Q 747 366 767 346 Q 780 333 763 288 Q 754 222 741 154 Q 732 102 708 67 Q 698 54 670 55 Q 627 68 587 78 Q 571 82 571 75 Q 571 68 581 60 Q 651 2 678 -40 Q 688 -62 707 -51 Q 774 -14 788 56 Q 810 152 825 257 Q 835 297 855 332 Q 868 348 857 363 Q 838 385 798 409 Q 776 422 744 409 Q 687 387 635 384 Q 562 377 411 353 Q 383 349 383 372 Q 383 583 393 622 C 397 652 398 662 398 662 Z" fill="black"></path>
<path d="M 404 182 Q 440 185 475 190 Q 578 202 664 195 Q 686 194 691 202 Q 697 214 685 224 Q 657 248 616 265 Q 490 244 365 223 Q 164 195 125 192 Q 112 191 112 181 Q 112 169 129 157 Q 145 147 174 137 Q 184 133 200 142 Q 212 146 261 156 Q 325 172 404 182 Z" fill="black"></path>
<clipPath id="make-me-a-hanzi-clip-0">
<path d="M 397 665 Q 440 696 464 718 Q 530 776 552 788 Q 574 801 560 818 Q 545 834 516 847 Q 491 860 477 855 Q 464 854 469 839 Q 478 809 426 740 Q 404 712 381 679 C 364 654 373 647 397 665 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-0)" d="M 477 845 L 490 836 L 508 807 L 446 730 L 399 681 L 391 682" fill="none" id="make-me-a-hanzi-animation-0" stroke-dasharray="353 706" stroke-linecap="round"></path>
<clipPath id="make-me-a-hanzi-clip-1">
<path d="M 393 622 Q 402 621 413 628 Q 468 647 609 673 Q 622 674 630 668 Q 639 664 639 649 Q 638 612 622 546 Q 616 515 587 521 Q 553 527 524 532 Q 506 535 511 525 Q 512 513 543 490 Q 580 456 601 419 Q 608 409 618 412 Q 625 413 643 436 Q 668 467 677 507 Q 701 642 718 656 Q 730 669 723 681 Q 713 694 669 717 Q 654 726 603 710 Q 561 710 398 662 C 369 654 364 614 393 622 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-1)" d="M 397 628 L 416 650 L 542 681 L 618 694 L 662 684 L 677 667 L 673 642 L 649 525 L 627 487 L 616 477 L 520 524" fill="none" id="make-me-a-hanzi-animation-1" stroke-dasharray="742 1484" stroke-linecap="round"></path>
<clipPath id="make-me-a-hanzi-clip-2">
<path d="M 398 662 Q 397 663 397 665 C 398 671 398 671 381 679 Q 366 689 348 696 Q 329 703 319 693 Q 312 687 321 675 Q 345 630 332 406 Q 328 372 321 338 Q 315 316 332 300 Q 354 282 374 296 Q 440 338 633 354 Q 747 366 767 346 Q 780 333 763 288 Q 754 222 741 154 Q 732 102 708 67 Q 698 54 670 55 Q 627 68 587 78 Q 571 82 571 75 Q 571 68 581 60 Q 651 2 678 -40 Q 688 -62 707 -51 Q 774 -14 788 56 Q 810 152 825 257 Q 835 297 855 332 Q 868 348 857 363 Q 838 385 798 409 Q 776 422 744 409 Q 687 387 635 384 Q 562 377 411 353 Q 383 349 383 372 Q 383 583 393 622 C 397 652 398 662 398 662 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-2)" d="M 328 685 L 339 680 L 363 651 L 355 368 L 359 332 L 386 330 L 529 358 L 761 383 L 787 375 L 814 346 L 792 261 L 767 115 L 749 58 L 732 29 L 705 9 L 693 12 L 577 73" fill="none" id="make-me-a-hanzi-animation-2" stroke-dasharray="1476 2952" stroke-linecap="round"></path>
<clipPath id="make-me-a-hanzi-clip-3">
<path d="M 404 182 Q 440 185 475 190 Q 578 202 664 195 Q 686 194 691 202 Q 697 214 685 224 Q 657 248 616 265 Q 490 244 365 223 Q 164 195 125 192 Q 112 191 112 181 Q 112 169 129 157 Q 145 147 174 137 Q 184 133 200 142 Q 212 146 261 156 Q 325 172 404 182 Z"></path>
</clipPath>
<path clip-path="url(#make-me-a-hanzi-clip-3)" d="M 123 181 L 182 167 L 356 200 L 611 231 L 680 209" fill="none" id="make-me-a-hanzi-animation-3" stroke-dasharray="695 1390" stroke-linecap="round"></path>
</g>
</svg>