block by dribnet ad2960012a5b17c26bb68f39c812aae7

updated PS2

Full Screen

PS2 MDDN 242 2018

This is the code for getting started with PS2. The drop down selects previous saved settings. The show data button exposes the current drawing as JSON so it can be added to the code.

Replace this README with information about your alphabet.

index.html

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="start.js"></script>
    <style>
        body   { padding: 0; margin: 0; }
        .inner { position: absolute; }
        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.7;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }
        #controls:hover { opacity: 0.9; }
    </style>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
<p>
    Links to other sections:
<ul>
    <li><a href="style1.html">style_1</a>
    <li><a href="style2.html">style_2</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interactino.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
        </div>
    </div>
</table>
</body>

letters.json

{
  "A":
    [
      true,
      false,
      false,
      false,
      false,
      false
    ],
  "B":
    [
      true,
      false,
      true,
      false,
      false,
      false
    ],
  "C":
    [
      true,
      true,
      false,
      false,
      false,
      false
    ]
}

preview.jpg

����JFIF��C	

			

		


��C	����"��	
��I	
!1AQa	"2BRq��#Cbr����$3S�c�Ds����������5	!1AQq��"2Ba������3Rr���?�X-��������h8��i�ozŶ��#U����ߤ�<S��zϏ�y��sv��>X�N���y��u{��[���Z+�t�t���
���C�.Yp���U�N��ݚ��m>�z�:^���i���As��W������p×��cU84������?���7?�v��ϴw�7�=�'w��/��=m��Q?���G�z?������>����{�����f}߻�Nq���_�}7��k^�zs�����+¼����=��v��'���/>>��~��8�;9k|�|�߶�8�f�uS�K�{ا�K&9q�si�Z>gpN��x���{u�E����k=�w�tE#�
��-�.����-��8{�i���Ev��#K����Ӭ�<���{O���-���܊���h8��k�ozŶ��#U����ߤ�1O�%�>>@�#[��P9��N],x'l��<�ֺ�����z���:O�b��c?v��g2���ә���/��ƪpig�#w�����\��+Mx���3��'�5���}<��t���܃n���3���`�����K�E[u��`�O�wvQ����,b�����t�}Eok�ٟw��S�{>��Ʋ_M��Zק��
�p�4�gŶ��18gy��w��ݴ�����KϏ�(~��{As���������oË�igU9��������w�[��P9���-3�'l�
<LVڽ����z�5��;Ϻ"��e�({_r+��à��-�ۼf��w��.�֟�N�4�>�w��y��Y��ٹ9�U���.��Q[c�g����M�>�G����?*�/�!zy���<��?)����g�k趭7L��dLJȧX�^�{Mk޾
ns�_7�ÓQ��Z̜�7��hv�������Dt��DŽ֝�LxL[�`x�����w�_qf��ݷMu�&}V�,���gY���H��
X�.Cv���'�����fN0�LRt;�i�F
u�F�zڽ#�+~�"<"+�����hnX��d�����[Y�o�ڵ=1�4s>.�g�z�E�6��z�.[B|/�\I�[�K{�m;����K�izO��y��Mg�Lu����;&v�ٹǓK�ɍ.��SZ����4���>�_��O�~V�?V-ם}�yc�M���q]flv��j�tɬ�Lx|�}c�z�M�5�{z�,�k>ܻ/&�j����x�+lz�����i�����fh�OʿK�β8�������_qn��ݷMu�&}V�,���gY���H�������n�os����`�d����#E�f��j)�����i�Zwk1�1o66$�
۷�ܟ��f�
fN0�s��gS��_�j'���xEoެG�E|�#�h^X��d�����[W�o�ڵ=1�t}|?I����_�f՟o_�U^�$���I��%��6��CxɃU��4�'��<�|���&:���7�1/�gn]���4�̈���g5�=6z�sK�Z#�u�/4���o��c-cm�����_����q���~/5�3��g�m��z�3\q>����IOm��V���ۥ9oYŻ�-��ef<p��|ǝ�W��3Z�r�ϖ��d�L�-6��=mkO������Q�U�&�U�&lٯ92d�i��i��i���p��˚�;^����t{6���T�����:�k�~�w�Gw����:�i���:�1�o8di���H�SOy�ʖ��8�f��u�מz}H�.�~LYp�q��jZ<���U�%/�f%>�Q������
рrŗ.�͇%���h�/Y�j�<bbc�\@l��m+s4�����_�ZV1m�{t��X�9f_�o�~���V�����\��Z\�0��xɏ&;MmKD��DnjLO�Kk݈�Sc��gq������ۥgr��J�SX��&b�"=s[y[�O�0���m+r��|��6�_�[�qn��u��Y�8�?_1�o���̛v��M���%������o�g��^�;n�z�ڛG��15��[���P�5�Y�j�Y�f͚�&L��Z���6�����|˗.|�͛%�d�i��i�kZ|ffg�\@�,�����>QX�*��s�Zmy�׎����)O�1	84z�W��oh����X���>�'O��?��9�o}�o�瞟R;�˪���Qx��M�7�k������M�bˆ�6;R�����Վ����<,Yr��L�r[Lv�R������&&<����}����r��;�9iXŴn����b<0��|G��Y��?Z�x3���Ǫ��ɇ6�Ly1�kjZ'�Z&<bb|z���v������“���n���K+]Mc�x�����m��FP#͎fp�'�}�����i��J᭢���xi��^��g^��җ29�ļ��}ۏx�YmF�g����8��LT�U)X��=���I9瓊��Kɭ�Y3��ƣr�[���o_
Ϫ};t��ɒ'Ɇ =�f͸n�=��"zZ��Z�����	��{��o{��Ɉ�O����O����\lUǎ��+X��k8�pO�;~��|7���V���L���o��~���8n�Dd�/mVO�&��g��	�K��S��t��W�J�G�v�mF\�Kn�|?��x]|�LQ_ϼ����&:�]6���U�ǖ���&?��{1;›ҹ+5�o�n|�jbrm���'՟�I����;sٷ
�'������J�<ko�Waר����
N*��x�5�u�KM�2ᝯ���i\k��#Y��>�'��g�;|6���q'	�ڻ��{&���O���������jg�����x�
��D�U�������P�%�0���|o���	�-�ܶ��?'-<�����3[G�e�.S�3����훘|3�{��2[
���4xd�~�J����zu�	����o�y8S��\��u�OL�6���N
ƕ�z�2�O�ǎ#�6b#͎fp�'�}�����i��J᭢���xi��^��g^���5��s�'�旓[�gi�Y�F�ܷ�ϸ޾�T�,v���$O�1[���^jq��Ǽ[���rݳ�k���T�*G���EkȄhH�o����f���I��<����G�k6j`����;�p�O�F�K]�?(�Y���uR�͟p���=	�Gμ�V�l�;g��h����U���ɤY��G����a�
6*��H��t�c\��L��lf?_���_h8uc&�>�'��c�;���V�K��S��t��W�J�G�v�33;�v�+��ZF��:�]6���U�ǖ���&?�;��.ߩ�ɷ�t�>���O����$��F\�;l�q�����E�>��1�>kO����ї��pMb~m�ƶ�%�^F��
���5Ɏ��kh�p�]����w��:�ǝ�������>'\����ߤ�'�<��VuZ9�⎱���c���;��2�^\s�yY��O��m�i�������+Ǯ���mɖ�9M���/�na���i7l��mx��٣�&��T�Mg�ӬxL4\�߃o�y8O�u\��5�GL�6ؽ�N
ƕ�z���I��8�0l�Nj����ܸ�>`�]�aض�����b:b���$ґ�%l/�N��;+�\i3�s�F�:�Mb|��X��O��\��?���
no����{ֿ�w�U�;��ˬ�f��ɛ%�״���2���N��Φ��L3��[��uE�˯�������h�{��w���486�-��)��>������Z����O�?�7xz�_S:�Do�o�[�{GY�Gw}kZV)J�kX��"D��xZ���p��gK������[�CV������,V�h��>�[���M|�<�9��5n����y�u�����y�bŃqa�\t�t�k"#�\X��,�뒖�����L{�g�&O��}�k%Z��ҵ��dC��z�������J�n�6��m*�
��ֱӻ?�M\����9��iB-[VzZ��|M�bǖ�ܸ�x�Z:�z݃X��'�_����b�V��9�4tvg��M�qf����Z�~���oY�������X�[�+���5?�R~)�~O�[��e�y����.�Q^��^�d��=��[K�~�ծ������9��%y�}'��{��-���2�5yty��Zk>�{��Dţx|��^q�6���=&�{v=�r��A�;6��m�l�b�isS�c͎�zZ>�DKy���4yqÜ��{�þ���v�Y���tˋ��H�'�Yh������r��Ư?{?�1��Vg�K��[���Y���G��2���}��w.8��;�r�v-�.���=#.X���}��4�{�
����{ֿ�w�U�;��ˬ�f��ɛ%�״���2��w�I��_�r�I����7�jk���m�}�r��1��>Ƴ�wh�����Z<��m�w�~�1X�U��l��t��gh�Y�g�8zw}O�uT��a���2�W��-kZV)J�kX��"

�G�G��Jb�O�}s>�����uV�d�v����7�q�c���>����}�v`��S�1a����6����Z��ҵ��dBC��0b���}-��я�cŏ{��֑�tS6H����y!����|W7Oor]V��=-Y��L&�91c�^�\u�{-^y�Λ�P�"��2��I>��W���Ps�˦�8�Rkh�J��������-Z޳K�-[GI���0�=[�ߔ��������?�?'�]���Pw_��������L���O�c�Q��f�j����K��}����G
�΢�K���a�<k����Ljt�,���n��=c�� 2m {vM�r���A�;6��m~٪Ŭ���Ǜ���{���ޯ*��A�\p�0v��p�~-]��z�,�2��i�/I��R�|�ŝ���.5y���_q�V��>Z]TZ�؏_L�����R=�9�T�_��Gj�*e�i�[l�m��O�����/h�o�����m}�n�;�N"��0�\�����_��׋kc��•�0���ɟt�_��,l������WicI�i)Ӥ䧥��m���V������o���_��øVQ�<��n�O���5��}�ALq'o==����Z%��}�5�<�3K3�}��)�'����MÆ�#$��$ #�O6�J��j+oV9��?�I��]ph�'���1�\��腩��l���4��'�E�Ɩ�O�D�c�,�Œ�-Y�0�(\G���k+6�������F�c�<Т�
��Ƀt�_��,�lx���!��:X��Z�t�8��k���(��m<+,���ܜ+Ǻ��i�H�"���o�d�H����/������t�S�j���g��JW����A5�ߟk��v���y�����N$�a�i�b˚���v��4�����T�6��٤�iX���/_�^����g�#�����#�d�.su�x�_�5�q�=x�f�<�)U�_��l��L������ύ������-��&Ť�N���������cx�_����������і��M�=#��઀՝��;��\X��֞�	fߠǠ���o>7����úH�����Y�S�ʺ���3O�h�H��]�A�_�qۤ^<iod�g�LE�iBrc�,�Œ�-Y�0���"i��x�{����.���ޞKl!\�ۢ�0n����E��������J�,j�-]:u�t���M|�J^�,��[|>mw��<'6-��y�޼�^���>tP��i~��د�k�❳W�޳?'�R�����	�~��[_i�v���y�����N$�a�i�b˚��𽛹�>+�gx��w��λ_���ϟ��kV��ྗY�M�&/�-�h�>�3� /�a���T�k�C���Z<�:��Y��y}QJ�k�H
��t:<p[�~�n�޳�C����m�c�:��_�f���R|I�����-�OX��L�I��1���m��H��k����m�vj5u9g6kͭ.�T�3��2�٣�X�G�/c͹Z+��L��h�c�
oβ���:�8�6�.�-_�yy-1Zͧ�#�ͳ�y^=��'�M�y������ι`�p��;?���fbt;��S#%m��v��Z�lQ3|�k��}fb#�=�W������i��v�Q���?�����[�[��]f}6X��,���|���OWH�:lq�O�yR���<����b��1Ղ�Sʑ��:�ѕcͪ�����XK6|q�n��Gz~�{m��m�c�:������ӕc`����͛��7���dɃ6�pޟ�Y������1�]�4z����K�+Et�����tD�S��u�q�m>\3�zZ��;-1Zͧ�#����xE�b՚ۤ��
��*�)����;>�Y�����ǟ��[F��`��Y�M�&o�-q�#Ϭ�Dto�����N��^3�&�'o�
�K����9+��i���ۅ�Nqގ0�<z�u7<s�/�T�kG��x�|H,����Vפ����g����^�s�uѨ�'K3�������x����$m/S��Z���_��#_ð�#�V7��?��K���&��u��i��|�4�mZ��֟����������1��Ko)`�111>10��Ȁ
gf�zE��-�>���ʔ�DL��Dx��)��=��VGO�O�����o+9��ޯ
�M�<iv�^y����oO⴫��Z������z��z~�|g���V��p|~\3y�?��}#k#7�����������s�+�.�;�5x3d�����;v����jq�����ط�m�=�8G8}&=���I���6+歧���G�`��[T�\��=�k�v� �t�=��S���^��\3n�9�z8����u����GH�jqS5���}�+$.�Ӟ5[^�<O��I�����ZU��]tj6�����-�?f�1�z�G��������β0������޼�m�0۴��?�2h}_V������h�ծ���-i��M��oܕ���LLLO�L(�m)�/�ޏ�)^M�k��gQ�?EY�������l�q��z��qž����o;B�
E���)��JV+X򈎑�L��^�jϜLu�}SЮ8۾#���jϡ�z���=����K����_L��k�_mc���'����y7l���y�~f�}�<?�֎qֺ4�Dib~^��^��_�=?�6?��Zz�]�Z��p�ډ�5���G�ހ�4W�]�w�j�f���C�v�/Oo����oU��ż3n)�9��9��1����L�X�i�_5m?�"=�
ɀ�����/M�}�ɴj�X�\���}��kGى�Ń���K�/��a��6���]�Gg��&r�z�g�DDy��4���{�m{�=-�a�~�'_(��?���Y���
����4Z����ק�ӤyO����|_K3�z���}����y�:{�����Um�y��F�U�q�z��D���JE��-[x���J�iu�����b'γ��)�<ו�&���o��>�[���&���������e"3R{��7�1�o��Z��fg�L�Ky��������)��v�Y=s噈�xD}�b��ڊ����n���bt�^���[�o�) �#dK^o;�����4s����V��<>�'�~�T�wg�c�Yc�������g��X��h��QN,�ctݯ����X�yOO9��(�ܱc�4�W�>m�k2q
M�Y���g�|:@� �O��m��.�^��-�A�h����l���2L{�L5��+ۄ�=�K�ӳ���i���1m�Y'��"qD��cp���LH1�G�hx˄y���>�u�d�5V�xW.�Ls>�S5������;qr������XtzoM���W~��GY막�����l�s0�����^�OKn�u����:�O���F��jM-�R�:̜?SMV�I������=��w=h����O�H��?�HZnl6�y�n��K��<SKMV	�6������U�����mWY��m���jcvB��N�R��H�;E�o��	rC���V�z��1�Y���<\Kx�ϥ����?����]u���ԟc��>��f~^�1��J�ɤ��Fn�dw
�f�M�2�E/Sku��›Rm��T�m�]�s#�#q��V��l�L�O�_5����۶��y�i�����_���މ��pm��R���g��/�W�:���S�x}�d�k����U}f�4��\�D{"=P�R�Xه���Q7al��u��v���\:�c��=<���P��~�]�G:->O�Z�����9�}Q�E�l<#K1�{|?��}!q���x'�;����?q�@����]�<]̽N�[V�ѥ����s��d��֘kfV���-/�Nμ;�Y��;�ŷ�dLt�����뉌��1+��\X�����J�/K�&���I���s�.�\��rG�����m���/o�hr��I��~V9�]��k[���sc�ߞ�=���K��ɪ�\u�}V�c�|Qmj�c%c�m�v�n�W���q���&�1�Z˨y1��U/lV��v���t6 �oz~��Ǩ�~�_/|{aUY�>�>�5ul�ǒ�ֶ���M�N7�jb�}ۦ�Q�>e�߫��ƻ���3|<�Ӽ;/��q�[X�q�d���[{�O�=���J��h�mbbzľ�������:��h�kffzD"����m>��>_)�?2�g��_j�>ME���v7��}�����}#��GY�7Uw� �l�~��ɨ�~�_?|�!m5z�F�S�W��7ɒz�_5�����jr�&K�[Z��e���z*�+�i�.�O��h���ݯ�>��t�� Z�.�fNPj9��m��g
��F_�n����8�-�����'O��*�V,X�b���:�)JV"��GH���b�`.@۔�������^3�=VJ�K�t1pb���[[�9-�X�2�2�ş�g�L��Viz^�5�f:LLO�KJ���A��9��	�7��9~=�^߬�噶.�����s>�c�u�Z���sc�ߞ�=���K��ɪ�\u�}V�c�|Qmj�c%c�m�pj�n�W���q���&�1�Z���A����k1�QH�&.�^���׻4���\��i��JOZڳ�aY�������ټ7�\��;}�V���c�~��b������mLWO�t���2�̷���ؔ���X�-���LOX���O�Oo.H�ܸg��|_[��[�;Ǽu��g�0���:��Z+Z�Y������Do/�V��]�O��5������d)[���m>��>_)�?2�g��_j��g�f��S��2^z�֞�,���[$��r�N��%��m������ֵ����;�>��z�v�&�U�o�$�����DEchq���m7��3�f{��"�ve������8&p��o����z��C�b�zϫ��q��l�Z��{rܨ�|���1�o\��}.�#�Skku����D��I�,��*cǎ�JR���k�""<��j��Of,ܜ�{��	m���&y�#u�߭�[_O?V��6���W�x�m@���ep���c��]��g|V������z�E�h񉈐hx]��]�8����a�c&�d�Ͳ�۬S�5xb~m�U�^���1ֳ6�ݿz������+׬�|k?t�$z>ad����������O�C�l�L�޼ٮ�.'��˦�1_I�)�#ุx�b�.��~�>�˫��LJ:u�����[Ax>�{���6:}"�jF�ZO�O�h\\�s�c��|�sO��J�s$��A��}��n��?�.S���ct=W��Φ<��S���������O��]�^�b��X�����Ҵ�-chj��uW���6����~r�dR��ś�|mN<�ݶ����d���5��ji��R�b�=���?kٷ��v��zl;Td�l��]�u�u���ͯ��m�b��fzV&cp���1�^�x#���hv��a���3>�^���i���>332
�
Rv��ś��o~<�-���$�7�c������k�����&�����Zo��8�9��[�q��MvӺ�9�[�c�[�~��1���&"Zy�%�ӊ�;q���2kvMl�.ͺ�:SW�'���\��j��k12������k��Z�ҽz�'Ƴ�O��)�+x��7����[�\��;��?�a��H���A[{o��?��uW�Y#��>/����u[��/M~q{6�/��Κ<��_����ҹ�<9ӯ��
���7�X��_>_�����[�n8>�;���&_��^6��=��Ja��I���AZ�/���tsp޷=����z���
����I�:W�\�>!�|R<���5�Q�~ 	,(�}�{:q_h�7�õFMɢ���wY�Zi0�������&+_�g�bf���ś��mN;�ݶ����#�w
mzZ�x�ԯX�Owv�O�k��/rӄv������j�pb��Ϯ׼�+��6���ffU�K�<��qpv��8�k��o�Gz���si��Ow6+�ׯ��O�LLL��?��f>8���ӣݱ�q��nKF׽b�1�=|�H��yb<�3��f�1�����-Ük�k8c�6]&�k��-F�U�/K�}��1�&&"bbc�4(3/�����\m_�^��#��ųfڧ��*���G���]?I����m�\o�>;cɎ�K���մOI���qrŋ.|����d�h�)H�kZg�DDy�8�f��|q�+��G���ú,���zˎg
��<q��2�yR'ìM�#�z;5�|U�V��:)����W6�>F᭯^�2D���1������Y��nཋG�'��6��A�1i��\qJR��9�9��33333=AG�w+8/�����ګ����޽�=�ڜ��͖�N���>Q���+8/�\���:����Qޥ�=��l��͊�B���>S�12�b�!ُ�;:�4��lw�xw[�ѵ�X��b�_8ǒ<}X�:L�����x��}|O��9ƻ��8�e�n�V���iuX���g�>Sq1�bb&&&:���S�������/MW��bٳmS��
z��#�QH�.���\[���A�.,�2�|vǓ���㥫h���. �\�i�;dɒ�JR��ִ�H���d�k�<�������tSUÜ?h�l;T|��[^�zd����cϯ�'��,�f��|q�+��G���ú,���zˎg
��<q��2�yR'ìM�#ŷWr���;��>�]��=�K����ͩ�1��o��n�3�X���ش|1�{.�jڴ��K���+��󙞳33333�UC����;�j��w��vn"�|��k�qg��ίN�h��;�<"�^����`{r����=�׍�zu��vzL�b���������#���f�Y�j��w
&m.���p��4�;G�Z�����.;�/,�����p6;DW�L��-m�~�X�t�m�,A㯃/����jx+~߸W5�f��-?ۗ����Yn!�-9����j�/�w*�����4s1�R��}�~�a8������1���)���w�⻵+��=,S�����]�;���O��so������c'����������Ӱm��?�nԷw��Q�����i��U��|3��g��Q�����������	��=�q�b���LڭN{E1aÎo|��(�c�g�
��/���M���<k�o�U��?������X��d�r��|��|W�xf��kݾM&��͒?o,�����
a����2�]�;mx'g�I��x�Ʀ���,t�_,��=���_c�Nr&��-�h��i+z�"�s��קs{��k/x!�N����r�;��;7^>N��ָ���W�s4{��j��݀9��K��p��^6���k���3���ޖz߯���{m 4��k6�V]�ͥ���.���h�V|b}��oO��K�>f�+��
�o���&�K[f���>]?�hco||���S�[��¹��0�X�ii�ܿ���(5|3c�~Nf�m?����ʱ?��:��}��ow_��>N�{�N��w|�+�R����?�1�d'��;WzN��1���~\�����ok�9;Lnߍ�;������Kw~�E���=�Zs7Uh���_�����a�k&#�p��������_%6�����qVj��3�4:[���c�t��赛���o�f�js�)�s{��Ek3>�d�(~�{s.�u�C�ׂv{��jw�Ljm_���K���������r��|��|W�xf��kݾM&��͒?o,����Җ��r/��'9\[�ʹN��4���n�\��?�kӹ�=���O	�����

sketch.js

var main_canvas;
var pos1_slider;
var tilt1_slider;
var pos2_slider;
var tilt2_slider;
var pos3_slider;
var tilt3_slider;

var canvasWidth = 960;
var canvasHeight = 500;

var savedValues = {
  "A":
    {
      "box1": {
        "position": -174,
        "tilt": -47
      },
      "box2": {
        "position": -104,
        "tilt": -4
      },
      "box3": {
        "position": -121,
        "tilt": 58
      }
    },
  "B":
    {
      "box1": {
        "position": -191,
        "tilt": -90
      },
      "box2": {
        "position": -54,
        "tilt": -45
      },
      "box3": {
        "position": -12,
        "tilt": 6
      }
    },
  "C":
    {
      "box1": {
        "position": -163,
        "tilt": -84
      },
      "box2": {
        "position": -191,
        "tilt": 163
      },
      "box3": {
        "position": 0,
        "tilt": -27
      }
    }
}

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);

  // rotation in degrees (more slider friendly)
  angleMode(DEGREES);

  // create two sliders
  pos1_slider = createSlider(-200, 200, 0);
  tilt1_slider = createSlider(-180, 180, 0);
  pos2_slider = createSlider(-200, 200, 0);
  tilt2_slider = createSlider(-180, 180, 0);
  pos3_slider = createSlider(-200, 200, 0);
  tilt3_slider = createSlider(-180, 180, 0);

  sel = createSelect();
  sel.option('A');
  sel.option('B');
  sel.option('C');
  sel.changed(letterChangedEvent);

  button = createButton('show data');
  button.mousePressed(buttonPressedEvent);

  // position each element on the page
  main_canvas.parent('canvasContainer');
  pos1_slider.parent('slider1Container');
  tilt1_slider.parent('slider2Container');
  pos2_slider.parent('slider3Container');
  tilt2_slider.parent('slider4Container');
  pos3_slider.parent('slider5Container');
  tilt3_slider.parent('slider6Container');

  sel.parent(selectorContainer);
  button.parent(buttonContainer);
}

function sliderToDataObject() {
  var obj = {};
  obj["box1"] = {};
  obj["box1"]["position"] = pos1_slider.value();
  obj["box1"]["tilt"] = tilt1_slider.value();
  obj["box2"] = {};
  obj["box2"]["position"] = pos2_slider.value();
  obj["box2"]["tilt"] = tilt2_slider.value();
  obj["box3"] = {};
  obj["box3"]["position"] = pos3_slider.value();
  obj["box3"]["tilt"] = tilt3_slider.value();
  return obj;
}

function dataObjectToSliders(obj) {
  pos1_slider.value(obj["box1"]["position"]);
  tilt1_slider.value(obj["box1"]["tilt"]);
  pos2_slider.value(obj["box2"]["position"]);
  tilt2_slider.value(obj["box2"]["tilt"]);
  pos3_slider.value(obj["box3"]["position"]);
  tilt3_slider.value(obj["box3"]["tilt"]);
}

function letterChangedEvent() {
  var item = sel.value();
  dataObjectToSliders(savedValues[item]);
}

function buttonPressedEvent() {
  var obj = sliderToDataObject();
  json = JSON.stringify(obj, null, 2);
  alert(json);
}

var colorFront = [207, 222, 227];
var colorBack = [29, 42, 46];

function drawPart(y_offset, pos, tilt) {
  var middle_x = 2 * canvasWidth / 3;
  var middle_y = canvasHeight / 2;
  resetMatrix();
  translate(middle_x + pos, middle_y + y_offset);
  rotate(tilt);

  var scale = 10;

  fill(colorFront);
  // rect(-100,-100,100,100);
  rect(-20*scale, -3*scale, 20*scale, 3*scale);
}

function drawFromSliders(y_offset, pos_slider, tilt_slider) {
  var pos, tilt;
  pos = pos_slider.value();
  tilt = tilt_slider.value();
  drawPart(y_offset, pos, tilt);
}

function draw () {
  background(colorBack);
  fill(colorFront);
  stroke(95, 52, 8);

  drawFromSliders(-50, pos1_slider, tilt1_slider);
  drawFromSliders(  0, pos2_slider, tilt2_slider);
  drawFromSliders( 50, pos3_slider, tilt3_slider);
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

start.js

const canvasWidth = 960;
const canvasHeight = 500;

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);
}

const colorBack = "#f0f0f0";
const colorFront = "#303030";
const colorSpot1 = "#b03030";
const colorSpot2 = "#d04040";
const colorSpot3 = "#f05050";

function drawLetter(whichLetter) {
  let posx=0, posy=0;
  if (whichLetter == "A") {
    fill(colorFront);
    ellipse(posx, posy, 200, 200);
    fill(colorSpot1);
    ellipse(posx, posy, 120, 120);
    fill(colorSpot2);
    ellipse(posx, posy, 70, 70);
    fill(colorSpot3);
    ellipse(posx, posy, 30, 30);      
  }
  else if (whichLetter == "B") {
    fill(colorFront);
    ellipse(posx, posy, 200, 200);
    fill(colorSpot1);
    ellipse(posx, posy, 120, 120);
    fill(colorSpot2);
    ellipse(posx, posy, 70, 70);
    fill(colorSpot3);
    ellipse(posx, posy, 30, 30);      
  }
  else {
    fill(colorFront);
    ellipse(posx, posy, 200, 200);
    fill(colorSpot1);
    ellipse(posx, posy, 120, 120);
    fill(colorSpot2);
    ellipse(posx, posy, 70, 70);
    fill(colorSpot3);
    ellipse(posx, posy, 30, 30);      
  }
}

function draw () {
  background(colorBack);
  noStroke();

  push();
  translate(1*width/4, height/2);
  drawLetter("A")
  pop();

  push();
  translate(2*width/4, height/2);
  drawLetter("B")
  pop();

  push();
  translate(3*width/4, height/2);
  drawLetter("C")
  pop();
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

style1.html

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="style1.js"></script>
    <style>
        body   { padding: 0; margin: 0; }
        .inner { position: absolute; }
        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.7;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }
        #controls:hover { opacity: 0.9; }
    </style>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
<p>
    Links to other sections:
<ul>
    <li><a href="style1.html">style_1</a>
    <li><a href="style2.html">style_2</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interactino.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
        </div>
        <div class="inner" id="controls" height="500px">
            <table class="home">
                <tr>
                    <td>Pos1</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>Tilt1</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>Pos2</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>Tilt2</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td>Pos3</td>
                    <td id="slider5Container"></td>
                </tr>
                <tr>
                    <td>Tilt3</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr>
                    <td>
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td>Letter</td>
                    <td id="selectorContainer"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="buttonContainer"></td>
                </tr>
        </div>
    </div>
</table>
</body>

style1.js

let main_canvas = null;
let pos1_slider = null;
let tilt1_slider = null;
let pos2_slider = null;
let tilt2_slider = null;
let pos3_slider = null;
let tilt3_slider = null;

const canvasWidth = 960;
const canvasHeight = 500;

let savedValues = {
  "A":
    {
      "box1": {
        "position": -174,
        "tilt": -47
      },
      "box2": {
        "position": -104,
        "tilt": -4
      },
      "box3": {
        "position": -121,
        "tilt": 58
      }
    },
  "B":
    {
      "box1": {
        "position": -191,
        "tilt": -90
      },
      "box2": {
        "position": -54,
        "tilt": -45
      },
      "box3": {
        "position": -12,
        "tilt": 6
      }
    },
  "C":
    {
      "box1": {
        "position": -163,
        "tilt": -84
      },
      "box2": {
        "position": -191,
        "tilt": 163
      },
      "box3": {
        "position": 0,
        "tilt": -27
      }
    }
}

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);

  // rotation in degrees (more slider friendly)
  angleMode(DEGREES);

  // create two sliders
  pos1_slider = createSlider(-200, 200, 0);
  tilt1_slider = createSlider(-180, 180, 0);
  pos2_slider = createSlider(-200, 200, 0);
  tilt2_slider = createSlider(-180, 180, 0);
  pos3_slider = createSlider(-200, 200, 0);
  tilt3_slider = createSlider(-180, 180, 0);

  sel = createSelect();
  sel.option('A');
  sel.option('B');
  sel.option('C');
  sel.changed(letterChangedEvent);

  button = createButton('show data');
  button.mousePressed(buttonPressedEvent);

  // position each element on the page
  main_canvas.parent('canvasContainer');
  pos1_slider.parent('slider1Container');
  tilt1_slider.parent('slider2Container');
  pos2_slider.parent('slider3Container');
  tilt2_slider.parent('slider4Container');
  pos3_slider.parent('slider5Container');
  tilt3_slider.parent('slider6Container');

  sel.parent(selectorContainer);
  button.parent(buttonContainer);
}

