├── README.md ├── canvas ├── index.css ├── index.html └── index.js ├── carnvas-demo ├── _scss │ ├── _extends.scss │ ├── _jump.scss │ ├── _main.scss │ ├── _run.scss │ ├── _variable.scss │ └── index.scss ├── config.rb ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── front-camera ├── index.css ├── index.html └── index.js ├── index.html ├── monochrome ├── index.css ├── index.html └── index.js └── rear-camera ├── index.css ├── index.html └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # webcamera-preview-for-ios11 2 | Websites can access camera and microphone streams from a user's device (user permission is required.) 3 | 4 | iOS11のSafariがカメラとマイクにアクセスできるようになったので、取り急ぎカメラにアクセスしてみました。 5 | 6 | ### 解説 7 | http://techblog.kayac.com/webcamera-preview-for-ios11 8 | 9 | ### indexページ 10 | https://kimizuka.github.io/webcamera-preview-for-ios11/ 11 | 12 | ### フロントカメラをプレビュー 13 | https://kimizuka.github.io/webcamera-preview-for-ios11/front-camera/ 14 | 15 | ### リアカメラをプレビュー 16 | https://kimizuka.github.io/webcamera-preview-for-ios11/rear-camera/ 17 | 18 | ### リアカメラの映像をCanvasに書き込む 19 | https://kimizuka.github.io/webcamera-preview-for-ios11/canvas/ 20 | 21 | ### リアカメラの映像をCanvasに書き込んでモノクロにする 22 | https://kimizuka.github.io/webcamera-preview-for-ios11/monochrome/ 23 | 24 | ### 車窓に合わせるデモ 25 | https://kimizuka.github.io/webcamera-preview-for-ios11/carnvas-demo/ 26 | -------------------------------------------------------------------------------- /canvas/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: #000; 4 | } 5 | 6 | #videobox { 7 | position: absolute; 8 | top: 10px; left: 10px; 9 | transform-origin: left top; 10 | transform: scale(.1); 11 | } 12 | 13 | #video { 14 | display: block; 15 | } 16 | 17 | #canvas { 18 | display: block; 19 | position: absolute; 20 | top: 0; left: 0; 21 | width: 100%; height: 100%; 22 | } -------------------------------------------------------------------------------- /canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /canvas/index.js: -------------------------------------------------------------------------------- 1 | const medias = { 2 | audio: false, 3 | video: { 4 | facingMode: { 5 | exact: "environment" 6 | } 7 | } 8 | }; 9 | const video = document.getElementById("video"); 10 | const canvas = document.getElementById("canvas"); 11 | const ctx = canvas.getContext("2d"); 12 | const promise = navigator.mediaDevices.getUserMedia(medias); 13 | 14 | promise.then(successCallback) 15 | .catch(errorCallback); 16 | 17 | function successCallback(stream) { 18 | video.srcObject = stream; 19 | requestAnimationFrame(draw); 20 | } 21 | 22 | function errorCallback(err) { 23 | console.log(err); 24 | alert(err); 25 | } 26 | 27 | function draw() { 28 | canvas.width = window.innerWidth; 29 | canvas.height = window.innerHeight; 30 | ctx.drawImage(video, 0, 0); 31 | 32 | requestAnimationFrame(draw); 33 | } -------------------------------------------------------------------------------- /carnvas-demo/_scss/_extends.scss: -------------------------------------------------------------------------------- 1 | %on { 2 | background: #fff; 3 | box-shadow: 0 0 $DOT_GAP #fff; 4 | } -------------------------------------------------------------------------------- /carnvas-demo/_scss/_jump.scss: -------------------------------------------------------------------------------- 1 | .j1 .dots { 2 | .dot { 3 | &:nth-child(22) { 4 | @extend %on; 5 | } 6 | 7 | &:nth-child(23) { 8 | @extend %on; 9 | } 10 | 11 | &:nth-child(31) { 12 | @extend %on; 13 | } 14 | 15 | &:nth-child(32) { 16 | @extend %on; 17 | } 18 | 19 | &:nth-child(42) { 20 | @extend %on; 21 | } 22 | 23 | &:nth-child(43) { 24 | @extend %on; 25 | } 26 | 27 | &:nth-child(51) { 28 | @extend %on; 29 | } 30 | 31 | &:nth-child(53) { 32 | @extend %on; 33 | } 34 | 35 | &:nth-child(59) { 36 | @extend %on; 37 | } 38 | 39 | &:nth-child(60) { 40 | @extend %on; 41 | } 42 | 43 | &:nth-child(61) { 44 | @extend %on; 45 | } 46 | 47 | &:nth-child(62) { 48 | @extend %on; 49 | } 50 | 51 | &:nth-child(69) { 52 | @extend %on; 53 | } 54 | 55 | &:nth-child(79) { 56 | @extend %on; 57 | } 58 | } 59 | } 60 | 61 | .j2 .dots { 62 | .dot { 63 | &:nth-child(13) { 64 | @extend %on; 65 | } 66 | 67 | &:nth-child(14) { 68 | @extend %on; 69 | } 70 | 71 | &:nth-child(22) { 72 | @extend %on; 73 | } 74 | 75 | &:nth-child(23) { 76 | @extend %on; 77 | } 78 | 79 | &:nth-child(33) { 80 | @extend %on; 81 | } 82 | 83 | &:nth-child(34) { 84 | @extend %on; 85 | } 86 | 87 | &:nth-child(42) { 88 | @extend %on; 89 | } 90 | 91 | &:nth-child(44) { 92 | @extend %on; 93 | } 94 | 95 | &:nth-child(51) { 96 | @extend %on; 97 | } 98 | 99 | &:nth-child(59) { 100 | @extend %on; 101 | } 102 | 103 | &:nth-child(60) { 104 | @extend %on; 105 | } 106 | 107 | &:nth-child(61) { 108 | @extend %on; 109 | } 110 | 111 | &:nth-child(62) { 112 | @extend %on; 113 | } 114 | 115 | &:nth-child(63) { 116 | @extend %on; 117 | } 118 | 119 | &:nth-child(69) { 120 | @extend %on; 121 | } 122 | 123 | &:nth-child(72) { 124 | @extend %on; 125 | } 126 | 127 | &:nth-child(77) { 128 | @extend %on; 129 | } 130 | 131 | &:nth-child(78) { 132 | @extend %on; 133 | } 134 | } 135 | } 136 | 137 | .j3 .dots { 138 | .dot { 139 | &:nth-child(4) { 140 | @extend %on; 141 | } 142 | 143 | &:nth-child(5) { 144 | @extend %on; 145 | } 146 | 147 | &:nth-child(13) { 148 | @extend %on; 149 | } 150 | 151 | &:nth-child(14) { 152 | @extend %on; 153 | } 154 | 155 | &:nth-child(23) { 156 | @extend %on; 157 | } 158 | 159 | &:nth-child(24) { 160 | @extend %on; 161 | } 162 | 163 | &:nth-child(30) { 164 | @extend %on; 165 | } 166 | 167 | &:nth-child(31) { 168 | @extend %on; 169 | } 170 | 171 | &:nth-child(33) { 172 | @extend %on; 173 | } 174 | 175 | &:nth-child(42) { 176 | @extend %on; 177 | } 178 | 179 | &:nth-child(50) { 180 | @extend %on; 181 | } 182 | 183 | &:nth-child(59) { 184 | @extend %on; 185 | } 186 | 187 | &:nth-child(60) { 188 | @extend %on; 189 | } 190 | 191 | &:nth-child(69) { 192 | @extend %on; 193 | } 194 | 195 | &:nth-child(70) { 196 | @extend %on; 197 | } 198 | 199 | &:nth-child(77) { 200 | @extend %on; 201 | } 202 | 203 | &:nth-child(78) { 204 | @extend %on; 205 | } 206 | } 207 | } 208 | 209 | .j4 .dots { 210 | padding-bottom: $DOT_SIZE + $DOT_GAP; 211 | 212 | .dot { 213 | &:nth-child(4) { 214 | @extend %on; 215 | } 216 | 217 | &:nth-child(5) { 218 | @extend %on; 219 | } 220 | 221 | &:nth-child(13) { 222 | @extend %on; 223 | } 224 | 225 | &:nth-child(14) { 226 | @extend %on; 227 | } 228 | 229 | &:nth-child(21) { 230 | @extend %on; 231 | } 232 | 233 | &:nth-child(23) { 234 | @extend %on; 235 | } 236 | 237 | &:nth-child(31) { 238 | @extend %on; 239 | } 240 | 241 | &:nth-child(32) { 242 | @extend %on; 243 | } 244 | 245 | &:nth-child(33) { 246 | @extend %on; 247 | } 248 | 249 | &:nth-child(41) { 250 | @extend %on; 251 | } 252 | 253 | &:nth-child(43) { 254 | @extend %on; 255 | } 256 | 257 | &:nth-child(50) { 258 | @extend %on; 259 | } 260 | 261 | &:nth-child(58) { 262 | @extend %on; 263 | } 264 | 265 | &:nth-child(60) { 266 | @extend %on; 267 | } 268 | 269 | &:nth-child(68) { 270 | @extend %on; 271 | } 272 | 273 | &:nth-child(70) { 274 | @extend %on; 275 | } 276 | 277 | &:nth-child(78) { 278 | @extend %on; 279 | } 280 | 281 | &:nth-child(80) { 282 | @extend %on; 283 | } 284 | } 285 | } 286 | 287 | .j5 .dots, .j10 .dots { 288 | padding-bottom: ($DOT_SIZE + $DOT_GAP) * 8; 289 | 290 | .dot { 291 | &:nth-child(3) { 292 | @extend %on; 293 | } 294 | 295 | &:nth-child(5) { 296 | @extend %on; 297 | } 298 | 299 | &:nth-child(6) { 300 | @extend %on; 301 | } 302 | 303 | &:nth-child(12) { 304 | @extend %on; 305 | } 306 | 307 | &:nth-child(14) { 308 | @extend %on; 309 | } 310 | 311 | &:nth-child(15) { 312 | @extend %on; 313 | } 314 | 315 | &:nth-child(22) { 316 | @extend %on; 317 | } 318 | 319 | &:nth-child(23) { 320 | @extend %on; 321 | } 322 | 323 | &:nth-child(32) { 324 | @extend %on; 325 | } 326 | 327 | &:nth-child(33) { 328 | @extend %on; 329 | } 330 | 331 | &:nth-child(39) { 332 | @extend %on; 333 | } 334 | 335 | &:nth-child(40) { 336 | @extend %on; 337 | } 338 | 339 | &:nth-child(41) { 340 | @extend %on; 341 | } 342 | 343 | &:nth-child(43) { 344 | @extend %on; 345 | } 346 | 347 | &:nth-child(48) { 348 | @extend %on; 349 | } 350 | 351 | &:nth-child(50) { 352 | @extend %on; 353 | } 354 | 355 | &:nth-child(56) { 356 | @extend %on; 357 | } 358 | 359 | &:nth-child(57) { 360 | @extend %on; 361 | } 362 | 363 | &:nth-child(60) { 364 | @extend %on; 365 | } 366 | 367 | &:nth-child(70) { 368 | @extend %on; 369 | } 370 | 371 | &:nth-child(80) { 372 | @extend %on; 373 | } 374 | } 375 | } 376 | 377 | .j6 .dots, .j9 .dots { 378 | padding-bottom: ($DOT_SIZE + $DOT_GAP) * 15; 379 | 380 | .dot { 381 | &:nth-child(3) { 382 | @extend %on; 383 | } 384 | 385 | &:nth-child(5) { 386 | @extend %on; 387 | } 388 | 389 | &:nth-child(6) { 390 | @extend %on; 391 | } 392 | 393 | &:nth-child(12) { 394 | @extend %on; 395 | } 396 | 397 | &:nth-child(14) { 398 | @extend %on; 399 | } 400 | 401 | &:nth-child(15) { 402 | @extend %on; 403 | } 404 | 405 | &:nth-child(22) { 406 | @extend %on; 407 | } 408 | 409 | &:nth-child(23) { 410 | @extend %on; 411 | } 412 | 413 | &:nth-child(32) { 414 | @extend %on; 415 | } 416 | 417 | &:nth-child(33) { 418 | @extend %on; 419 | } 420 | 421 | &:nth-child(39) { 422 | @extend %on; 423 | } 424 | 425 | &:nth-child(40) { 426 | @extend %on; 427 | } 428 | 429 | &:nth-child(41) { 430 | @extend %on; 431 | } 432 | 433 | &:nth-child(43) { 434 | @extend %on; 435 | } 436 | 437 | &:nth-child(48) { 438 | @extend %on; 439 | } 440 | 441 | &:nth-child(50) { 442 | @extend %on; 443 | } 444 | 445 | &:nth-child(56) { 446 | @extend %on; 447 | } 448 | 449 | &:nth-child(57) { 450 | @extend %on; 451 | } 452 | 453 | &:nth-child(59) { 454 | @extend %on; 455 | } 456 | 457 | &:nth-child(68) { 458 | @extend %on; 459 | } 460 | 461 | &:nth-child(78) { 462 | @extend %on; 463 | } 464 | } 465 | } 466 | 467 | .j7 .dots, .j8 .dots { 468 | padding-bottom: ($DOT_SIZE + $DOT_GAP) * 16; 469 | 470 | .dot { 471 | &:nth-child(3) { 472 | @extend %on; 473 | } 474 | 475 | &:nth-child(5) { 476 | @extend %on; 477 | } 478 | 479 | &:nth-child(6) { 480 | @extend %on; 481 | } 482 | 483 | &:nth-child(12) { 484 | @extend %on; 485 | } 486 | 487 | &:nth-child(14) { 488 | @extend %on; 489 | } 490 | 491 | &:nth-child(15) { 492 | @extend %on; 493 | } 494 | 495 | &:nth-child(22) { 496 | @extend %on; 497 | } 498 | 499 | &:nth-child(23) { 500 | @extend %on; 501 | } 502 | 503 | &:nth-child(32) { 504 | @extend %on; 505 | } 506 | 507 | &:nth-child(33) { 508 | @extend %on; 509 | } 510 | 511 | &:nth-child(39) { 512 | @extend %on; 513 | } 514 | 515 | &:nth-child(40) { 516 | @extend %on; 517 | } 518 | 519 | &:nth-child(41) { 520 | @extend %on; 521 | } 522 | 523 | &:nth-child(43) { 524 | @extend %on; 525 | } 526 | 527 | &:nth-child(48) { 528 | @extend %on; 529 | } 530 | 531 | &:nth-child(50) { 532 | @extend %on; 533 | } 534 | 535 | &:nth-child(56) { 536 | @extend %on; 537 | } 538 | 539 | &:nth-child(57) { 540 | @extend %on; 541 | } 542 | 543 | &:nth-child(59) { 544 | @extend %on; 545 | } 546 | 547 | &:nth-child(68) { 548 | @extend %on; 549 | } 550 | 551 | &:nth-child(78) { 552 | @extend %on; 553 | } 554 | } 555 | } 556 | 557 | .j11 .dots { 558 | padding-bottom: ($DOT_SIZE + $DOT_GAP) * 2; 559 | 560 | .dot { 561 | &:nth-child(4) { 562 | @extend %on; 563 | } 564 | 565 | &:nth-child(6) { 566 | @extend %on; 567 | } 568 | 569 | &:nth-child(7) { 570 | @extend %on; 571 | } 572 | 573 | &:nth-child(14) { 574 | @extend %on; 575 | } 576 | 577 | &:nth-child(15) { 578 | @extend %on; 579 | } 580 | 581 | &:nth-child(16) { 582 | @extend %on; 583 | } 584 | 585 | &:nth-child(25) { 586 | @extend %on; 587 | } 588 | 589 | &:nth-child(34) { 590 | @extend %on; 591 | } 592 | 593 | &:nth-child(35) { 594 | @extend %on; 595 | } 596 | 597 | &:nth-child(43) { 598 | @extend %on; 599 | } 600 | 601 | &:nth-child(44) { 602 | @extend %on; 603 | } 604 | 605 | &:nth-child(50) { 606 | @extend %on; 607 | } 608 | 609 | &:nth-child(51) { 610 | @extend %on; 611 | } 612 | 613 | &:nth-child(52) { 614 | @extend %on; 615 | } 616 | 617 | &:nth-child(58) { 618 | @extend %on; 619 | } 620 | 621 | &:nth-child(61) { 622 | @extend %on; 623 | } 624 | 625 | &:nth-child(66) { 626 | @extend %on; 627 | } 628 | 629 | &:nth-child(67) { 630 | @extend %on; 631 | } 632 | 633 | &:nth-child(70) { 634 | @extend %on; 635 | } 636 | 637 | &:nth-child(78) { 638 | @extend %on; 639 | } 640 | 641 | &:nth-child(79) { 642 | @extend %on; 643 | } 644 | } 645 | } 646 | 647 | .j12 .dots { 648 | .dot { 649 | &:nth-child(15) { 650 | @extend %on; 651 | } 652 | 653 | &:nth-child(16) { 654 | @extend %on; 655 | } 656 | 657 | &:nth-child(23) { 658 | @extend %on; 659 | } 660 | 661 | &:nth-child(24) { 662 | @extend %on; 663 | } 664 | 665 | &:nth-child(25) { 666 | @extend %on; 667 | } 668 | 669 | &:nth-child(34) { 670 | @extend %on; 671 | } 672 | 673 | &:nth-child(35) { 674 | @extend %on; 675 | } 676 | 677 | &:nth-child(44) { 678 | @extend %on; 679 | } 680 | 681 | &:nth-child(51) { 682 | @extend %on; 683 | } 684 | 685 | &:nth-child(52) { 686 | @extend %on; 687 | } 688 | 689 | &:nth-child(61) { 690 | @extend %on; 691 | } 692 | 693 | &:nth-child(62) { 694 | @extend %on; 695 | } 696 | 697 | &:nth-child(71) { 698 | @extend %on; 699 | } 700 | 701 | &:nth-child(72) { 702 | @extend %on; 703 | } 704 | 705 | &:nth-child(79) { 706 | @extend %on; 707 | } 708 | 709 | &:nth-child(80) { 710 | @extend %on; 711 | } 712 | } 713 | } 714 | 715 | .j13 .dots { 716 | .dot { 717 | &:nth-child(24) { 718 | @extend %on; 719 | } 720 | 721 | &:nth-child(25) { 722 | @extend %on; 723 | } 724 | 725 | &:nth-child(33) { 726 | @extend %on; 727 | } 728 | 729 | &:nth-child(34) { 730 | @extend %on; 731 | } 732 | 733 | &:nth-child(35) { 734 | @extend %on; 735 | } 736 | 737 | &:nth-child(41) { 738 | @extend %on; 739 | } 740 | 741 | &:nth-child(42) { 742 | @extend %on; 743 | } 744 | 745 | &:nth-child(43) { 746 | @extend %on; 747 | } 748 | 749 | &:nth-child(45) { 750 | @extend %on; 751 | } 752 | 753 | &:nth-child(52) { 754 | @extend %on; 755 | } 756 | 757 | &:nth-child(53) { 758 | @extend %on; 759 | } 760 | 761 | &:nth-child(54) { 762 | @extend %on; 763 | } 764 | 765 | &:nth-child(60) { 766 | @extend %on; 767 | } 768 | 769 | &:nth-child(61) { 770 | @extend %on; 771 | } 772 | 773 | &:nth-child(70) { 774 | @extend %on; 775 | } 776 | 777 | &:nth-child(71) { 778 | @extend %on; 779 | } 780 | 781 | &:nth-child(78) { 782 | @extend %on; 783 | } 784 | 785 | &:nth-child(79) { 786 | @extend %on; 787 | } 788 | 789 | &:nth-child(80) { 790 | @extend %on; 791 | } 792 | 793 | &:nth-child(81) { 794 | @extend %on; 795 | } 796 | } 797 | } 798 | 799 | .j14 .dots { 800 | .dot { 801 | &:nth-child(33) { 802 | @extend %on; 803 | } 804 | 805 | &:nth-child(34) { 806 | @extend %on; 807 | } 808 | 809 | &:nth-child(42) { 810 | @extend %on; 811 | } 812 | 813 | &:nth-child(43) { 814 | @extend %on; 815 | } 816 | 817 | &:nth-child(52) { 818 | @extend %on; 819 | } 820 | 821 | &:nth-child(53) { 822 | @extend %on; 823 | } 824 | 825 | &:nth-child(54) { 826 | @extend %on; 827 | } 828 | 829 | &:nth-child(59) { 830 | @extend %on; 831 | } 832 | 833 | &:nth-child(60) { 834 | @extend %on; 835 | } 836 | 837 | &:nth-child(63) { 838 | @extend %on; 839 | } 840 | 841 | &:nth-child(70) { 842 | @extend %on; 843 | } 844 | 845 | &:nth-child(71) { 846 | @extend %on; 847 | } 848 | 849 | &:nth-child(72) { 850 | @extend %on; 851 | } 852 | 853 | &:nth-child(79) { 854 | @extend %on; 855 | } 856 | 857 | &:nth-child(80) { 858 | @extend %on; 859 | } 860 | 861 | &:nth-child(81) { 862 | @extend %on; 863 | } 864 | } 865 | } 866 | 867 | .j15 .dots { 868 | .dot { 869 | &:nth-child(6) { 870 | @extend %on; 871 | } 872 | 873 | &:nth-child(7) { 874 | @extend %on; 875 | } 876 | 877 | &:nth-child(15) { 878 | @extend %on; 879 | } 880 | 881 | &:nth-child(16) { 882 | @extend %on; 883 | } 884 | 885 | &:nth-child(25) { 886 | @extend %on; 887 | } 888 | 889 | &:nth-child(26) { 890 | @extend %on; 891 | } 892 | 893 | &:nth-child(32) { 894 | @extend %on; 895 | } 896 | 897 | &:nth-child(33) { 898 | @extend %on; 899 | } 900 | 901 | &:nth-child(34) { 902 | @extend %on; 903 | } 904 | 905 | &:nth-child(35) { 906 | @extend %on; 907 | } 908 | 909 | &:nth-child(43) { 910 | @extend %on; 911 | } 912 | 913 | &:nth-child(44) { 914 | @extend %on; 915 | } 916 | 917 | &:nth-child(51) { 918 | @extend %on; 919 | } 920 | 921 | &:nth-child(52) { 922 | @extend %on; 923 | } 924 | 925 | &:nth-child(53) { 926 | @extend %on; 927 | } 928 | 929 | &:nth-child(54) { 930 | @extend %on; 931 | } 932 | 933 | &:nth-child(62) { 934 | @extend %on; 935 | } 936 | 937 | &:nth-child(72) { 938 | @extend %on; 939 | } 940 | 941 | &:nth-child(80) { 942 | @extend %on; 943 | } 944 | 945 | &:nth-child(81) { 946 | @extend %on; 947 | } 948 | } 949 | } 950 | 951 | .j16 .dots { 952 | .dot { 953 | &:nth-child(4) { 954 | @extend %on; 955 | } 956 | 957 | &:nth-child(5) { 958 | @extend %on; 959 | } 960 | 961 | &:nth-child(13) { 962 | @extend %on; 963 | } 964 | 965 | &:nth-child(14) { 966 | @extend %on; 967 | } 968 | 969 | &:nth-child(21) { 970 | @extend %on; 971 | } 972 | 973 | &:nth-child(23) { 974 | @extend %on; 975 | } 976 | 977 | &:nth-child(24) { 978 | @extend %on; 979 | } 980 | 981 | &:nth-child(25) { 982 | @extend %on; 983 | } 984 | 985 | &:nth-child(31) { 986 | @extend %on; 987 | } 988 | 989 | &:nth-child(32) { 990 | @extend %on; 991 | } 992 | 993 | &:nth-child(34) { 994 | @extend %on; 995 | } 996 | 997 | &:nth-child(40) { 998 | @extend %on; 999 | } 1000 | 1001 | &:nth-child(41) { 1002 | @extend %on; 1003 | } 1004 | 1005 | &:nth-child(42) { 1006 | @extend %on; 1007 | } 1008 | 1009 | &:nth-child(49) { 1010 | @extend %on; 1011 | } 1012 | 1013 | &:nth-child(51) { 1014 | @extend %on; 1015 | } 1016 | 1017 | &:nth-child(59) { 1018 | @extend %on; 1019 | } 1020 | 1021 | &:nth-child(61) { 1022 | @extend %on; 1023 | } 1024 | 1025 | &:nth-child(71) { 1026 | @extend %on; 1027 | } 1028 | 1029 | &:nth-child(81) { 1030 | @extend %on; 1031 | } 1032 | } 1033 | } 1034 | 1035 | .j17 .dots { 1036 | .dot { 1037 | &:nth-child(3) { 1038 | @extend %on; 1039 | } 1040 | 1041 | &:nth-child(4) { 1042 | @extend %on; 1043 | } 1044 | 1045 | &:nth-child(12) { 1046 | @extend %on; 1047 | } 1048 | 1049 | &:nth-child(13) { 1050 | @extend %on; 1051 | } 1052 | 1053 | &:nth-child(22) { 1054 | @extend %on; 1055 | } 1056 | 1057 | &:nth-child(23) { 1058 | @extend %on; 1059 | } 1060 | 1061 | &:nth-child(29) { 1062 | @extend %on; 1063 | } 1064 | 1065 | &:nth-child(30) { 1066 | @extend %on; 1067 | } 1068 | 1069 | &:nth-child(31) { 1070 | @extend %on; 1071 | } 1072 | 1073 | &:nth-child(33) { 1074 | @extend %on; 1075 | } 1076 | 1077 | &:nth-child(40) { 1078 | @extend %on; 1079 | } 1080 | 1081 | &:nth-child(41) { 1082 | @extend %on; 1083 | } 1084 | 1085 | &:nth-child(47) { 1086 | @extend %on; 1087 | } 1088 | 1089 | &:nth-child(48) { 1090 | @extend %on; 1091 | } 1092 | 1093 | &:nth-child(49) { 1094 | @extend %on; 1095 | } 1096 | 1097 | &:nth-child(56) { 1098 | @extend %on; 1099 | } 1100 | 1101 | &:nth-child(59) { 1102 | @extend %on; 1103 | } 1104 | 1105 | &:nth-child(60) { 1106 | @extend %on; 1107 | } 1108 | 1109 | &:nth-child(61) { 1110 | @extend %on; 1111 | } 1112 | 1113 | &:nth-child(62) { 1114 | @extend %on; 1115 | } 1116 | 1117 | &:nth-child(65) { 1118 | @extend %on; 1119 | } 1120 | 1121 | &:nth-child(71) { 1122 | @extend %on; 1123 | } 1124 | 1125 | &:nth-child(73) { 1126 | @extend %on; 1127 | } 1128 | 1129 | &:nth-child(74) { 1130 | @extend %on; 1131 | } 1132 | } 1133 | } -------------------------------------------------------------------------------- /carnvas-demo/_scss/_main.scss: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 3 | -webkit-touch-callout: none; 4 | -webkit-user-select: none; 5 | -webkit-backface-visibility: visible; 6 | } 7 | 8 | html { 9 | cursor: pointer; 10 | } 11 | 12 | body { 13 | background: #000; 14 | } 15 | 16 | #reverse:target { 17 | transform: rotateY(180deg); 18 | } 19 | 20 | #video { 21 | position: absolute; 22 | top: 0; left: 0; 23 | width: 1px; height: 1px; 24 | opacity: 0; 25 | } 26 | 27 | #canvas { 28 | position: absolute; 29 | top: 0; left: 0; 30 | width: 100%; height: 100%; 31 | } 32 | 33 | #stage { 34 | position: absolute; 35 | top: 0; bottom: 0; 36 | left: 0; right: 0; 37 | } 38 | 39 | .dots { 40 | $DOTS_SIZE : ($DOT_SIZE + $DOT_GAP) * 9 + $DOT_GAP; 41 | position: absolute; 42 | top: 0; bottom: 0; 43 | left: 0; right: 0; 44 | margin: auto; 45 | padding: $DOT_GAP / 2; 46 | width: $DOTS_SIZE; height: $DOTS_SIZE; 47 | overflow: hidden; 48 | } 49 | 50 | .dot { 51 | float: left; 52 | margin: $DOT_GAP / 2; 53 | border-radius: 2px; 54 | width: $DOT_SIZE; height: $DOT_SIZE; 55 | font-size: 10px; 56 | text-indent: -9999px; 57 | } -------------------------------------------------------------------------------- /carnvas-demo/_scss/_run.scss: -------------------------------------------------------------------------------- 1 | .r0 .dots { 2 | .dot { 3 | &:nth-child(3) { 4 | @extend %on; 5 | } 6 | 7 | &:nth-child(4) { 8 | @extend %on; 9 | } 10 | 11 | &:nth-child(12) { 12 | @extend %on; 13 | } 14 | 15 | &:nth-child(13) { 16 | @extend %on; 17 | } 18 | 19 | &:nth-child(22) { 20 | @extend %on; 21 | } 22 | 23 | &:nth-child(23) { 24 | @extend %on; 25 | } 26 | 27 | &:nth-child(29) { 28 | @extend %on; 29 | } 30 | 31 | &:nth-child(30) { 32 | @extend %on; 33 | } 34 | 35 | &:nth-child(31) { 36 | @extend %on; 37 | } 38 | 39 | &:nth-child(33) { 40 | @extend %on; 41 | } 42 | 43 | &:nth-child(40) { 44 | @extend %on; 45 | } 46 | 47 | &:nth-child(41) { 48 | @extend %on; 49 | } 50 | 51 | &:nth-child(48) { 52 | @extend %on; 53 | } 54 | 55 | &:nth-child(49) { 56 | @extend %on; 57 | } 58 | 59 | &:nth-child(50) { 60 | @extend %on; 61 | } 62 | 63 | &:nth-child(56) { 64 | @extend %on; 65 | } 66 | 67 | &:nth-child(60) { 68 | @extend %on; 69 | } 70 | 71 | &:nth-child(61) { 72 | @extend %on; 73 | } 74 | 75 | &:nth-child(62) { 76 | @extend %on; 77 | } 78 | 79 | &:nth-child(63) { 80 | @extend %on; 81 | } 82 | 83 | &:nth-child(65) { 84 | @extend %on; 85 | } 86 | 87 | &:nth-child(72) { 88 | @extend %on; 89 | } 90 | 91 | &:nth-child(73) { 92 | @extend %on; 93 | } 94 | 95 | &:nth-child(74) { 96 | @extend %on; 97 | } 98 | } 99 | } 100 | 101 | .r1 .dots { 102 | .dot { 103 | &:nth-child(3) { 104 | @extend %on; 105 | } 106 | 107 | &:nth-child(4) { 108 | @extend %on; 109 | } 110 | 111 | &:nth-child(12) { 112 | @extend %on; 113 | } 114 | 115 | &:nth-child(13) { 116 | @extend %on; 117 | } 118 | 119 | &:nth-child(22) { 120 | @extend %on; 121 | } 122 | 123 | &:nth-child(23) { 124 | @extend %on; 125 | } 126 | 127 | &:nth-child(29) { 128 | @extend %on; 129 | } 130 | 131 | &:nth-child(30) { 132 | @extend %on; 133 | } 134 | 135 | &:nth-child(31) { 136 | @extend %on; 137 | } 138 | 139 | &:nth-child(32) { 140 | @extend %on; 141 | } 142 | 143 | &:nth-child(40) { 144 | @extend %on; 145 | } 146 | 147 | &:nth-child(48) { 148 | @extend %on; 149 | } 150 | 151 | &:nth-child(50) { 152 | @extend %on; 153 | } 154 | 155 | &:nth-child(52) { 156 | @extend %on; 157 | } 158 | 159 | &:nth-child(53) { 160 | @extend %on; 161 | } 162 | 163 | &:nth-child(56) { 164 | @extend %on; 165 | } 166 | 167 | &:nth-child(60) { 168 | @extend %on; 169 | } 170 | 171 | &:nth-child(65) { 172 | @extend %on; 173 | } 174 | 175 | &:nth-child(73) { 176 | @extend %on; 177 | } 178 | 179 | &:nth-child(74) { 180 | @extend %on; 181 | } 182 | } 183 | } 184 | 185 | .r2 .dots { 186 | .dot { 187 | &:nth-child(3) { 188 | @extend %on; 189 | } 190 | 191 | &:nth-child(4) { 192 | @extend %on; 193 | } 194 | 195 | &:nth-child(12) { 196 | @extend %on; 197 | } 198 | 199 | &:nth-child(13) { 200 | @extend %on; 201 | } 202 | 203 | &:nth-child(22) { 204 | @extend %on; 205 | } 206 | 207 | &:nth-child(30) { 208 | @extend %on; 209 | } 210 | 211 | &:nth-child(31) { 212 | @extend %on; 213 | } 214 | 215 | &:nth-child(40) { 216 | @extend %on; 217 | } 218 | 219 | &:nth-child(48) { 220 | @extend %on; 221 | } 222 | 223 | &:nth-child(50) { 224 | @extend %on; 225 | } 226 | 227 | &:nth-child(52) { 228 | @extend %on; 229 | } 230 | 231 | &:nth-child(57) { 232 | @extend %on; 233 | } 234 | 235 | &:nth-child(59) { 236 | @extend %on; 237 | } 238 | 239 | &:nth-child(60) { 240 | @extend %on; 241 | } 242 | 243 | &:nth-child(65) { 244 | @extend %on; 245 | } 246 | 247 | &:nth-child(73) { 248 | @extend %on; 249 | } 250 | 251 | &:nth-child(74) { 252 | @extend %on; 253 | } 254 | } 255 | } 256 | 257 | .r3 .dots { 258 | .dot { 259 | &:nth-child(2) { 260 | @extend %on; 261 | } 262 | 263 | &:nth-child(3) { 264 | @extend %on; 265 | } 266 | 267 | &:nth-child(11) { 268 | @extend %on; 269 | } 270 | 271 | &:nth-child(12) { 272 | @extend %on; 273 | } 274 | 275 | &:nth-child(21) { 276 | @extend %on; 277 | } 278 | 279 | &:nth-child(22) { 280 | @extend %on; 281 | } 282 | 283 | &:nth-child(29) { 284 | @extend %on; 285 | } 286 | 287 | &:nth-child(30) { 288 | @extend %on; 289 | } 290 | 291 | &:nth-child(31) { 292 | @extend %on; 293 | } 294 | 295 | &:nth-child(39) { 296 | @extend %on; 297 | } 298 | 299 | &:nth-child(47) { 300 | @extend %on; 301 | } 302 | 303 | &:nth-child(48) { 304 | @extend %on; 305 | } 306 | 307 | &:nth-child(50) { 308 | @extend %on; 309 | } 310 | 311 | &:nth-child(56) { 312 | @extend %on; 313 | } 314 | 315 | &:nth-child(57) { 316 | @extend %on; 317 | } 318 | 319 | &:nth-child(58) { 320 | @extend %on; 321 | } 322 | 323 | &:nth-child(65) { 324 | @extend %on; 325 | } 326 | 327 | &:nth-child(73) { 328 | @extend %on; 329 | } 330 | 331 | &:nth-child(74) { 332 | @extend %on; 333 | } 334 | } 335 | } 336 | 337 | .r4 .dots { 338 | .dot { 339 | &:nth-child(2) { 340 | @extend %on; 341 | } 342 | 343 | &:nth-child(3) { 344 | @extend %on; 345 | } 346 | 347 | &:nth-child(11) { 348 | @extend %on; 349 | } 350 | 351 | &:nth-child(12) { 352 | @extend %on; 353 | } 354 | 355 | &:nth-child(21) { 356 | @extend %on; 357 | } 358 | 359 | &:nth-child(28) { 360 | @extend %on; 361 | } 362 | 363 | &:nth-child(29) { 364 | @extend %on; 365 | } 366 | 367 | &:nth-child(30) { 368 | @extend %on; 369 | } 370 | 371 | &:nth-child(39) { 372 | @extend %on; 373 | } 374 | 375 | &:nth-child(48) { 376 | @extend %on; 377 | } 378 | 379 | &:nth-child(49) { 380 | @extend %on; 381 | } 382 | 383 | &:nth-child(56) { 384 | @extend %on; 385 | } 386 | 387 | &:nth-child(57) { 388 | @extend %on; 389 | } 390 | 391 | &:nth-child(66) { 392 | @extend %on; 393 | } 394 | 395 | &:nth-child(74) { 396 | @extend %on; 397 | } 398 | 399 | &:nth-child(75) { 400 | @extend %on; 401 | } 402 | } 403 | } 404 | 405 | .r5 .dots { 406 | .dot { 407 | &:nth-child(2) { 408 | @extend %on; 409 | } 410 | 411 | &:nth-child(3) { 412 | @extend %on; 413 | } 414 | 415 | &:nth-child(11) { 416 | @extend %on; 417 | } 418 | 419 | &:nth-child(12) { 420 | @extend %on; 421 | } 422 | 423 | &:nth-child(21) { 424 | @extend %on; 425 | } 426 | 427 | &:nth-child(22) { 428 | @extend %on; 429 | } 430 | 431 | &:nth-child(28) { 432 | @extend %on; 433 | } 434 | 435 | &:nth-child(29) { 436 | @extend %on; 437 | } 438 | 439 | &:nth-child(30) { 440 | @extend %on; 441 | } 442 | 443 | &:nth-child(31) { 444 | @extend %on; 445 | } 446 | 447 | &:nth-child(39) { 448 | @extend %on; 449 | } 450 | 451 | &:nth-child(40) { 452 | @extend %on; 453 | } 454 | 455 | &:nth-child(47) { 456 | @extend %on; 457 | } 458 | 459 | &:nth-child(48) { 460 | @extend %on; 461 | } 462 | 463 | &:nth-child(49) { 464 | @extend %on; 465 | } 466 | 467 | &:nth-child(50) { 468 | @extend %on; 469 | } 470 | 471 | &:nth-child(58) { 472 | @extend %on; 473 | } 474 | 475 | &:nth-child(68) { 476 | @extend %on; 477 | } 478 | 479 | &:nth-child(76) { 480 | @extend %on; 481 | } 482 | 483 | &:nth-child(77) { 484 | @extend %on; 485 | } 486 | } 487 | } 488 | 489 | .r6 .dots { 490 | .dot { 491 | &:nth-child(2) { 492 | @extend %on; 493 | } 494 | 495 | &:nth-child(3) { 496 | @extend %on; 497 | } 498 | 499 | &:nth-child(11) { 500 | @extend %on; 501 | } 502 | 503 | &:nth-child(12) { 504 | @extend %on; 505 | } 506 | 507 | &:nth-child(19) { 508 | @extend %on; 509 | } 510 | 511 | &:nth-child(21) { 512 | @extend %on; 513 | } 514 | 515 | &:nth-child(22) { 516 | @extend %on; 517 | } 518 | 519 | &:nth-child(23) { 520 | @extend %on; 521 | } 522 | 523 | &:nth-child(29) { 524 | @extend %on; 525 | } 526 | 527 | &:nth-child(30) { 528 | @extend %on; 529 | } 530 | 531 | &:nth-child(32) { 532 | @extend %on; 533 | } 534 | 535 | &:nth-child(38) { 536 | @extend %on; 537 | } 538 | 539 | &:nth-child(39) { 540 | @extend %on; 541 | } 542 | 543 | &:nth-child(40) { 544 | @extend %on; 545 | } 546 | 547 | &:nth-child(47) { 548 | @extend %on; 549 | } 550 | 551 | &:nth-child(49) { 552 | @extend %on; 553 | } 554 | 555 | &:nth-child(57) { 556 | @extend %on; 557 | } 558 | 559 | &:nth-child(59) { 560 | @extend %on; 561 | } 562 | 563 | &:nth-child(69) { 564 | @extend %on; 565 | } 566 | 567 | &:nth-child(79) { 568 | @extend %on; 569 | } 570 | } 571 | } 572 | 573 | .r7 .dots { 574 | .dot { 575 | &:nth-child(3) { 576 | @extend %on; 577 | } 578 | 579 | &:nth-child(4) { 580 | @extend %on; 581 | } 582 | 583 | &:nth-child(12) { 584 | @extend %on; 585 | } 586 | 587 | &:nth-child(13) { 588 | @extend %on; 589 | } 590 | 591 | &:nth-child(20) { 592 | @extend %on; 593 | } 594 | 595 | &:nth-child(22) { 596 | @extend %on; 597 | } 598 | 599 | &:nth-child(23) { 600 | @extend %on; 601 | } 602 | 603 | &:nth-child(30) { 604 | @extend %on; 605 | } 606 | 607 | &:nth-child(31) { 608 | @extend %on; 609 | } 610 | 611 | &:nth-child(33) { 612 | @extend %on; 613 | } 614 | 615 | &:nth-child(40) { 616 | @extend %on; 617 | } 618 | 619 | &:nth-child(48) { 620 | @extend %on; 621 | } 622 | 623 | &:nth-child(50) { 624 | @extend %on; 625 | } 626 | 627 | &:nth-child(56) { 628 | @extend %on; 629 | } 630 | 631 | &:nth-child(60) { 632 | @extend %on; 633 | } 634 | 635 | &:nth-child(66) { 636 | @extend %on; 637 | } 638 | 639 | &:nth-child(70) { 640 | @extend %on; 641 | } 642 | 643 | &:nth-child(80) { 644 | @extend %on; 645 | } 646 | } 647 | } 648 | 649 | .r8 .dots { 650 | .dot { 651 | &:nth-child(3) { 652 | @extend %on; 653 | } 654 | 655 | &:nth-child(4) { 656 | @extend %on; 657 | } 658 | 659 | &:nth-child(12) { 660 | @extend %on; 661 | } 662 | 663 | &:nth-child(13) { 664 | @extend %on; 665 | } 666 | 667 | &:nth-child(20) { 668 | @extend %on; 669 | } 670 | 671 | &:nth-child(22) { 672 | @extend %on; 673 | } 674 | 675 | &:nth-child(23) { 676 | @extend %on; 677 | } 678 | 679 | &:nth-child(30) { 680 | @extend %on; 681 | } 682 | 683 | &:nth-child(31) { 684 | @extend %on; 685 | } 686 | 687 | &:nth-child(33) { 688 | @extend %on; 689 | } 690 | 691 | &:nth-child(40) { 692 | @extend %on; 693 | } 694 | 695 | &:nth-child(41) { 696 | @extend %on; 697 | } 698 | 699 | &:nth-child(47) { 700 | @extend %on; 701 | } 702 | 703 | &:nth-child(48) { 704 | @extend %on; 705 | } 706 | 707 | &:nth-child(49) { 708 | @extend %on; 709 | } 710 | 711 | &:nth-child(56) { 712 | @extend %on; 713 | } 714 | 715 | &:nth-child(59) { 716 | @extend %on; 717 | } 718 | 719 | &:nth-child(65) { 720 | @extend %on; 721 | } 722 | 723 | &:nth-child(69) { 724 | @extend %on; 725 | } 726 | 727 | &:nth-child(70) { 728 | @extend %on; 729 | } 730 | 731 | &:nth-child(71) { 732 | @extend %on; 733 | } 734 | 735 | &:nth-child(73) { 736 | @extend %on; 737 | } 738 | 739 | &:nth-child(74) { 740 | @extend %on; 741 | } 742 | } 743 | } 744 | 745 | .r9 .dots { 746 | .dot { 747 | &:nth-child(3) { 748 | @extend %on; 749 | } 750 | 751 | &:nth-child(4) { 752 | @extend %on; 753 | } 754 | 755 | &:nth-child(12) { 756 | @extend %on; 757 | } 758 | 759 | &:nth-child(13) { 760 | @extend %on; 761 | } 762 | 763 | &:nth-child(22) { 764 | @extend %on; 765 | } 766 | 767 | &:nth-child(23) { 768 | @extend %on; 769 | } 770 | 771 | &:nth-child(29) { 772 | @extend %on; 773 | } 774 | 775 | &:nth-child(30) { 776 | @extend %on; 777 | } 778 | 779 | &:nth-child(31) { 780 | @extend %on; 781 | } 782 | 783 | &:nth-child(33) { 784 | @extend %on; 785 | } 786 | 787 | &:nth-child(40) { 788 | @extend %on; 789 | } 790 | 791 | &:nth-child(41) { 792 | @extend %on; 793 | } 794 | 795 | &:nth-child(48) { 796 | @extend %on; 797 | } 798 | 799 | &:nth-child(49) { 800 | @extend %on; 801 | } 802 | 803 | &:nth-child(50) { 804 | @extend %on; 805 | } 806 | 807 | &:nth-child(56) { 808 | @extend %on; 809 | } 810 | 811 | &:nth-child(59) { 812 | @extend %on; 813 | } 814 | 815 | &:nth-child(60) { 816 | @extend %on; 817 | } 818 | 819 | &:nth-child(61) { 820 | @extend %on; 821 | } 822 | 823 | &:nth-child(62) { 824 | @extend %on; 825 | } 826 | 827 | &:nth-child(65) { 828 | @extend %on; 829 | } 830 | 831 | &:nth-child(71) { 832 | @extend %on; 833 | } 834 | 835 | &:nth-child(73) { 836 | @extend %on; 837 | } 838 | 839 | &:nth-child(74) { 840 | @extend %on; 841 | } 842 | } 843 | } 844 | 845 | .r10 .dots { 846 | .dot { 847 | &:nth-child(3) { 848 | @extend %on; 849 | } 850 | 851 | &:nth-child(4) { 852 | @extend %on; 853 | } 854 | 855 | &:nth-child(12) { 856 | @extend %on; 857 | } 858 | 859 | &:nth-child(13) { 860 | @extend %on; 861 | } 862 | 863 | &:nth-child(22) { 864 | @extend %on; 865 | } 866 | 867 | &:nth-child(23) { 868 | @extend %on; 869 | } 870 | 871 | &:nth-child(29) { 872 | @extend %on; 873 | } 874 | 875 | &:nth-child(30) { 876 | @extend %on; 877 | } 878 | 879 | &:nth-child(31) { 880 | @extend %on; 881 | } 882 | 883 | &:nth-child(32) { 884 | @extend %on; 885 | } 886 | 887 | &:nth-child(40) { 888 | @extend %on; 889 | } 890 | 891 | &:nth-child(48) { 892 | @extend %on; 893 | } 894 | 895 | &:nth-child(50) { 896 | @extend %on; 897 | } 898 | 899 | &:nth-child(52) { 900 | @extend %on; 901 | } 902 | 903 | &:nth-child(53) { 904 | @extend %on; 905 | } 906 | 907 | &:nth-child(56) { 908 | @extend %on; 909 | } 910 | 911 | &:nth-child(60) { 912 | @extend %on; 913 | } 914 | 915 | &:nth-child(65) { 916 | @extend %on; 917 | } 918 | 919 | &:nth-child(73) { 920 | @extend %on; 921 | } 922 | 923 | &:nth-child(74) { 924 | @extend %on; 925 | } 926 | } 927 | } 928 | 929 | .r11 .dots { 930 | .dot { 931 | &:nth-child(3) { 932 | @extend %on; 933 | } 934 | 935 | &:nth-child(4) { 936 | @extend %on; 937 | } 938 | 939 | &:nth-child(12) { 940 | @extend %on; 941 | } 942 | 943 | &:nth-child(13) { 944 | @extend %on; 945 | } 946 | 947 | &:nth-child(22) { 948 | @extend %on; 949 | } 950 | 951 | &:nth-child(30) { 952 | @extend %on; 953 | } 954 | 955 | &:nth-child(31) { 956 | @extend %on; 957 | } 958 | 959 | &:nth-child(40) { 960 | @extend %on; 961 | } 962 | 963 | &:nth-child(48) { 964 | @extend %on; 965 | } 966 | 967 | &:nth-child(50) { 968 | @extend %on; 969 | } 970 | 971 | &:nth-child(52) { 972 | @extend %on; 973 | } 974 | 975 | &:nth-child(57) { 976 | @extend %on; 977 | } 978 | 979 | &:nth-child(59) { 980 | @extend %on; 981 | } 982 | 983 | &:nth-child(60) { 984 | @extend %on; 985 | } 986 | 987 | &:nth-child(65) { 988 | @extend %on; 989 | } 990 | 991 | &:nth-child(73) { 992 | @extend %on; 993 | } 994 | 995 | &:nth-child(74) { 996 | @extend %on; 997 | } 998 | } 999 | } 1000 | 1001 | .r12 .dots { 1002 | .dot { 1003 | &:nth-child(2) { 1004 | @extend %on; 1005 | } 1006 | 1007 | &:nth-child(3) { 1008 | @extend %on; 1009 | } 1010 | 1011 | &:nth-child(11) { 1012 | @extend %on; 1013 | } 1014 | 1015 | &:nth-child(12) { 1016 | @extend %on; 1017 | } 1018 | 1019 | &:nth-child(21) { 1020 | @extend %on; 1021 | } 1022 | 1023 | &:nth-child(22) { 1024 | @extend %on; 1025 | } 1026 | 1027 | &:nth-child(29) { 1028 | @extend %on; 1029 | } 1030 | 1031 | &:nth-child(30) { 1032 | @extend %on; 1033 | } 1034 | 1035 | &:nth-child(31) { 1036 | @extend %on; 1037 | } 1038 | 1039 | &:nth-child(39) { 1040 | @extend %on; 1041 | } 1042 | 1043 | &:nth-child(47) { 1044 | @extend %on; 1045 | } 1046 | 1047 | &:nth-child(48) { 1048 | @extend %on; 1049 | } 1050 | 1051 | &:nth-child(50) { 1052 | @extend %on; 1053 | } 1054 | 1055 | &:nth-child(56) { 1056 | @extend %on; 1057 | } 1058 | 1059 | &:nth-child(57) { 1060 | @extend %on; 1061 | } 1062 | 1063 | &:nth-child(58) { 1064 | @extend %on; 1065 | } 1066 | 1067 | &:nth-child(65) { 1068 | @extend %on; 1069 | } 1070 | 1071 | &:nth-child(73) { 1072 | @extend %on; 1073 | } 1074 | 1075 | &:nth-child(74) { 1076 | @extend %on; 1077 | } 1078 | } 1079 | } 1080 | 1081 | .r13 .dots { 1082 | .dot { 1083 | &:nth-child(2) { 1084 | @extend %on; 1085 | } 1086 | 1087 | &:nth-child(3) { 1088 | @extend %on; 1089 | } 1090 | 1091 | &:nth-child(11) { 1092 | @extend %on; 1093 | } 1094 | 1095 | &:nth-child(12) { 1096 | @extend %on; 1097 | } 1098 | 1099 | &:nth-child(21) { 1100 | @extend %on; 1101 | } 1102 | 1103 | &:nth-child(28) { 1104 | @extend %on; 1105 | } 1106 | 1107 | &:nth-child(29) { 1108 | @extend %on; 1109 | } 1110 | 1111 | &:nth-child(30) { 1112 | @extend %on; 1113 | } 1114 | 1115 | &:nth-child(39) { 1116 | @extend %on; 1117 | } 1118 | 1119 | &:nth-child(48) { 1120 | @extend %on; 1121 | } 1122 | 1123 | &:nth-child(49) { 1124 | @extend %on; 1125 | } 1126 | 1127 | &:nth-child(56) { 1128 | @extend %on; 1129 | } 1130 | 1131 | &:nth-child(57) { 1132 | @extend %on; 1133 | } 1134 | 1135 | &:nth-child(66) { 1136 | @extend %on; 1137 | } 1138 | 1139 | &:nth-child(74) { 1140 | @extend %on; 1141 | } 1142 | 1143 | &:nth-child(75) { 1144 | @extend %on; 1145 | } 1146 | } 1147 | } 1148 | 1149 | .r14 .dots { 1150 | .dot { 1151 | &:nth-child(2) { 1152 | @extend %on; 1153 | } 1154 | 1155 | &:nth-child(3) { 1156 | @extend %on; 1157 | } 1158 | 1159 | &:nth-child(11) { 1160 | @extend %on; 1161 | } 1162 | 1163 | &:nth-child(12) { 1164 | @extend %on; 1165 | } 1166 | 1167 | &:nth-child(21) { 1168 | @extend %on; 1169 | } 1170 | 1171 | &:nth-child(22) { 1172 | @extend %on; 1173 | } 1174 | 1175 | &:nth-child(28) { 1176 | @extend %on; 1177 | } 1178 | 1179 | &:nth-child(29) { 1180 | @extend %on; 1181 | } 1182 | 1183 | &:nth-child(30) { 1184 | @extend %on; 1185 | } 1186 | 1187 | &:nth-child(31) { 1188 | @extend %on; 1189 | } 1190 | 1191 | &:nth-child(39) { 1192 | @extend %on; 1193 | } 1194 | 1195 | &:nth-child(40) { 1196 | @extend %on; 1197 | } 1198 | 1199 | &:nth-child(47) { 1200 | @extend %on; 1201 | } 1202 | 1203 | &:nth-child(48) { 1204 | @extend %on; 1205 | } 1206 | 1207 | &:nth-child(49) { 1208 | @extend %on; 1209 | } 1210 | 1211 | &:nth-child(50) { 1212 | @extend %on; 1213 | } 1214 | 1215 | &:nth-child(58) { 1216 | @extend %on; 1217 | } 1218 | 1219 | &:nth-child(68) { 1220 | @extend %on; 1221 | } 1222 | 1223 | &:nth-child(76) { 1224 | @extend %on; 1225 | } 1226 | 1227 | &:nth-child(77) { 1228 | @extend %on; 1229 | } 1230 | } 1231 | } 1232 | 1233 | .r15 .dots { 1234 | .dot { 1235 | &:nth-child(2) { 1236 | @extend %on; 1237 | } 1238 | 1239 | &:nth-child(3) { 1240 | @extend %on; 1241 | } 1242 | 1243 | &:nth-child(11) { 1244 | @extend %on; 1245 | } 1246 | 1247 | &:nth-child(12) { 1248 | @extend %on; 1249 | } 1250 | 1251 | &:nth-child(19) { 1252 | @extend %on; 1253 | } 1254 | 1255 | &:nth-child(21) { 1256 | @extend %on; 1257 | } 1258 | 1259 | &:nth-child(22) { 1260 | @extend %on; 1261 | } 1262 | 1263 | &:nth-child(23) { 1264 | @extend %on; 1265 | } 1266 | 1267 | &:nth-child(29) { 1268 | @extend %on; 1269 | } 1270 | 1271 | &:nth-child(30) { 1272 | @extend %on; 1273 | } 1274 | 1275 | &:nth-child(32) { 1276 | @extend %on; 1277 | } 1278 | 1279 | &:nth-child(38) { 1280 | @extend %on; 1281 | } 1282 | 1283 | &:nth-child(39) { 1284 | @extend %on; 1285 | } 1286 | 1287 | &:nth-child(40) { 1288 | @extend %on; 1289 | } 1290 | 1291 | &:nth-child(47) { 1292 | @extend %on; 1293 | } 1294 | 1295 | &:nth-child(49) { 1296 | @extend %on; 1297 | } 1298 | 1299 | &:nth-child(57) { 1300 | @extend %on; 1301 | } 1302 | 1303 | &:nth-child(59) { 1304 | @extend %on; 1305 | } 1306 | 1307 | &:nth-child(69) { 1308 | @extend %on; 1309 | } 1310 | 1311 | &:nth-child(79) { 1312 | @extend %on; 1313 | } 1314 | } 1315 | } 1316 | 1317 | .r16 .dots { 1318 | .dot { 1319 | &:nth-child(3) { 1320 | @extend %on; 1321 | } 1322 | 1323 | &:nth-child(4) { 1324 | @extend %on; 1325 | } 1326 | 1327 | &:nth-child(12) { 1328 | @extend %on; 1329 | } 1330 | 1331 | &:nth-child(13) { 1332 | @extend %on; 1333 | } 1334 | 1335 | &:nth-child(20) { 1336 | @extend %on; 1337 | } 1338 | 1339 | &:nth-child(22) { 1340 | @extend %on; 1341 | } 1342 | 1343 | &:nth-child(23) { 1344 | @extend %on; 1345 | } 1346 | 1347 | &:nth-child(30) { 1348 | @extend %on; 1349 | } 1350 | 1351 | &:nth-child(31) { 1352 | @extend %on; 1353 | } 1354 | 1355 | &:nth-child(33) { 1356 | @extend %on; 1357 | } 1358 | 1359 | &:nth-child(40) { 1360 | @extend %on; 1361 | } 1362 | 1363 | &:nth-child(42) { 1364 | @extend %on; 1365 | } 1366 | 1367 | &:nth-child(48) { 1368 | @extend %on; 1369 | } 1370 | 1371 | &:nth-child(50) { 1372 | @extend %on; 1373 | } 1374 | 1375 | &:nth-child(56) { 1376 | @extend %on; 1377 | } 1378 | 1379 | &:nth-child(60) { 1380 | @extend %on; 1381 | } 1382 | 1383 | &:nth-child(66) { 1384 | @extend %on; 1385 | } 1386 | 1387 | &:nth-child(70) { 1388 | @extend %on; 1389 | } 1390 | 1391 | &:nth-child(80) { 1392 | @extend %on; 1393 | } 1394 | } 1395 | } 1396 | 1397 | .r17 .dots { 1398 | .dot { 1399 | &:nth-child(3) { 1400 | @extend %on; 1401 | } 1402 | 1403 | &:nth-child(4) { 1404 | @extend %on; 1405 | } 1406 | 1407 | &:nth-child(12) { 1408 | @extend %on; 1409 | } 1410 | 1411 | &:nth-child(13) { 1412 | @extend %on; 1413 | } 1414 | 1415 | &:nth-child(20) { 1416 | @extend %on; 1417 | } 1418 | 1419 | &:nth-child(22) { 1420 | @extend %on; 1421 | } 1422 | 1423 | &:nth-child(23) { 1424 | @extend %on; 1425 | } 1426 | 1427 | &:nth-child(30) { 1428 | @extend %on; 1429 | } 1430 | 1431 | &:nth-child(31) { 1432 | @extend %on; 1433 | } 1434 | 1435 | &:nth-child(33) { 1436 | @extend %on; 1437 | } 1438 | 1439 | &:nth-child(40) { 1440 | @extend %on; 1441 | } 1442 | 1443 | &:nth-child(41) { 1444 | @extend %on; 1445 | } 1446 | 1447 | &:nth-child(47) { 1448 | @extend %on; 1449 | } 1450 | 1451 | &:nth-child(48) { 1452 | @extend %on; 1453 | } 1454 | 1455 | &:nth-child(49) { 1456 | @extend %on; 1457 | } 1458 | 1459 | &:nth-child(56) { 1460 | @extend %on; 1461 | } 1462 | 1463 | &:nth-child(59) { 1464 | @extend %on; 1465 | } 1466 | 1467 | &:nth-child(65) { 1468 | @extend %on; 1469 | } 1470 | 1471 | &:nth-child(69) { 1472 | @extend %on; 1473 | } 1474 | 1475 | &:nth-child(70) { 1476 | @extend %on; 1477 | } 1478 | 1479 | &:nth-child(71) { 1480 | @extend %on; 1481 | } 1482 | 1483 | &:nth-child(73) { 1484 | @extend %on; 1485 | } 1486 | 1487 | &:nth-child(74) { 1488 | @extend %on; 1489 | } 1490 | } 1491 | } 1492 | 1493 | .r18 .dots { 1494 | .dot { 1495 | &:nth-child(12) { 1496 | @extend %on; 1497 | } 1498 | 1499 | &:nth-child(13) { 1500 | @extend %on; 1501 | } 1502 | 1503 | &:nth-child(21) { 1504 | @extend %on; 1505 | } 1506 | 1507 | &:nth-child(22) { 1508 | @extend %on; 1509 | } 1510 | 1511 | &:nth-child(31) { 1512 | @extend %on; 1513 | } 1514 | 1515 | &:nth-child(32) { 1516 | @extend %on; 1517 | } 1518 | 1519 | &:nth-child(33) { 1520 | @extend %on; 1521 | } 1522 | 1523 | &:nth-child(39) { 1524 | @extend %on; 1525 | } 1526 | 1527 | &:nth-child(41) { 1528 | @extend %on; 1529 | } 1530 | 1531 | &:nth-child(42) { 1532 | @extend %on; 1533 | } 1534 | 1535 | &:nth-child(47) { 1536 | @extend %on; 1537 | } 1538 | 1539 | &:nth-child(50) { 1540 | @extend %on; 1541 | } 1542 | 1543 | &:nth-child(58) { 1544 | @extend %on; 1545 | } 1546 | 1547 | &:nth-child(60) { 1548 | @extend %on; 1549 | } 1550 | 1551 | &:nth-child(68) { 1552 | @extend %on; 1553 | } 1554 | 1555 | &:nth-child(70) { 1556 | @extend %on; 1557 | } 1558 | 1559 | &:nth-child(76) { 1560 | @extend %on; 1561 | } 1562 | 1563 | &:nth-child(77) { 1564 | @extend %on; 1565 | } 1566 | 1567 | &:nth-child(80) { 1568 | @extend %on; 1569 | } 1570 | } 1571 | } -------------------------------------------------------------------------------- /carnvas-demo/_scss/_variable.scss: -------------------------------------------------------------------------------- 1 | $DOT_SIZE : 5px; 2 | $DOT_GAP : 2px; -------------------------------------------------------------------------------- /carnvas-demo/_scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "compass/reset"; 2 | 3 | @import "variable"; 4 | @import "extends"; 5 | @import "main"; 6 | @import "run"; 7 | @import "jump"; -------------------------------------------------------------------------------- /carnvas-demo/config.rb: -------------------------------------------------------------------------------- 1 | http_path = "/" 2 | css_dir = "./css" 3 | sass_dir = "./_scss" 4 | images_dir = "./img" 5 | javascripts_dir = "./js" 6 | 7 | cache = false 8 | output_style = :compressed 9 | line_comments = false -------------------------------------------------------------------------------- /carnvas-demo/css/index.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}.r0 .dots .dot:nth-child(3),.r0 .dots .dot:nth-child(4),.r0 .dots .dot:nth-child(12),.r0 .dots .dot:nth-child(13),.r0 .dots .dot:nth-child(22),.r0 .dots .dot:nth-child(23),.r0 .dots .dot:nth-child(29),.r0 .dots .dot:nth-child(30),.r0 .dots .dot:nth-child(31),.r0 .dots .dot:nth-child(33),.r0 .dots .dot:nth-child(40),.r0 .dots .dot:nth-child(41),.r0 .dots .dot:nth-child(48),.r0 .dots .dot:nth-child(49),.r0 .dots .dot:nth-child(50),.r0 .dots .dot:nth-child(56),.r0 .dots .dot:nth-child(60),.r0 .dots .dot:nth-child(61),.r0 .dots .dot:nth-child(62),.r0 .dots .dot:nth-child(63),.r0 .dots .dot:nth-child(65),.r0 .dots .dot:nth-child(72),.r0 .dots .dot:nth-child(73),.r0 .dots .dot:nth-child(74),.r1 .dots .dot:nth-child(3),.r1 .dots .dot:nth-child(4),.r1 .dots .dot:nth-child(12),.r1 .dots .dot:nth-child(13),.r1 .dots .dot:nth-child(22),.r1 .dots .dot:nth-child(23),.r1 .dots .dot:nth-child(29),.r1 .dots .dot:nth-child(30),.r1 .dots .dot:nth-child(31),.r1 .dots .dot:nth-child(32),.r1 .dots .dot:nth-child(40),.r1 .dots .dot:nth-child(48),.r1 .dots .dot:nth-child(50),.r1 .dots .dot:nth-child(52),.r1 .dots .dot:nth-child(53),.r1 .dots .dot:nth-child(56),.r1 .dots .dot:nth-child(60),.r1 .dots .dot:nth-child(65),.r1 .dots .dot:nth-child(73),.r1 .dots .dot:nth-child(74),.r2 .dots .dot:nth-child(3),.r2 .dots .dot:nth-child(4),.r2 .dots .dot:nth-child(12),.r2 .dots .dot:nth-child(13),.r2 .dots .dot:nth-child(22),.r2 .dots .dot:nth-child(30),.r2 .dots .dot:nth-child(31),.r2 .dots .dot:nth-child(40),.r2 .dots .dot:nth-child(48),.r2 .dots .dot:nth-child(50),.r2 .dots .dot:nth-child(52),.r2 .dots .dot:nth-child(57),.r2 .dots .dot:nth-child(59),.r2 .dots .dot:nth-child(60),.r2 .dots .dot:nth-child(65),.r2 .dots .dot:nth-child(73),.r2 .dots .dot:nth-child(74),.r3 .dots .dot:nth-child(2),.r3 .dots .dot:nth-child(3),.r3 .dots .dot:nth-child(11),.r3 .dots .dot:nth-child(12),.r3 .dots .dot:nth-child(21),.r3 .dots .dot:nth-child(22),.r3 .dots .dot:nth-child(29),.r3 .dots .dot:nth-child(30),.r3 .dots .dot:nth-child(31),.r3 .dots .dot:nth-child(39),.r3 .dots .dot:nth-child(47),.r3 .dots .dot:nth-child(48),.r3 .dots .dot:nth-child(50),.r3 .dots .dot:nth-child(56),.r3 .dots .dot:nth-child(57),.r3 .dots .dot:nth-child(58),.r3 .dots .dot:nth-child(65),.r3 .dots .dot:nth-child(73),.r3 .dots .dot:nth-child(74),.r4 .dots .dot:nth-child(2),.r4 .dots .dot:nth-child(3),.r4 .dots .dot:nth-child(11),.r4 .dots .dot:nth-child(12),.r4 .dots .dot:nth-child(21),.r4 .dots .dot:nth-child(28),.r4 .dots .dot:nth-child(29),.r4 .dots .dot:nth-child(30),.r4 .dots .dot:nth-child(39),.r4 .dots .dot:nth-child(48),.r4 .dots .dot:nth-child(49),.r4 .dots .dot:nth-child(56),.r4 .dots .dot:nth-child(57),.r4 .dots .dot:nth-child(66),.r4 .dots .dot:nth-child(74),.r4 .dots .dot:nth-child(75),.r5 .dots .dot:nth-child(2),.r5 .dots .dot:nth-child(3),.r5 .dots .dot:nth-child(11),.r5 .dots .dot:nth-child(12),.r5 .dots .dot:nth-child(21),.r5 .dots .dot:nth-child(22),.r5 .dots .dot:nth-child(28),.r5 .dots .dot:nth-child(29),.r5 .dots .dot:nth-child(30),.r5 .dots .dot:nth-child(31),.r5 .dots .dot:nth-child(39),.r5 .dots .dot:nth-child(40),.r5 .dots .dot:nth-child(47),.r5 .dots .dot:nth-child(48),.r5 .dots .dot:nth-child(49),.r5 .dots .dot:nth-child(50),.r5 .dots .dot:nth-child(58),.r5 .dots .dot:nth-child(68),.r5 .dots .dot:nth-child(76),.r5 .dots .dot:nth-child(77),.r6 .dots .dot:nth-child(2),.r6 .dots .dot:nth-child(3),.r6 .dots .dot:nth-child(11),.r6 .dots .dot:nth-child(12),.r6 .dots .dot:nth-child(19),.r6 .dots .dot:nth-child(21),.r6 .dots .dot:nth-child(22),.r6 .dots .dot:nth-child(23),.r6 .dots .dot:nth-child(29),.r6 .dots .dot:nth-child(30),.r6 .dots .dot:nth-child(32),.r6 .dots .dot:nth-child(38),.r6 .dots .dot:nth-child(39),.r6 .dots .dot:nth-child(40),.r6 .dots .dot:nth-child(47),.r6 .dots .dot:nth-child(49),.r6 .dots .dot:nth-child(57),.r6 .dots .dot:nth-child(59),.r6 .dots .dot:nth-child(69),.r6 .dots .dot:nth-child(79),.r7 .dots .dot:nth-child(3),.r7 .dots .dot:nth-child(4),.r7 .dots .dot:nth-child(12),.r7 .dots .dot:nth-child(13),.r7 .dots .dot:nth-child(20),.r7 .dots .dot:nth-child(22),.r7 .dots .dot:nth-child(23),.r7 .dots .dot:nth-child(30),.r7 .dots .dot:nth-child(31),.r7 .dots .dot:nth-child(33),.r7 .dots .dot:nth-child(40),.r7 .dots .dot:nth-child(48),.r7 .dots .dot:nth-child(50),.r7 .dots .dot:nth-child(56),.r7 .dots .dot:nth-child(60),.r7 .dots .dot:nth-child(66),.r7 .dots .dot:nth-child(70),.r7 .dots .dot:nth-child(80),.r8 .dots .dot:nth-child(3),.r8 .dots .dot:nth-child(4),.r8 .dots .dot:nth-child(12),.r8 .dots .dot:nth-child(13),.r8 .dots .dot:nth-child(20),.r8 .dots .dot:nth-child(22),.r8 .dots .dot:nth-child(23),.r8 .dots .dot:nth-child(30),.r8 .dots .dot:nth-child(31),.r8 .dots .dot:nth-child(33),.r8 .dots .dot:nth-child(40),.r8 .dots .dot:nth-child(41),.r8 .dots .dot:nth-child(47),.r8 .dots .dot:nth-child(48),.r8 .dots .dot:nth-child(49),.r8 .dots .dot:nth-child(56),.r8 .dots .dot:nth-child(59),.r8 .dots .dot:nth-child(65),.r8 .dots .dot:nth-child(69),.r8 .dots .dot:nth-child(70),.r8 .dots .dot:nth-child(71),.r8 .dots .dot:nth-child(73),.r8 .dots .dot:nth-child(74),.r9 .dots .dot:nth-child(3),.r9 .dots .dot:nth-child(4),.r9 .dots .dot:nth-child(12),.r9 .dots .dot:nth-child(13),.r9 .dots .dot:nth-child(22),.r9 .dots .dot:nth-child(23),.r9 .dots .dot:nth-child(29),.r9 .dots .dot:nth-child(30),.r9 .dots .dot:nth-child(31),.r9 .dots .dot:nth-child(33),.r9 .dots .dot:nth-child(40),.r9 .dots .dot:nth-child(41),.r9 .dots .dot:nth-child(48),.r9 .dots .dot:nth-child(49),.r9 .dots .dot:nth-child(50),.r9 .dots .dot:nth-child(56),.r9 .dots .dot:nth-child(59),.r9 .dots .dot:nth-child(60),.r9 .dots .dot:nth-child(61),.r9 .dots .dot:nth-child(62),.r9 .dots .dot:nth-child(65),.r9 .dots .dot:nth-child(71),.r9 .dots .dot:nth-child(73),.r9 .dots .dot:nth-child(74),.r10 .dots .dot:nth-child(3),.r10 .dots .dot:nth-child(4),.r10 .dots .dot:nth-child(12),.r10 .dots .dot:nth-child(13),.r10 .dots .dot:nth-child(22),.r10 .dots .dot:nth-child(23),.r10 .dots .dot:nth-child(29),.r10 .dots .dot:nth-child(30),.r10 .dots .dot:nth-child(31),.r10 .dots .dot:nth-child(32),.r10 .dots .dot:nth-child(40),.r10 .dots .dot:nth-child(48),.r10 .dots .dot:nth-child(50),.r10 .dots .dot:nth-child(52),.r10 .dots .dot:nth-child(53),.r10 .dots .dot:nth-child(56),.r10 .dots .dot:nth-child(60),.r10 .dots .dot:nth-child(65),.r10 .dots .dot:nth-child(73),.r10 .dots .dot:nth-child(74),.r11 .dots .dot:nth-child(3),.r11 .dots .dot:nth-child(4),.r11 .dots .dot:nth-child(12),.r11 .dots .dot:nth-child(13),.r11 .dots .dot:nth-child(22),.r11 .dots .dot:nth-child(30),.r11 .dots .dot:nth-child(31),.r11 .dots .dot:nth-child(40),.r11 .dots .dot:nth-child(48),.r11 .dots .dot:nth-child(50),.r11 .dots .dot:nth-child(52),.r11 .dots .dot:nth-child(57),.r11 .dots .dot:nth-child(59),.r11 .dots .dot:nth-child(60),.r11 .dots .dot:nth-child(65),.r11 .dots .dot:nth-child(73),.r11 .dots .dot:nth-child(74),.r12 .dots .dot:nth-child(2),.r12 .dots .dot:nth-child(3),.r12 .dots .dot:nth-child(11),.r12 .dots .dot:nth-child(12),.r12 .dots .dot:nth-child(21),.r12 .dots .dot:nth-child(22),.r12 .dots .dot:nth-child(29),.r12 .dots .dot:nth-child(30),.r12 .dots .dot:nth-child(31),.r12 .dots .dot:nth-child(39),.r12 .dots .dot:nth-child(47),.r12 .dots .dot:nth-child(48),.r12 .dots .dot:nth-child(50),.r12 .dots .dot:nth-child(56),.r12 .dots .dot:nth-child(57),.r12 .dots .dot:nth-child(58),.r12 .dots .dot:nth-child(65),.r12 .dots .dot:nth-child(73),.r12 .dots .dot:nth-child(74),.r13 .dots .dot:nth-child(2),.r13 .dots .dot:nth-child(3),.r13 .dots .dot:nth-child(11),.r13 .dots .dot:nth-child(12),.r13 .dots .dot:nth-child(21),.r13 .dots .dot:nth-child(28),.r13 .dots .dot:nth-child(29),.r13 .dots .dot:nth-child(30),.r13 .dots .dot:nth-child(39),.r13 .dots .dot:nth-child(48),.r13 .dots .dot:nth-child(49),.r13 .dots .dot:nth-child(56),.r13 .dots .dot:nth-child(57),.r13 .dots .dot:nth-child(66),.r13 .dots .dot:nth-child(74),.r13 .dots .dot:nth-child(75),.r14 .dots .dot:nth-child(2),.r14 .dots .dot:nth-child(3),.r14 .dots .dot:nth-child(11),.r14 .dots .dot:nth-child(12),.r14 .dots .dot:nth-child(21),.r14 .dots .dot:nth-child(22),.r14 .dots .dot:nth-child(28),.r14 .dots .dot:nth-child(29),.r14 .dots .dot:nth-child(30),.r14 .dots .dot:nth-child(31),.r14 .dots .dot:nth-child(39),.r14 .dots .dot:nth-child(40),.r14 .dots .dot:nth-child(47),.r14 .dots .dot:nth-child(48),.r14 .dots .dot:nth-child(49),.r14 .dots .dot:nth-child(50),.r14 .dots .dot:nth-child(58),.r14 .dots .dot:nth-child(68),.r14 .dots .dot:nth-child(76),.r14 .dots .dot:nth-child(77),.r15 .dots .dot:nth-child(2),.r15 .dots .dot:nth-child(3),.r15 .dots .dot:nth-child(11),.r15 .dots .dot:nth-child(12),.r15 .dots .dot:nth-child(19),.r15 .dots .dot:nth-child(21),.r15 .dots .dot:nth-child(22),.r15 .dots .dot:nth-child(23),.r15 .dots .dot:nth-child(29),.r15 .dots .dot:nth-child(30),.r15 .dots .dot:nth-child(32),.r15 .dots .dot:nth-child(38),.r15 .dots .dot:nth-child(39),.r15 .dots .dot:nth-child(40),.r15 .dots .dot:nth-child(47),.r15 .dots .dot:nth-child(49),.r15 .dots .dot:nth-child(57),.r15 .dots .dot:nth-child(59),.r15 .dots .dot:nth-child(69),.r15 .dots .dot:nth-child(79),.r16 .dots .dot:nth-child(3),.r16 .dots .dot:nth-child(4),.r16 .dots .dot:nth-child(12),.r16 .dots .dot:nth-child(13),.r16 .dots .dot:nth-child(20),.r16 .dots .dot:nth-child(22),.r16 .dots .dot:nth-child(23),.r16 .dots .dot:nth-child(30),.r16 .dots .dot:nth-child(31),.r16 .dots .dot:nth-child(33),.r16 .dots .dot:nth-child(40),.r16 .dots .dot:nth-child(42),.r16 .dots .dot:nth-child(48),.r16 .dots .dot:nth-child(50),.r16 .dots .dot:nth-child(56),.r16 .dots .dot:nth-child(60),.r16 .dots .dot:nth-child(66),.r16 .dots .dot:nth-child(70),.r16 .dots .dot:nth-child(80),.r17 .dots .dot:nth-child(3),.r17 .dots .dot:nth-child(4),.r17 .dots .dot:nth-child(12),.r17 .dots .dot:nth-child(13),.r17 .dots .dot:nth-child(20),.r17 .dots .dot:nth-child(22),.r17 .dots .dot:nth-child(23),.r17 .dots .dot:nth-child(30),.r17 .dots .dot:nth-child(31),.r17 .dots .dot:nth-child(33),.r17 .dots .dot:nth-child(40),.r17 .dots .dot:nth-child(41),.r17 .dots .dot:nth-child(47),.r17 .dots .dot:nth-child(48),.r17 .dots .dot:nth-child(49),.r17 .dots .dot:nth-child(56),.r17 .dots .dot:nth-child(59),.r17 .dots .dot:nth-child(65),.r17 .dots .dot:nth-child(69),.r17 .dots .dot:nth-child(70),.r17 .dots .dot:nth-child(71),.r17 .dots .dot:nth-child(73),.r17 .dots .dot:nth-child(74),.r18 .dots .dot:nth-child(12),.r18 .dots .dot:nth-child(13),.r18 .dots .dot:nth-child(21),.r18 .dots .dot:nth-child(22),.r18 .dots .dot:nth-child(31),.r18 .dots .dot:nth-child(32),.r18 .dots .dot:nth-child(33),.r18 .dots .dot:nth-child(39),.r18 .dots .dot:nth-child(41),.r18 .dots .dot:nth-child(42),.r18 .dots .dot:nth-child(47),.r18 .dots .dot:nth-child(50),.r18 .dots .dot:nth-child(58),.r18 .dots .dot:nth-child(60),.r18 .dots .dot:nth-child(68),.r18 .dots .dot:nth-child(70),.r18 .dots .dot:nth-child(76),.r18 .dots .dot:nth-child(77),.r18 .dots .dot:nth-child(80),.j1 .dots .dot:nth-child(22),.j1 .dots .dot:nth-child(23),.j1 .dots .dot:nth-child(31),.j1 .dots .dot:nth-child(32),.j1 .dots .dot:nth-child(42),.j1 .dots .dot:nth-child(43),.j1 .dots .dot:nth-child(51),.j1 .dots .dot:nth-child(53),.j1 .dots .dot:nth-child(59),.j1 .dots .dot:nth-child(60),.j1 .dots .dot:nth-child(61),.j1 .dots .dot:nth-child(62),.j1 .dots .dot:nth-child(69),.j1 .dots .dot:nth-child(79),.j2 .dots .dot:nth-child(13),.j2 .dots .dot:nth-child(14),.j2 .dots .dot:nth-child(22),.j2 .dots .dot:nth-child(23),.j2 .dots .dot:nth-child(33),.j2 .dots .dot:nth-child(34),.j2 .dots .dot:nth-child(42),.j2 .dots .dot:nth-child(44),.j2 .dots .dot:nth-child(51),.j2 .dots .dot:nth-child(59),.j2 .dots .dot:nth-child(60),.j2 .dots .dot:nth-child(61),.j2 .dots .dot:nth-child(62),.j2 .dots .dot:nth-child(63),.j2 .dots .dot:nth-child(69),.j2 .dots .dot:nth-child(72),.j2 .dots .dot:nth-child(77),.j2 .dots .dot:nth-child(78),.j3 .dots .dot:nth-child(4),.j3 .dots .dot:nth-child(5),.j3 .dots .dot:nth-child(13),.j3 .dots .dot:nth-child(14),.j3 .dots .dot:nth-child(23),.j3 .dots .dot:nth-child(24),.j3 .dots .dot:nth-child(30),.j3 .dots .dot:nth-child(31),.j3 .dots .dot:nth-child(33),.j3 .dots .dot:nth-child(42),.j3 .dots .dot:nth-child(50),.j3 .dots .dot:nth-child(59),.j3 .dots .dot:nth-child(60),.j3 .dots .dot:nth-child(69),.j3 .dots .dot:nth-child(70),.j3 .dots .dot:nth-child(77),.j3 .dots .dot:nth-child(78),.j4 .dots .dot:nth-child(4),.j4 .dots .dot:nth-child(5),.j4 .dots .dot:nth-child(13),.j4 .dots .dot:nth-child(14),.j4 .dots .dot:nth-child(21),.j4 .dots .dot:nth-child(23),.j4 .dots .dot:nth-child(31),.j4 .dots .dot:nth-child(32),.j4 .dots .dot:nth-child(33),.j4 .dots .dot:nth-child(41),.j4 .dots .dot:nth-child(43),.j4 .dots .dot:nth-child(50),.j4 .dots .dot:nth-child(58),.j4 .dots .dot:nth-child(60),.j4 .dots .dot:nth-child(68),.j4 .dots .dot:nth-child(70),.j4 .dots .dot:nth-child(78),.j4 .dots .dot:nth-child(80),.j5 .dots .dot:nth-child(3),.j10 .dots .dot:nth-child(3),.j5 .dots .dot:nth-child(5),.j10 .dots .dot:nth-child(5),.j5 .dots .dot:nth-child(6),.j10 .dots .dot:nth-child(6),.j5 .dots .dot:nth-child(12),.j10 .dots .dot:nth-child(12),.j5 .dots .dot:nth-child(14),.j10 .dots .dot:nth-child(14),.j5 .dots .dot:nth-child(15),.j10 .dots .dot:nth-child(15),.j5 .dots .dot:nth-child(22),.j10 .dots .dot:nth-child(22),.j5 .dots .dot:nth-child(23),.j10 .dots .dot:nth-child(23),.j5 .dots .dot:nth-child(32),.j10 .dots .dot:nth-child(32),.j5 .dots .dot:nth-child(33),.j10 .dots .dot:nth-child(33),.j5 .dots .dot:nth-child(39),.j10 .dots .dot:nth-child(39),.j5 .dots .dot:nth-child(40),.j10 .dots .dot:nth-child(40),.j5 .dots .dot:nth-child(41),.j10 .dots .dot:nth-child(41),.j5 .dots .dot:nth-child(43),.j10 .dots .dot:nth-child(43),.j5 .dots .dot:nth-child(48),.j10 .dots .dot:nth-child(48),.j5 .dots .dot:nth-child(50),.j10 .dots .dot:nth-child(50),.j5 .dots .dot:nth-child(56),.j10 .dots .dot:nth-child(56),.j5 .dots .dot:nth-child(57),.j10 .dots .dot:nth-child(57),.j5 .dots .dot:nth-child(60),.j10 .dots .dot:nth-child(60),.j5 .dots .dot:nth-child(70),.j10 .dots .dot:nth-child(70),.j5 .dots .dot:nth-child(80),.j10 .dots .dot:nth-child(80),.j6 .dots .dot:nth-child(3),.j9 .dots .dot:nth-child(3),.j6 .dots .dot:nth-child(5),.j9 .dots .dot:nth-child(5),.j6 .dots .dot:nth-child(6),.j9 .dots .dot:nth-child(6),.j6 .dots .dot:nth-child(12),.j9 .dots .dot:nth-child(12),.j6 .dots .dot:nth-child(14),.j9 .dots .dot:nth-child(14),.j6 .dots .dot:nth-child(15),.j9 .dots .dot:nth-child(15),.j6 .dots .dot:nth-child(22),.j9 .dots .dot:nth-child(22),.j6 .dots .dot:nth-child(23),.j9 .dots .dot:nth-child(23),.j6 .dots .dot:nth-child(32),.j9 .dots .dot:nth-child(32),.j6 .dots .dot:nth-child(33),.j9 .dots .dot:nth-child(33),.j6 .dots .dot:nth-child(39),.j9 .dots .dot:nth-child(39),.j6 .dots .dot:nth-child(40),.j9 .dots .dot:nth-child(40),.j6 .dots .dot:nth-child(41),.j9 .dots .dot:nth-child(41),.j6 .dots .dot:nth-child(43),.j9 .dots .dot:nth-child(43),.j6 .dots .dot:nth-child(48),.j9 .dots .dot:nth-child(48),.j6 .dots .dot:nth-child(50),.j9 .dots .dot:nth-child(50),.j6 .dots .dot:nth-child(56),.j9 .dots .dot:nth-child(56),.j6 .dots .dot:nth-child(57),.j9 .dots .dot:nth-child(57),.j6 .dots .dot:nth-child(59),.j9 .dots .dot:nth-child(59),.j6 .dots .dot:nth-child(68),.j9 .dots .dot:nth-child(68),.j6 .dots .dot:nth-child(78),.j9 .dots .dot:nth-child(78),.j7 .dots .dot:nth-child(3),.j8 .dots .dot:nth-child(3),.j7 .dots .dot:nth-child(5),.j8 .dots .dot:nth-child(5),.j7 .dots .dot:nth-child(6),.j8 .dots .dot:nth-child(6),.j7 .dots .dot:nth-child(12),.j8 .dots .dot:nth-child(12),.j7 .dots .dot:nth-child(14),.j8 .dots .dot:nth-child(14),.j7 .dots .dot:nth-child(15),.j8 .dots .dot:nth-child(15),.j7 .dots .dot:nth-child(22),.j8 .dots .dot:nth-child(22),.j7 .dots .dot:nth-child(23),.j8 .dots .dot:nth-child(23),.j7 .dots .dot:nth-child(32),.j8 .dots .dot:nth-child(32),.j7 .dots .dot:nth-child(33),.j8 .dots .dot:nth-child(33),.j7 .dots .dot:nth-child(39),.j8 .dots .dot:nth-child(39),.j7 .dots .dot:nth-child(40),.j8 .dots .dot:nth-child(40),.j7 .dots .dot:nth-child(41),.j8 .dots .dot:nth-child(41),.j7 .dots .dot:nth-child(43),.j8 .dots .dot:nth-child(43),.j7 .dots .dot:nth-child(48),.j8 .dots .dot:nth-child(48),.j7 .dots .dot:nth-child(50),.j8 .dots .dot:nth-child(50),.j7 .dots .dot:nth-child(56),.j8 .dots .dot:nth-child(56),.j7 .dots .dot:nth-child(57),.j8 .dots .dot:nth-child(57),.j7 .dots .dot:nth-child(59),.j8 .dots .dot:nth-child(59),.j7 .dots .dot:nth-child(68),.j8 .dots .dot:nth-child(68),.j7 .dots .dot:nth-child(78),.j8 .dots .dot:nth-child(78),.j11 .dots .dot:nth-child(4),.j11 .dots .dot:nth-child(6),.j11 .dots .dot:nth-child(7),.j11 .dots .dot:nth-child(14),.j11 .dots .dot:nth-child(15),.j11 .dots .dot:nth-child(16),.j11 .dots .dot:nth-child(25),.j11 .dots .dot:nth-child(34),.j11 .dots .dot:nth-child(35),.j11 .dots .dot:nth-child(43),.j11 .dots .dot:nth-child(44),.j11 .dots .dot:nth-child(50),.j11 .dots .dot:nth-child(51),.j11 .dots .dot:nth-child(52),.j11 .dots .dot:nth-child(58),.j11 .dots .dot:nth-child(61),.j11 .dots .dot:nth-child(66),.j11 .dots .dot:nth-child(67),.j11 .dots .dot:nth-child(70),.j11 .dots .dot:nth-child(78),.j11 .dots .dot:nth-child(79),.j12 .dots .dot:nth-child(15),.j12 .dots .dot:nth-child(16),.j12 .dots .dot:nth-child(23),.j12 .dots .dot:nth-child(24),.j12 .dots .dot:nth-child(25),.j12 .dots .dot:nth-child(34),.j12 .dots .dot:nth-child(35),.j12 .dots .dot:nth-child(44),.j12 .dots .dot:nth-child(51),.j12 .dots .dot:nth-child(52),.j12 .dots .dot:nth-child(61),.j12 .dots .dot:nth-child(62),.j12 .dots .dot:nth-child(71),.j12 .dots .dot:nth-child(72),.j12 .dots .dot:nth-child(79),.j12 .dots .dot:nth-child(80),.j13 .dots .dot:nth-child(24),.j13 .dots .dot:nth-child(25),.j13 .dots .dot:nth-child(33),.j13 .dots .dot:nth-child(34),.j13 .dots .dot:nth-child(35),.j13 .dots .dot:nth-child(41),.j13 .dots .dot:nth-child(42),.j13 .dots .dot:nth-child(43),.j13 .dots .dot:nth-child(45),.j13 .dots .dot:nth-child(52),.j13 .dots .dot:nth-child(53),.j13 .dots .dot:nth-child(54),.j13 .dots .dot:nth-child(60),.j13 .dots .dot:nth-child(61),.j13 .dots .dot:nth-child(70),.j13 .dots .dot:nth-child(71),.j13 .dots .dot:nth-child(78),.j13 .dots .dot:nth-child(79),.j13 .dots .dot:nth-child(80),.j13 .dots .dot:nth-child(81),.j14 .dots .dot:nth-child(33),.j14 .dots .dot:nth-child(34),.j14 .dots .dot:nth-child(42),.j14 .dots .dot:nth-child(43),.j14 .dots .dot:nth-child(52),.j14 .dots .dot:nth-child(53),.j14 .dots .dot:nth-child(54),.j14 .dots .dot:nth-child(59),.j14 .dots .dot:nth-child(60),.j14 .dots .dot:nth-child(63),.j14 .dots .dot:nth-child(70),.j14 .dots .dot:nth-child(71),.j14 .dots .dot:nth-child(72),.j14 .dots .dot:nth-child(79),.j14 .dots .dot:nth-child(80),.j14 .dots .dot:nth-child(81),.j15 .dots .dot:nth-child(6),.j15 .dots .dot:nth-child(7),.j15 .dots .dot:nth-child(15),.j15 .dots .dot:nth-child(16),.j15 .dots .dot:nth-child(25),.j15 .dots .dot:nth-child(26),.j15 .dots .dot:nth-child(32),.j15 .dots .dot:nth-child(33),.j15 .dots .dot:nth-child(34),.j15 .dots .dot:nth-child(35),.j15 .dots .dot:nth-child(43),.j15 .dots .dot:nth-child(44),.j15 .dots .dot:nth-child(51),.j15 .dots .dot:nth-child(52),.j15 .dots .dot:nth-child(53),.j15 .dots .dot:nth-child(54),.j15 .dots .dot:nth-child(62),.j15 .dots .dot:nth-child(72),.j15 .dots .dot:nth-child(80),.j15 .dots .dot:nth-child(81),.j16 .dots .dot:nth-child(4),.j16 .dots .dot:nth-child(5),.j16 .dots .dot:nth-child(13),.j16 .dots .dot:nth-child(14),.j16 .dots .dot:nth-child(21),.j16 .dots .dot:nth-child(23),.j16 .dots .dot:nth-child(24),.j16 .dots .dot:nth-child(25),.j16 .dots .dot:nth-child(31),.j16 .dots .dot:nth-child(32),.j16 .dots .dot:nth-child(34),.j16 .dots .dot:nth-child(40),.j16 .dots .dot:nth-child(41),.j16 .dots .dot:nth-child(42),.j16 .dots .dot:nth-child(49),.j16 .dots .dot:nth-child(51),.j16 .dots .dot:nth-child(59),.j16 .dots .dot:nth-child(61),.j16 .dots .dot:nth-child(71),.j16 .dots .dot:nth-child(81),.j17 .dots .dot:nth-child(3),.j17 .dots .dot:nth-child(4),.j17 .dots .dot:nth-child(12),.j17 .dots .dot:nth-child(13),.j17 .dots .dot:nth-child(22),.j17 .dots .dot:nth-child(23),.j17 .dots .dot:nth-child(29),.j17 .dots .dot:nth-child(30),.j17 .dots .dot:nth-child(31),.j17 .dots .dot:nth-child(33),.j17 .dots .dot:nth-child(40),.j17 .dots .dot:nth-child(41),.j17 .dots .dot:nth-child(47),.j17 .dots .dot:nth-child(48),.j17 .dots .dot:nth-child(49),.j17 .dots .dot:nth-child(56),.j17 .dots .dot:nth-child(59),.j17 .dots .dot:nth-child(60),.j17 .dots .dot:nth-child(61),.j17 .dots .dot:nth-child(62),.j17 .dots .dot:nth-child(65),.j17 .dots .dot:nth-child(71),.j17 .dots .dot:nth-child(73),.j17 .dots .dot:nth-child(74){background:#fff;box-shadow:0 0 2px #fff}*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-backface-visibility:visible}html{cursor:pointer}body{background:#000}#reverse:target{transform:rotateY(180deg)}#video{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0}#canvas{position:absolute;top:0;left:0;width:100%;height:100%}#stage{position:absolute;top:0;bottom:0;left:0;right:0}.dots{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:1px;width:65px;height:65px;overflow:hidden}.dot{float:left;margin:1px;border-radius:2px;width:5px;height:5px;font-size:10px;text-indent:-9999px}.j4 .dots{padding-bottom:7px}.j5 .dots,.j10 .dots{padding-bottom:56px}.j6 .dots,.j9 .dots{padding-bottom:105px}.j7 .dots,.j8 .dots{padding-bottom:112px}.j11 .dots{padding-bottom:14px} 2 | -------------------------------------------------------------------------------- /carnvas-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CARNVAS DEMO 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
    20 |
  1. 21 |
  2. 22 |
  3. 23 |
  4. 24 |
  5. 25 |
  6. 26 |
  7. 27 |
  8. 28 |
  9. 29 |
  10. 30 |
  11. 31 |
  12. 32 |
  13. 33 |
  14. 34 |
  15. 35 |
  16. 36 |
  17. 37 |
  18. 38 |
  19. 39 |
  20. 40 |
  21. 41 |
  22. 42 |
  23. 43 |
  24. 44 |
  25. 45 |
  26. 46 |
  27. 47 |
  28. 48 |
  29. 49 |
  30. 50 |
  31. 51 |
  32. 52 |
  33. 53 |
  34. 54 |
  35. 55 |
  36. 56 |
  37. 57 |
  38. 58 |
  39. 59 |
  40. 60 |
  41. 61 |
  42. 62 |
  43. 63 |
  44. 64 |
  45. 65 |
  46. 66 |
  47. 67 |
  48. 68 |
  49. 69 |
  50. 70 |
  51. 71 |
  52. 72 |
  53. 73 |
  54. 74 |
  55. 75 |
  56. 76 |
  57. 77 |
  58. 78 |
  59. 79 |
  60. 80 |
  61. 81 |
  62. 82 |
  63. 83 |
  64. 84 |
  65. 85 |
  66. 86 |
  67. 87 |
  68. 88 |
  69. 89 |
  70. 90 |
  71. 91 |
  72. 92 |
  73. 93 |
  74. 94 |
  75. 95 |
  76. 96 |
  77. 97 |
  78. 98 |
  79. 99 |
  80. 100 |
  81. 101 |