function sliderToDataObject() {
  let obj = {};
  obj["box1"] = {};
  obj["box1"]["position"] = pos1_slider.value();
  obj["box1"]["tilt"] = tilt1_slider.value();
  obj["box2"] = {};
  obj["box2"]["position"] = pos2_slider.value();
  obj["box2"]["tilt"] = tilt2_slider.value();
  obj["box3"] = {};
  obj["box3"]["position"] = pos3_slider.value();
  obj["box3"]["tilt"] = tilt3_slider.value();
  return obj;
}

function dataObjectToSliders(obj) {
  pos1_slider.value(obj["box1"]["position"]);
  tilt1_slider.value(obj["box1"]["tilt"]);
  pos2_slider.value(obj["box2"]["position"]);
  tilt2_slider.value(obj["box2"]["tilt"]);
  pos3_slider.value(obj["box3"]["position"]);
  tilt3_slider.value(obj["box3"]["tilt"]);
}

function letterChangedEvent() {
  let item = sel.value();
  dataObjectToSliders(savedValues[item]);
}

function buttonPressedEvent() {
  let obj = sliderToDataObject();
  json = JSON.stringify(obj, null, 2);
  alert(json);
}

const colorBack = "#f0f0f0";
const colorFront = "#303030";
const colorSpot1 = "#b03030";
const colorSpot2 = "#d04040";
const colorSpot3 = "#f05050";

let letterA_posX = -20;
let letterA_posY = -20;

let letterB_posX = 20;
let letterB_posY = 20;

function drawLetter(posx, posy, offx, offy) {
  fill(colorFront);
  ellipse(posx, posy, 200, 200);
  fill(colorSpot1);
  ellipse(posx, posy, 120, 120);
  fill(colorSpot2);
  ellipse(posx, posy, 70, 70);
  fill(colorSpot3);
  ellipse(posx+offx, posy+offy, 30, 30);  
}

function draw () {
  background(colorBack);
  noStroke();

  let centerX = width/2;
  let centerY = height/2;
  drawLetter(centerX-100, centerY, letterA_posX, letterA_posY);
  drawLetter(centerX+100, centerY, letterB_posX, letterB_posY);
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

style2.html

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="style2.js"></script>
    <style>
        body   { padding: 0; margin: 0; }
        .inner { position: absolute; }
        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.7;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }
        #controls:hover { opacity: 0.9; }
    </style>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
<p>
    Links to other sections:
<ul>
    <li><a href="style1.html">style_1</a>
    <li><a href="style2.html">style_2</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interactino.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
        </div>
        <div class="inner" id="controls" height="500px">
            <table>
                <tr>
                    <td></td>
                    <td id="container_0"></td>
                    <td></td>
                    <td id="container_1"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="container_2"></td>
                    <td></td>
                    <td id="container_3"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="container_4"></td>
                    <td></td>
                    <td id="container_5"></td>
                </tr>
                <tr>
                    <td>
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td>Letter</td>
                    <td id="selectorContainer"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="buttonContainer"></td>
                </tr>
        </div>
    </div>