102 |
103 | 104 | 105 | -------------------------------------------------------------------------------- /carnvas-demo/js/index.js: -------------------------------------------------------------------------------- 1 | (function(win, doc) { 2 | 3 | "use strict"; 4 | 5 | class Action { 6 | constructor(param) { 7 | this.PREFIX = param.prefix; 8 | this.LENGTH = param.length; 9 | this.MAX_INDEX = this.LENGTH - 1; 10 | this.index = 0; 11 | this.timer = null; 12 | this.isDoingFlag = false; 13 | } 14 | 15 | stop() { 16 | clearTimeout(this.timer); 17 | this.index = 0; 18 | this.isDoingFlag = false; 19 | } 20 | 21 | start() { 22 | this.stop(); 23 | this.isDoingFlag = true; 24 | } 25 | 26 | next() { 27 | this.index = ++this.index % this.LENGTH; 28 | } 29 | 30 | getKlassName() { 31 | return this.PREFIX + this.index; 32 | } 33 | 34 | isDoing() { 35 | return this.isDoingFlag; 36 | } 37 | } 38 | 39 | class Runner { 40 | constructor(id) { 41 | this.INTERVAL = 40; 42 | this.actionRun = new Action({ 43 | prefix : "r", 44 | length : 18 45 | }); 46 | this.actionJump = new Action({ 47 | prefix : "j", 48 | length : 17 49 | }); 50 | this.actionSpecial = new Action({ 51 | prefix : "s", 52 | length : 1 53 | }); 54 | this.elm = doc.getElementById(id); 55 | } 56 | 57 | start() { 58 | this.actionRun.start(); 59 | this.actionRun.timer = setInterval(this.step.bind(this), this.INTERVAL); 60 | } 61 | 62 | jump() { 63 | if (this.actionRun.isDoing()) { 64 | this.actionRun.stop(); 65 | this.actionJump.start(); 66 | this.actionJump.timer = setInterval(this.flow.bind(this), this.INTERVAL); 67 | } 68 | } 69 | 70 | step() { 71 | this.actionRun.next(); 72 | this.elm.className = this.actionRun.getKlassName(); 73 | } 74 | 75 | flow() { 76 | if (this.actionJump.index < this.actionJump.MAX_INDEX) { 77 | this.actionJump.next(); 78 | this.elm.className = this.actionJump.getKlassName(); 79 | } else { 80 | this.actionJump.stop(); 81 | this.start(); 82 | } 83 | } 84 | } 85 | 86 | class Camera { 87 | constructor(param) { 88 | const medias = { 89 | audio: false, 90 | video: { 91 | facingMode: { 92 | exact: "environment" 93 | } 94 | } 95 | }; 96 | 97 | this.video = param.video; 98 | this.canvas = param.canvas; 99 | this.ctx = this.canvas.getContext("2d"); 100 | this.INTERVAL = param.interval; 101 | 102 | navigator.mediaDevices.getUserMedia(medias).then((stream) => { 103 | this.video.srcObject = stream; 104 | this.start(); 105 | }).catch((err) => { 106 | alert(err); 107 | }); 108 | } 109 | 110 | draw() { 111 | this.canvas.width = win.innerWidth; 112 | this.canvas.height = win.innerHeight; 113 | this.ctx.drawImage(this.video, 0, 0); 114 | } 115 | 116 | start() { 117 | setInterval(this.draw.bind(this), this.INTERVAL); 118 | } 119 | 120 | } 121 | 122 | main(); 123 | 124 | function main() { 125 | const runner = new Runner("stage"), 126 | camera = new Camera({ 127 | video : doc.getElementById("video"), 128 | canvas : doc.getElementById("canvas"), 129 | interval : 20 130 | }); 131 | 132 | runner.start(); 133 | 134 | doc.addEventListener("click", () => { 135 | runner.jump(); 136 | }, false); 137 | } 138 | 139 | })(this, document); -------------------------------------------------------------------------------- /front-camera/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: #000; 4 | } 5 | 6 | #video { 7 | display: block; 8 | width: 100%; 9 | } -------------------------------------------------------------------------------- /front-camera/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /front-camera/index.js: -------------------------------------------------------------------------------- 1 | const medias = { 2 | audio: false, 3 | video: { 4 | facingMode: "user" 5 | } 6 | }; 7 | const video = document.getElementById("video"); 8 | const promise = navigator.mediaDevices.getUserMedia(medias); 9 | 10 | promise.then(successCallback) 11 | .catch(errorCallback); 12 | 13 | 14 | function successCallback(stream) { 15 | video.srcObject = stream; 16 | }; 17 | 18 | function errorCallback(err) { 19 | alert(err); 20 | }; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebCamera Preview for iOS11 6 | 7 | 8 | 9 | 84 | 85 | 86 | 93 | 94 | -------------------------------------------------------------------------------- /monochrome/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: #000; 4 | } 5 | 6 | #videobox { 7 | position: absolute; 8 | top: 10px; left: 10px; 9 | transform-origin: left top; 10 | transform: scale(.1); 11 | } 12 | 13 | #video { 14 | display: block; 15 | } 16 | 17 | #canvas { 18 | display: block; 19 | position: absolute; 20 | top: 0; left: 0; 21 | width: 100%; height: 100%; 22 | } -------------------------------------------------------------------------------- /monochrome/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Monochrome 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /monochrome/index.js: -------------------------------------------------------------------------------- 1 | const medias = { 2 | audio: false, 3 | video: { 4 | facingMode: { 5 | exact: "environment" 6 | } 7 | } 8 | }; 9 | const video = document.getElementById("video"); 10 | const canvas = document.getElementById("canvas"); 11 | const ctx = canvas.getContext("2d"); 12 | const promise = navigator.mediaDevices.getUserMedia(medias); 13 | 14 | let imgData; 15 | let data 16 | let ave; 17 | 18 | promise.then(successCallback) 19 | .catch(errorCallback); 20 | 21 | function successCallback(stream) { 22 | video.srcObject = stream; 23 | requestAnimationFrame(draw); 24 | }; 25 | 26 | function errorCallback(err) { 27 | alert(err); 28 | }; 29 | 30 | function draw() { 31 | canvas.width = window.innerWidth; 32 | canvas.height = window.innerHeight; 33 | ctx.drawImage(video, 0, 0); 34 | 35 | imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 36 | data = imgData.data; 37 | 38 | for (let i = 0; i < data.length; i += 4) { 39 | ave = (data[i + 0] + data[i + 1] + data[i + 2]) / 3; 40 | 41 | data[i + 0] = 42 | data[i + 1] = 43 | data[i + 2] = (ave > 255 / 2) ? 255 : (ave > 255 / 4) ? 127 : 0; 44 | data[i + 3] = 255; 45 | } 46 | 47 | ctx.putImageData(imgData, 0, 0); 48 | requestAnimationFrame(draw); 49 | } -------------------------------------------------------------------------------- /rear-camera/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: #000; 4 | } 5 | 6 | #video { 7 | display: block; 8 | width: 100%; 9 | } -------------------------------------------------------------------------------- /rear-camera/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | RearCamera 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /rear-camera/index.js: -------------------------------------------------------------------------------- 1 | const medias = { 2 | audio: false, 3 | video: { 4 | facingMode: { 5 | exact: "environment" 6 | } 7 | } 8 | }; 9 | const video = document.getElementById("video"); 10 | const promise = navigator.mediaDevices.getUserMedia(medias); 11 | 12 | promise.then(successCallback) 13 | .catch(errorCallback); 14 | 15 | function successCallback(stream) { 16 | video.srcObject = stream; 17 | }; 18 | 19 | function errorCallback(err) { 20 | alert(err); 21 | }; --------------------------------------------------------------------------------