</table>
</body>

style2.js

let main_canvas = null;

let checkboxes = [];

const canvasWidth = 960;
const canvasHeight = 500;

let letterParams = {
  "A":
    [
      true,
      false,
      false,
      false,
      false,
      false
    ],
  "B":
    [
      true,
      false,
      true,
      false,
      false,
      false
    ],
  "C":
    [
      true,
      true,
      false,
      false,
      false,
      false
    ]
}

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);

  sel = createSelect();
  sel.option('A');
  sel.option('B');
  sel.option('C');
  sel.changed(letterChangedEvent);

  button = createButton('show data');
  button.mousePressed(buttonPressedEvent);

  // position each element on the page
  main_canvas.parent('canvasContainer');

  sel.parent(selectorContainer);
  button.parent(buttonContainer);

  for(let i=0; i<6; i++) {
    let cur_checkbox = createCheckbox('', false);
    checkboxes.push(cur_checkbox);
    cur_checkbox.parent('container_' + i);
  }

  letterChangedEvent();
}

function uiToDataObject() {
  let obj = [];
  for(let i=0; i<6; i++) {
    obj.push(checkboxes[i].checked());
  }
  return obj;
}

function dataObjectToUi(obj) {
  for(let i=0; i<6; i++) {
    checkboxes[i].checked(obj[i]);
  }
}

function letterChangedEvent() {
  let item = sel.value();
  dataObjectToUi(letterParams[item]);
}

function buttonPressedEvent() {
  let obj = uiToDataObject();
  json = JSON.stringify(obj, null, 2);
  alert(json);
}

const colorFront = [207, 222, 227];
const colorBack = [29, 42, 46];

function drawPart(y_offset, pos, tilt) {
  let middle_x = 2 * canvasWidth / 3;
  let middle_y = canvasHeight / 2;
  resetMatrix();
  translate(middle_x + pos, middle_y + y_offset);
  rotate(tilt);

  let scale = 10;

  fill(colorFront);
  // rect(-100,-100,100,100);
  rect(-20*scale, -3*scale, 20*scale, 3*scale);
}

function drawPart(pos, is_on) {
  let rad = 0;
  if(is_on) {
    strokeWeight(0);
    rad = 90;
    fill(colorFront);
  }
  else {
    stroke(colorFront);
    strokeWeight(8);
    rad = 40;
    noFill();
  }
  push();
  translate(pos[0], pos[1]);
  ellipse(0, 0, rad, rad);
  pop();
}

// obj is an array of six booleans
function drawCharacter(x, y, obj) {
  let spacing_x = 50, spacing_y = 100;

  let positions = [
    [-spacing_x, -spacing_y],
    [ spacing_x, -spacing_y],
    [-spacing_x, 0],
    [ spacing_x, 0],
    [-spacing_x, spacing_y],
    [ spacing_x, spacing_y],
  ]

  push();
    translate(x, y);
    for(let i=0; i<6; i++) {
      drawPart(positions[i], obj[i])
    }
  pop();
}

function draw () {
  background(colorBack);
  fill(colorFront);
  stroke(95, 52, 8);

  obj = uiToDataObject();
  drawCharacter(width/2, height/2, obj);
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

z_purview_helper.js

// note: this file is poorly named - it can generally be ignored.

// helper functions below for supporting blocks/purview

function saveBlocksImages(doZoom) {
  if(doZoom == null) {
    doZoom = false;
  }

  // generate 960x500 preview.jpg of entire canvas
  // TODO: should this be recycled?
  var offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = 960;
  offscreenCanvas.height = 500;
  var context = offscreenCanvas.getContext('2d');
  // background is flat white
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 960, 500);
  context.drawImage(this.canvas, 0, 0, 960, 500);
  // save to browser
  var downloadMime = 'image/octet-stream';
  var imageData = offscreenCanvas.toDataURL('image/jpeg');
  imageData = imageData.replace('image/jpeg', downloadMime);
  p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

  // generate 230x120 thumbnail.png centered on mouse
  offscreenCanvas.width = 230;
  offscreenCanvas.height = 120;

  // background is flat white  
  context = offscreenCanvas.getContext('2d');
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 230, 120);

  if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
      sx = 0;
    }
    if (sx > this.canvas.width - sw) {
      sx = this.canvas.width - sw;
    }
    if (sy < 0) {
      sy = 0;
    }
    if (sy > this.canvas.height - sh) {
      sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
  }
  else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
  }
  imageData = offscreenCanvas.toDataURL('image/png');
  imageData = imageData.replace('image/png', downloadMime);
  p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}