-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDigital Art Curriculum Update 3.html
1065 lines (770 loc) · 431 KB
/
Digital Art Curriculum Update 3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Digital Art Curriculum Update 3</title>
<style title="Twine CSS">@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out{0%,to{opacity:0}50%{opacity:1}}@keyframes rumble{25%{top:-0.1em}75%{top:0.1em}0%,to{top:0px}}@keyframes shudder{25%{left:0.1em}75%{left:-0.1em}0%,to{left:0px}}@keyframes buoy{25%{top:0.25em}75%{top:-0.25em}0%,to{top:0px}}@keyframes sway{25%{left:0.25em}75%{left:-0.25em}0%,to{left:0px}}@keyframes pulse{0%{transform:scale(0, 0)}20%{transform:scale(1.2, 1.2)}40%{transform:scale(0.9, 0.9)}60%{transform:scale(1.05, 1.05)}80%{transform:scale(0.925, 0.925)}to{transform:scale(1, 1)}}@keyframes zoom-in{0%{transform:scale(0, 0)}to{transform:scale(1, 1)}}@keyframes shudder-in{0%, to{transform:translateX(0em)}5%, 25%, 45%{transform:translateX(-1em)}15%, 35%, 55%{transform:translateX(1em)}65%{transform:translateX(-0.6em)}75%{transform:translateX(0.6em)}85%{transform:translateX(-0.2em)}95%{transform:translateX(0.2em)}}@keyframes rumble-in{0%, to{transform:translateY(0em)}5%, 25%, 45%{transform:translateY(-1em)}15%, 35%, 55%{transform:translateY(1em)}65%{transform:translateY(-0.6em)}75%{transform:translateY(0.6em)}85%{transform:translateY(-0.2em)}95%{transform:translateY(0.2em)}}@keyframes fidget{0%, 8.1%, 82.1%, 31.1%, 38.1%, 44.1%, 40.1%, 47.1%, 74.1%, 16.1%, 27.1%, 72.1%, 24.1%, 95.1%, 6.1%, 36.1%, 20.1%, 4.1%, 91.1%, 14.1%, 87.1%, to{left:0px;top:0px}8%, 82%, 31%, 38%, 44%{left:-1px}40%, 47%, 74%, 16%, 27%{left:1px}72%, 24%, 95%, 6%, 36%{top:-1px}20%, 4%, 91%, 14%, 87%{top:1px}}@keyframes slide-right{0%{transform:translateX(-100vw)}}@keyframes slide-left{0%{transform:translateX(100vw)}}@keyframes slide-up{0%{transform:translateY(100vh)}}@keyframes slide-down{0%{transform:translateY(-100vh)}}@keyframes fade-right{0%{opacity:0;transform:translateX(-1em)}to{opacity:1}}@keyframes fade-left{0%{opacity:0;transform:translateX(1em)}to{opacity:1}}@keyframes fade-up{0%{opacity:0;transform:translateY(1em)}to{opacity:1}}@keyframes fade-down{0%{opacity:0;transform:translateY(-1em)}to{opacity:1}}@keyframes flicker{0%,29%,31%,63%,65%,77%,79%,86%,88%,91%,93%{opacity:0}30%{opacity:0.2}64%{opacity:0.4}78%{opacity:0.6}87%{opacity:0.8}92%, to{opacity:1}}@keyframes blur{0%{filter:blur(2rem);opacity:0}25%{opacity:1}to{filter:blur(0rem);opacity:1}}.dom-debug-mode tw-story,.dom-debug-mode tw-passage,.dom-debug-mode tw-sidebar,.dom-debug-mode tw-include,.dom-debug-mode tw-hook,.dom-debug-mode tw-expression,.dom-debug-mode tw-link,.dom-debug-mode tw-dialog,.dom-debug-mode tw-columns,.dom-debug-mode tw-column,.dom-debug-mode tw-align{outline:1px solid #f5a3da;min-height:32px;display:block !important}.dom-debug-mode tw-story::before,.dom-debug-mode tw-passage::before,.dom-debug-mode tw-sidebar::before,.dom-debug-mode tw-include::before,.dom-debug-mode tw-hook::before,.dom-debug-mode tw-expression::before,.dom-debug-mode tw-link::before,.dom-debug-mode tw-dialog::before,.dom-debug-mode tw-columns::before,.dom-debug-mode tw-column::before,.dom-debug-mode tw-align::before{position:absolute;top:0;left:0;height:16px;background-color:#f5a3da;color:black;font-size:16px;font-weight:normal;font-style:normal;font-family:monospace;display:inline-block;line-height:100%;white-space:pre;z-index:999997}.dom-debug-mode tw-story:hover,.dom-debug-mode tw-passage:hover,.dom-debug-mode tw-sidebar:hover,.dom-debug-mode tw-include:hover,.dom-debug-mode tw-hook:hover,.dom-debug-mode tw-expression:hover,.dom-debug-mode tw-link:hover,.dom-debug-mode tw-dialog:hover,.dom-debug-mode tw-columns:hover,.dom-debug-mode tw-column:hover,.dom-debug-mode tw-align:hover{outline:1px solid #fc9}.dom-debug-mode tw-story:hover::before,.dom-debug-mode tw-passage:hover::before,.dom-debug-mode tw-sidebar:hover::before,.dom-debug-mode tw-include:hover::before,.dom-debug-mode tw-hook:hover::before,.dom-debug-mode tw-expression:hover::before,.dom-debug-mode tw-link:hover::before,.dom-debug-mode tw-dialog:hover::before,.dom-debug-mode tw-columns:hover::before,.dom-debug-mode tw-column:hover::before,.dom-debug-mode tw-align:hover::before{background-color:#fc9;transition:background-color 1s}.dom-debug-mode tw-passage,.dom-debug-mode tw-include,.dom-debug-mode tw-hook,.dom-debug-mode tw-expression,.dom-debug-mode tw-link,.dom-debug-mode tw-dialog,.dom-debug-mode tw-columns,.dom-debug-mode tw-column,.dom-debug-mode tw-align{padding:1em;margin:0}.dom-debug-mode tw-story::before{content:'<tw-story tags="' attr(tags) '">'}.dom-debug-mode tw-passage::before{top:-16px;content:'<tw-passage tags="' attr(tags) '">'}.dom-debug-mode tw-sidebar::before{top:-16px;content:"<tw-sidebar>"}.dom-debug-mode tw-hook::before{content:'<tw-hook name="' attr(name) '">'}.dom-debug-mode tw-expression::before{content:'<tw-expression name="' attr(name) '">'}.dom-debug-mode tw-link::before{content:'<tw-link name="' attr(name) '">'}.dom-debug-mode tw-dialog::before{content:"<tw-dialog>"}.dom-debug-mode tw-columns::before{content:"<tw-columns>"}.dom-debug-mode tw-column::before{content:"<tw-column>"}.dom-debug-mode tw-align::before{content:"<tw-align>"}.dom-debug-mode tw-include::before{content:'<tw-include type="' attr(type) '" name="' attr(name) '">'}.debug-mode tw-expression{display:inline-block !important}.debug-mode tw-expression[type=variable]::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"$" attr(name)}.debug-mode tw-expression[type=tempVariable]::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"_" attr(name)}.debug-mode tw-expression[return=boolean]{background-color:rgba(179,179,179,0.2)}.debug-mode tw-expression[return=array]{background-color:rgba(255,102,102,0.2)}.debug-mode tw-expression[return=dataset]{background-color:rgba(255,128,0,0.2)}.debug-mode tw-expression[return=number]{background-color:rgba(255,179,102,0.2)}.debug-mode tw-expression[return=datamap]{background-color:rgba(255,255,102,0.2)}.debug-mode tw-expression[return=changer]{background-color:rgba(179,255,102,0.2)}.debug-mode tw-expression[return=lambda]{background-color:rgba(102,255,102,0.2)}.debug-mode tw-expression[return=hookname]{background-color:rgba(102,255,204,0.2)}.debug-mode tw-expression[return=string]{background-color:rgba(102,255,255,0.2)}.debug-mode tw-expression[return=datatype]{background-color:rgba(102,153,255,0.2)}.debug-mode tw-expression[return=gradient],.debug-mode tw-expression[return=colour]{background-color:rgba(204,102,255,0.2)}.debug-mode tw-expression[return=instant],.debug-mode tw-expression[return=macro]{background-color:rgba(240,117,199,0.2)}.debug-mode tw-expression[return=command]{background-color:rgba(153,153,255,0.2)}.debug-mode tw-expression.false{background-color:rgba(255,0,0,0.2) !important}.debug-mode tw-expression[type=macro]::before{content:"(" attr(name) ":)";padding:0 0.5rem;font-size:1rem;vertical-align:middle;line-height:normal;background-color:inherit;border:1px solid rgba(255,255,255,0.5)}.debug-mode tw-hook{background-color:rgba(0,85,255,0.1) !important}.debug-mode tw-hook::before{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"["}.debug-mode tw-hook::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"]"}.debug-mode tw-hook[name]::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"]<" attr(name) "|"}.debug-mode tw-pseudo-hook{background-color:rgba(255,170,0,0.1) !important}.debug-mode tw-collapsed::before{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"{"}.debug-mode tw-collapsed::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"}"}.debug-mode tw-verbatim::before,.debug-mode tw-verbatim::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"`"}.debug-mode tw-align[style*="text-align: center"]{background:linear-gradient(to right, rgba(255,204,189,0) 0%, rgba(255,204,189,0.25) 50%, rgba(255,204,189,0) 100%)}.debug-mode tw-align[style*="text-align: left"]{background:linear-gradient(to right, rgba(255,204,189,0.25) 0%, rgba(255,204,189,0) 100%)}.debug-mode tw-align[style*="text-align: right"]{background:linear-gradient(to right, rgba(255,204,189,0) 0%, rgba(255,204,189,0.25) 100%)}.debug-mode tw-column{background-color:rgba(189,228,255,0.2)}.debug-mode tw-enchantment{animation:enchantment 0.5s infinite;border:1px solid}.debug-mode tw-link::after,.debug-mode tw-broken-link::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:attr(passage-name)}.debug-mode tw-include{background-color:rgba(204,128,51,0.1)}.debug-mode tw-include::before{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:attr(type) ' "' attr(name) '"'}@keyframes enchantment{0%,to{border-color:#ffb366}50%{border-color:#6fc}}tw-debugger{position:fixed;box-sizing:border-box;bottom:0;right:0;z-index:999999;min-width:10em;min-height:1em;padding:0em 0.5em 0.5em 1em;font-size:1.25em;font-family:sans-serif;color:#000;border-left:solid #000 2px;border-top:solid #000 2px;border-top-left-radius:.5em;background:#fff;opacity:1}tw-debugger select{margin-right:1em;width:12em}tw-debugger button{border-radius:3px;border:solid #999 1px;margin:auto 4px;background-color:#fff;font-size:inherit;color:#000}tw-debugger button.enabled{background-color:#eee;box-shadow:inset #ddd 3px 5px 0.5em}tw-debugger .panel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;bottom:100%;left:-2px;right:0;padding:1em;max-height:40vh;overflow-y:scroll;overflow-x:hidden;z-index:999998;background:#fff;border:inherit;border-bottom:solid #999 2px;border-top-left-radius:.5em;border-bottom-left-radius:.5em;font-size:0.8em}tw-debugger .panel:empty,tw-debugger .panel[hidden]{display:none}tw-debugger .panel-source,tw-debugger .panel-row-source{font-family:monospace;overflow-x:scroll;white-space:pre;-ms-flex-preferred-size:100%;flex-basis:100%}tw-debugger .panel-row-source{margin:5px 0}tw-debugger .panel-rows{width:100%;overflow-x:scroll}tw-debugger .panel-rows>*{display:table-row}tw-debugger .panel-rows>div:nth-of-type(2n){background:#EEE}tw-debugger .panel-row-buttons{text-align:right}tw-debugger .panel-variables .panel-rows:empty::before{content:"~ No variables ~";font-style:italic;color:#888;text-align:center}tw-debugger .panel-enchantments .panel-rows:empty::before{content:"~ No enchantments ~";font-style:italic;color:#888;text-align:center}tw-debugger .panel-errors .panel-rows:empty::before{content:"~ No errors... for now. ~";font-style:italic;color:#888;text-align:center}tw-debugger .panel-rows:empty+.panel-variables-bottom{display:none}tw-debugger .panel-storylets:not(.panel-exclusive) .storylet-exclusive,tw-debugger .panel-storylets:not(.panel-urgent) .storylet-urgent{display:none}tw-debugger .panel-variables-bottom{padding-top:5px}tw-debugger .enchantment-row{min-height:1.5em}tw-debugger .variable-path{opacity:0.4}tw-debugger .temporary-variable-scope,tw-debugger .enchantment-local{font-family:sans-serif;font-weight:normal;opacity:0.8;font-size:0.75em}tw-debugger .temporary-variable-scope:not(:empty)::before,tw-debugger .enchantment-local:not(:empty)::before{content:" in "}tw-debugger .variable-name,tw-debugger .enchantment-name{font-family:monospace;font-weight:bold}tw-debugger .variable-type{color:#444;font-weight:normal;text-overflow:ellipsis;overflow:hidden;max-width:10em}tw-debugger .error-row{display:table-row;background-color:rgba(230,101,204,0.3)}tw-debugger .error-row:nth-of-type(2n){background-color:rgba(237,145,219,0.3)}tw-debugger .error-row>*{display:table-cell;padding:0.25em 0.5em}tw-debugger .error-row .error-message{cursor:help}tw-debugger .error-row .error-passage{color:#444}tw-debugger .storylet-row{background-color:rgba(201,233,222,0.3)}tw-debugger .storylet-row:nth-child(2n){background-color:rgba(128,203,178,0.3)}tw-debugger .storylet-row.storylet-closed{font-style:italic;opacity:0.4;background-color:rgba(217,217,217,0.3)}tw-debugger .storylet-row.storylet-closed:nth-child(2n){background-color:rgba(166,166,166,0.3)}.storylet-error tw-debugger .storylet-row{background-color:rgba(230,101,204,0.3)}.storylet-error tw-debugger .storylet-row:nth-child(2n){background-color:rgba(237,145,219,0.3)}tw-debugger .storylet-row .storylet-name,tw-debugger .storylet-row .storylet-value{display:inline-block;width:50%}tw-debugger .tabs{padding-bottom:0.5em}tw-debugger .tab{border-radius:0px 0px 0.5em 0.5em;border-top:none}tw-debugger .resizer{position:absolute;height:3em;border-left:2px solid #ccc;border-right:2px solid #ccc;top:10px;left:4px;width:8px;cursor:ew-resize}tw-dialog{z-index:999997;border:#fff solid 2px;padding:2em;color:#fff;background-color:#000;display:block}@media (min-width: 576px){tw-dialog{max-width:50vw}}tw-dialog input[type=text]{font-size:inherit;width:100%}tw-dialog-links{text-align:right;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}tw-backdrop{z-index:999996;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.8);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}tw-backdrop ~ tw-backdrop{display:none}tw-link,.link,tw-icon,.enchantment-clickblock{cursor:pointer}tw-link,.enchantment-link{color:#4169E1;font-weight:bold;text-decoration:none;transition:color 0.2s ease-in-out}tw-passage [style^="color"] tw-link:not(:hover),tw-passage [style*=" color"] tw-link:not(:hover),tw-passage [style^="color"][hover="true"] tw-link:hover,tw-passage [style*=" color"][hover="true"] tw-link:hover,tw-passage [style^="color"] .enchantment-link:not(:hover),tw-passage [style*=" color"] .enchantment-link:not(:hover),tw-passage [style^="color"][hover="true"] .enchantment-link:hover,tw-passage [style*=" color"][hover="true"] .enchantment-link:hover{color:inherit}tw-link:hover,.enchantment-link:hover{color:#00bfff}tw-link:active,.enchantment-link:active{color:#DD4B39}.visited{color:#6941e1}tw-passage [style^="color"] .visited:not(:hover),tw-passage [style*=" color"] .visited:not(:hover),tw-passage [style^="color"][hover="true"] .visited:hover,tw-passage [style*=" color"][hover="true"] .visited:hover{color:inherit}.visited:hover{color:#E3E}tw-broken-link{color:#993333;border-bottom:2px solid #993333;cursor:not-allowed}tw-passage [style^="color"] tw-broken-link:not(:hover),tw-passage [style*=" color"] tw-broken-link:not(:hover),tw-passage [style^="color"][hover="true"] tw-broken-link:hover,tw-passage [style*=" color"][hover="true"] tw-broken-link:hover{color:inherit}.enchantment-mouseover{border-bottom:2px dashed #999}.enchantment-mouseout{border:rgba(64,149,191,0.6) 1px solid}.enchantment-mouseout:hover{background-color:rgba(175,197,207,0.75);border:transparent 1px solid;border-radius:0.2em}.enchantment-clickblock{width:100%;height:100%;display:block}.enchantment-clickblock>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;color:rgba(65,105,225,0.5);transition:color 0.2s ease-in-out}.enchantment-clickblock>:not(tw-enchantment):hover::after{color:rgba(0,191,255,0.5)}.enchantment-clickblock>:not(tw-enchantment):active::after{color:rgba(222,78,59,0.5)}.enchantment-clickblock>:not(tw-enchantment)::after{box-shadow:inset 0 0 0 0.5vmax}.enchantment-clickblock>tw-passage::after,.enchantment-clickblock>tw-sidebar::after{box-shadow:0 0 0 0.5vmax}.enchantment-mouseoverblock>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;border:2px dashed #999}.enchantment-mouseoutblock>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;border:rgba(64,149,191,0.6) 2px solid}.enchantment-mouseoutblock:hover>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;background-color:rgba(175,197,207,0.75);border:transparent 2px solid;border-radius:0.2em}tw-link.enchantment-button,.enchantment-link.enchantment-button,.enchantment-button:not(.enchantment-link) tw-link,.enchantment-button:not(.enchantment-link) .enchantment-link{border-radius:16px;border-style:solid;border-width:2px;text-align:center;padding:0px 8px;display:block}tw-dialog-links{padding-top:1.5em}tw-dialog-links tw-link{border-radius:16px;border-style:solid;border-width:2px;text-align:center;padding:0px 8px;display:block;display:inline-block}html{margin:0;height:100%;overflow-x:hidden}*,:before,:after{position:relative;box-sizing:inherit}body{margin:0;height:100%}tw-storydata{display:none}tw-story{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font:100% Georgia, serif;box-sizing:border-box;width:100%;min-height:100%;font-size:1.5em;line-height:1.5em;padding:5% 5%;overflow:hidden;background-color:#000;color:#fff}tw-story [style*=content-box] *{box-sizing:border-box}@media (min-width: 576px){tw-story{padding:5% 20%}}tw-story tw-consecutive-br{display:block;height:1.6ex;visibility:hidden}tw-story select{background-color:transparent;font:inherit;border-style:solid;padding:2px}tw-story select:not([disabled]){color:inherit}tw-story textarea{resize:none;background-color:transparent;font:inherit;color:inherit;border-style:none;padding:2px}tw-story input[type=checkbox]{transform:scale(1.5);margin:0 0.5em}tw-story tw-noscript{animation:appear 0.8s}tw-passage{display:block}tw-sidebar{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 576px){tw-sidebar{left:-5em;width:3em;position:absolute;-ms-flex-direction:column;flex-direction:column}tw-enchantment[style*="width"]>tw-sidebar{width:inherit}}tw-icon{display:inline-block;margin:0.5em 0;font-size:66px;font-family:"Verdana",sans-serif}tw-icon[alt]{opacity:0.2}tw-icon[alt]:hover{opacity:0.4}tw-icon[data-label]::after{font-weight:bold;content:attr(data-label);font-size:20px;bottom:-20px;left:-50%;white-space:nowrap}tw-meter{display:block}tw-hook:empty,tw-expression:empty{display:none}tw-error{display:inline-block;border-radius:0.2em;padding:0.2em;font-size:1rem;cursor:help;white-space:pre-wrap}tw-error.error{background-color:rgba(223,58,190,0.6);color:#fff}tw-error.warning{background-color:rgba(223,140,58,0.6);color:#fff;display:none}.debug-mode tw-error.warning{display:inline}tw-error-explanation{display:block;font-size:0.8rem;line-height:1rem}tw-open-button,tw-folddown{cursor:pointer;line-height:0em;border-radius:1px;border:1px solid black;font-size:0.8rem;margin:0 0.4rem;padding:2px;white-space:pre}tw-folddown::after{content:"\25b6"}tw-folddown.open::after{content:"\25bc"}tw-open-button::after{content:"Open"}tw-notifier{border-radius:0.2em;padding:0.2em;font-size:1rem;background-color:rgba(223,182,58,0.4);display:none}.debug-mode tw-notifier{display:inline}tw-notifier::before{content:attr(message)}tw-colour{border:1px solid black;display:inline-block;width:1em;height:1em}tw-enchantment:empty{display:none}h1{font-size:3em}h2{font-size:2.25em}h3{font-size:1.75em}h1,h2,h3,h4,h5,h6{line-height:1em;margin:0.3em 0 0.6em 0}pre{font-size:1rem;line-height:initial}small{font-size:70%}big{font-size:120%}mark{color:rgba(0,0,0,0.6);background-color:#ff9}ins{color:rgba(0,0,0,0.6);background-color:rgba(255,242,204,0.5);border-radius:0.5em;box-shadow:0em 0em 0.2em #ffe699;text-decoration:none}center{text-align:center;margin:0 auto;width:60%}blink{text-decoration:none;animation:fade-in-out 1s steps(1, end) infinite alternate}tw-align{display:block}tw-columns{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}.transition-in{animation:appear 0ms step-start}.transition-out{animation:appear 0ms step-end}[data-t8n^=dissolve].transition-in,[data-t8n=fade].transition-in{animation:appear .8s}[data-t8n^=dissolve].transition-out,[data-t8n=fade].transition-out{animation:appear .8s reverse}[data-t8n^=shudder].transition-in{display:inline-block !important;animation:shudder-in .8s}[data-t8n^=shudder].transition-out{display:inline-block !important;animation:shudder-in .8s reverse}[data-t8n^=rumble].transition-in{display:inline-block !important;animation:rumble-in .8s}[data-t8n^=rumble].transition-out{display:inline-block !important;animation:rumble-in .8s reverse}[data-t8n^=pulse].transition-in{animation:pulse .8s;display:inline-block !important}[data-t8n^=pulse].transition-out{animation:pulse .8s reverse;display:inline-block !important}[data-t8n^=zoom].transition-in{animation:zoom-in .8s;display:inline-block !important}[data-t8n^=zoom].transition-out{animation:zoom-in .8s reverse;display:inline-block !important}[data-t8n^=blur].transition-in{animation:blur .8s;display:inline-block !important}[data-t8n^=blur].transition-out{animation:blur .8s reverse;display:inline-block !important}[data-t8n^=slideleft].transition-in{animation:slide-left .8s;display:inline-block !important}[data-t8n^=slideleft].transition-out{animation:slide-right .8s reverse;display:inline-block !important}[data-t8n^=slideright].transition-in{animation:slide-right .8s;display:inline-block !important}[data-t8n^=slideright].transition-out{animation:slide-left .8s reverse;display:inline-block !important}[data-t8n^=slideup].transition-in{animation:slide-up .8s;display:inline-block !important}[data-t8n^=slideup].transition-out{animation:slide-down .8s reverse;display:inline-block !important}[data-t8n^=slidedown].transition-in{animation:slide-down .8s;display:inline-block !important}[data-t8n^=slidedown].transition-out{animation:slide-up .8s reverse;display:inline-block !important}[data-t8n^=fadeleft].transition-in{animation:fade-left .8s;display:inline-block !important}[data-t8n^=fadeleft].transition-out{animation:fade-right .8s reverse;display:inline-block !important}[data-t8n^=faderight].transition-in{animation:fade-right .8s;display:inline-block !important}[data-t8n^=faderight].transition-out{animation:fade-left .8s reverse;display:inline-block !important}[data-t8n^=fadeup].transition-in{animation:fade-up .8s;display:inline-block !important}[data-t8n^=fadeup].transition-out{animation:fade-down .8s reverse;display:inline-block !important}[data-t8n^=fadedown].transition-in{animation:fade-down .8s;display:inline-block !important}[data-t8n^=fadedown].transition-out{animation:fade-up .8s reverse;display:inline-block !important}[data-t8n^=flicker].transition-in{animation:flicker .8s}[data-t8n^=flicker].transition-out{animation:flicker .8s reverse}
</style>
</head>
<body>
<tw-story><noscript><tw-noscript>JavaScript needs to be enabled to play Digital Art Curriculum Update 3.</tw-noscript></noscript></tw-story>
<tw-storydata name="Digital Art Curriculum Update 3" startnode="1" creator="Twine" creator-version="2.3.16" ifid="21547164-81E5-4B7A-AD92-4F7078D3921D" zoom="1" format="Harlowe" format-version="3.2.3" options="" hidden><style role="stylesheet" id="twine-user-stylesheet" type="text/twine-css">tw-story { background-color: #E6EBC8;}
tw-passage {
color: black;
}
tw-passage {
font-family: Arial
}</style><script role="script" id="twine-user-script" type="text/twine-javascript"></script><tw-passagedata pid="1" name="Digital Art Curriculum" tags="Learning" position="213,12" size="100,100">#(text-color:#64A79B)+(text-style: "underline")[Digital Art Curriculum]
Why is digital art important?
<img src = "https://dazedimg-dazedgroup.netdna-ssl.com/1280/azure/dazed-prod/1280/8/1288188.jpg" />
A curriculum made by Charlize Serrano a (text-style:"shudder")[High School Senior]
<img src="images/whatisdigitalart.png" />
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
[[First Page (students go here)->Introduction + Learning Objectives]]
(text-colour:grey)[ [[Teacher Notes->Teacher Notes]]
[[Table of Contents->Table of Contents]]]
(link: "save")[(save-game: "file A")]
(link: "load")[(load-game: "file A")]
</tw-passagedata><tw-passagedata pid="2" name="What exactly is digital art? (exercise)" tags="" position="249,129" size="100,100">#Respond to the following
''What do you think digital art is? ''Put your definition below.
(input-box:2bind $Definition,"X","Type your definition")
[[Digital Art Definition and Why is it used?->Digital Art Definition and Why is it used?]]
(align:"=><=====")+(box:"=X")[[Back to Home Page->Digital Art Curriculum]]
(enchant:?link,
(background:#7EBDB2) +
(color:white) +
(border:'solid') +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
(link: "save")[(save-game: "file A")]
</tw-passagedata><tw-passagedata pid="3" name="Twine" tags="" position="200,365" size="100,100">Now with your personal journey of digital art you will be learning interactive art through...
#Twine
Without needing the requirement of drawing, one's creativity is capable of shining through the software that is Twine.
[[Here are some examples->Examples]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="4" name="Examples" tags="" position="54,387" size="100,100">[[https://crowscrowscrows.itch.io/the-temple-of-no]]
See how in every example, players and readers can make their own choices.
Look through these examples to see how they utilized Twine.
Link to Twine Games.
[[Time for a small activity!->Paper Fortune Teller Activity]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="5" name="Twine Basics + Basic Coding" tags="Learning" position="629,43" size="100,100">For what we will first be learning we will be covering the three Twine Basics that you need to utilize Twine.
* Creating Links
* Adding Images
* Publishing
Something Important to keep to mind.
Depending on what you need you will need basic coding.
This basic coding may also be used in HTML, another website coder.
The look of the website will be determined by CSS which could be used for any website creation.
[[ If you would like to skip ahead to previous links...->Getting Your Twine Creation Started]]
[[Onto what we will be first learning...->Links: Most basic and most used button.]]</tw-passagedata><tw-passagedata pid="6" name="Exercise (Notecards)" tags="" position="92,635" size="100,100"># NoteCard Activity
Before getting to the actual production of the process you will be thinking up a couple of different stories
I want you to make an adventure decision story of vacations you have been on, except there is a twist... You will be adding a little bit of (text-style:"smear","sway")[imagination] to it.
* The events may follow events you had been through.
You will be making a couple of notecards for this activity.
For every note card you make you will have to write organize them by number from when you started.
Think up three different vacation spots and have choices for all of them.
On the back of the notecard you will put what notecard to go to next
[[Have you finished your note cards?-> Follow Up of Notecard Exercise]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="7" name="Making Decisions" tags="" position="344,502" size="100,100">Why does this matter?
Imagine you were creating a game with multiple endings.
Players face decisions of where they have to go all the tim; for each path they take there is a result in their choices.
Interactive art is like this, how an audience places input on a piece of artwork there will be consequences in actions.
(text-style:"superscript")[In a sense this is also like real life.]
[[Let's visualize this.->Exercise (Notecards)]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="8" name="What is Twine and Why Twine?" tags="" position="436,692" size="100,100">What is Twine?
Twine is an open source tool that allows storytelling and basic coding on either the browser or on a software.
Why Twine?
This software made back in 2009 proves to continue to be important today as it allows creativity for all audiences.
[[Now what exactly can you do on this program?->What Twine Can Do?]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="9" name="Digital Art Definition and Why is it used?" tags="Learning" position="107,241" size="100,100">Some may describe digital art as simply art that is made through a digital medium, but that description by itself does not describe digital art as a whole. Sure it invovles art but it is not defined by that artist or the medium that is used.
''Digital art''
* comes in a broad spectrum of mediums but its core comes from the messages of what the medium utilizes servers to deliver to the audience. It could be used to express messages of self-expression, political expression, etc.
It's modern use and feel allows artists to further relate to a modern people.
Realistically Digital Art can be used for anything. It is simply an expression of creativity displayed through modern mediums.
Does this match your definition?
(if:$Definition is 0)[* You forgot to answer, [[go back to the previous page->What exactly is digital art? (exercise)]].]
(else:)[* You answered "(print: $Definition)"]
(checkbox: 2bind $CheckMark1,"Mark when you finished reading.")
[[Here are some examples of careers.->Digital Art Career Paths]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="10" name="Links: Most basic and most used button." tags="Twine" position="751,22" size="100,100"># Links
---
What connects each decision and each web page, a link is the most basic and most used functions within Twine.
You will be using links to move between webpages.
This is the most used and most important part of Twine
You will be organizing and thinking about the decisions you make frequently.
How are these made?
If you double-click to select your box or press the pencil to edit the box that first shows up you are shown multiple items on top of a text editor.
If you click on link you will access how to create multiple web pages.
* You can either allow your readers to press a piece of text to go to the next page or the reader can go to the next page by clicking the entire page
If you type a passage name that does not exist a new passage will be made as soon as the link is added.
You can also add links with pre-existing passages.
* If you press the green button titled +Passage at the right corner of your screen you can make a new website.
* If you type the name of that new made passage on the "Go to this passage:" of the links you can access that passage through your link.
A shortcut to making this link is by typing
<img src = "images/linkexample1.png" />
[[Now let's try it.->Link Exercise (5 questions)]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="11" name="Publishing" tags="Twine" position="828,268" size="100,100"># Publishing
---
Now that you have a functional website,
you can already publish your website onto a domain to share your work.
''Some hosting domains include:''
* github
* itch.io
* Newgrounds
(these will all support HTML files)
- if you want to find other types of domains to host your creation find one that allows (text-style:"buoy")[HTML support]
For this example we will be using Github to publish.
''Why Github?''
Unlike the other websites posted, you will have access to features used for those developing their website.
It does not matter whether you have a finished project.
You can easily go back to your old files!
In order to do so you will be creating an account on github first of all.
* Keep this professional, your website domain may be your github username for easy access.
Download the actual github desktop.
[[Your Turn!->Show us what you have made! (Activity)]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="12" name="Examples of Digital Art" tags="" position="403,239" size="100,100">#Examples of Digital Art
If you would like more information I have linked the artists below the artwork.
---
<img src = images/"digitalartmuseum.jpeg" />
<img src = images/"yayoi-kusama-art-4-gary-zalatan.jpg" />
Websites to Browse:
(link: "Borderless TeamLab Museum")[(open-url: "https://borderless.teamlab.art/")](text-style:"superscript")
[Copy if button above doesn't work https://borderless.teamlab.art/]
* Note: You should check out the Artist's Thoughts for insight of the museums.
(link: "DAM Museum")[(open-url: "https://dam.org/museum//")]
(text-style:"superscript")[Copy if button above doesn't work https://dam.org/museum/]
* Note: You should check out Essays, documenters cover interesting art topics.
(link: "Eden Gallery")[(open-url: "https://www.eden-gallery.com/
")]
(text-style:"superscript")[Copy if button above doesn't work https://www.eden-gallery.com/]
* Note: You should check out Collections, they list a wide range of specific types of mediums.
''Response Question: Check out the following links and research images and describe which pieces or mediums spoke the most to you.''
* Challenge: Discuss a particular piece of artwork.
(input-box:2bind $DigitalArtInterests,"X","Type Here and explain What interested you?")
[[Which types of Digital Art are you interested in?->Which Types of Digital Art are you Interested in?]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="13" name="Extra Learning" tags="" position="1594,746" size="100,100">Now that you have learned the basics of Twine. You can further learn how to make your website user friendly utilizing the following tutorials.
These tutorials will be completely optional if you want to learn further.
Time to make your story pop!
[[Macros->Advanced Macros]]
[[Color Changing->Color Changing]]
[[Designing Your Website->Advanced CSS]]
[[Story Formats->Story Formats]]
[[Embedding Files->Adding Embedded Items]]
[[Continue Onwards!->Things You Can Add onto Your Twine Creation]]</tw-passagedata><tw-passagedata pid="14" name="Extra Resources" tags="" position="2256,635" size="100,100">For extra research on specific items here are some example of tutorials.</tw-passagedata><tw-passagedata pid="15" name="Advanced Macros" tags="" position="1843,633" size="100,100">Otherwise considered as shortcuts, macros are </tw-passagedata><tw-passagedata pid="16" name="What Twine Can Do?" tags="" position="105,812" size="100,100">
[[How is this interactive?->How is this interactive?]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="17" name="Digital Art Career Paths" tags="" position="258,240" size="100,100">Some examples of digital art career paths include --
* Digital Painter
* Web Designer
* Graphic Designer
* UI/UX Designer (Designing how people interact with website or games)
In this curriculum students will be capable of learning about the production that a designer might do but on a much simpler way.
[[Here are what some digital artists have made.->Examples of Digital Art]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="18" name="Color Changing" tags="" position="1628,538" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="19" name="Advanced CSS" tags="" position="1731,553" size="100,100">Do you need a more comprehensive guide to changing your website style?
Look no further than CSS
or rather...
Cascading Style Sheets</tw-passagedata><tw-passagedata pid="20" name="Inputs" tags="" position="806,687" size="100,100"># Inputs
---
[[Practice!->Input Exercise#1]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="21" name="Variables" tags="" position="801,462" size="100,100"># Variables
---
What exactly are variables?
Variables are items that takes place of quantities and can be used for specific actions.
* In a code you are able to manipulate a variable and affect its data.
[[Basic Exercise->Variable Exercise #1]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="22" name="Things You Can Add onto Your Twine Creation" tags="" position="1528,945" size="100,100">[[For images...->Image Editing]]
[[For Videos...->Video Editing]]
[[Let's Continue->Advice]]</tw-passagedata><tw-passagedata pid="23" name="Image Editing" tags="" position="1493,1074" size="100,100">Images do not have to look as simple as you think in your website. You are also capable of exploring software options for image editing.
[[Go Back->Things You Can Add onto Your Twine Creation]]</tw-passagedata><tw-passagedata pid="24" name="Video Editing" tags="" position="1674,1002" size="100,100">While not required you can involve videos into your creation.
[[Go Back->Things You Can Add onto Your Twine Creation]]</tw-passagedata><tw-passagedata pid="25" name="Interactive Art Introduction" tags="Learning" position="335,365" size="100,100">#What Type of Art are We Looking At?
With our journey in digital art we will be venturing in the most basic form of ''Interactive Art''.
---
Interactive Art is an art form that takes into consideration how the audience will interact with a piece.
* This can come in the shape of a website, game, or simply an interactive piece, etc.
Do not worry if you lack interest in interactive art, this will serve as an introduction to the world of graphic design, game design, coding, etc.
We may even cover subtopics.
[[What software will we be using?->Twine]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="26" name="Opportunities of Digital Art" tags="" position="2087,495" size="100,100">As you can see there are several opportunities that digital art allows for
[[Here are some free resources to learn other types of digital art->Free Digital Art Sources]]</tw-passagedata><tw-passagedata pid="27" name="Challenges and Alternatives to Twine" tags="" position="2094,377" size="100,100">...Surely through your exploration of Twine you have encountered difficulty in some way
(text-style:"italic","underline")[Challenges and Alternatives to Twine]
Overtime as you begin to use Twine more often you may realize that a big challenge to Twine is that it does not allow the creation that all may hope for.
(text-style:"superscript")[Codes will not always work as they are intended to. ]
In order to make a proper book, one has to make multiple links which gives more work to storytellers.
Game developers may find difficulty in the coding tools that Twine has to offer.
Organization takes up a large part in Twine which makes production last longer.
* In short there is not much ''variety'' offered in Twine.
=|=
Alternatives to Twine
* For Game Designers
* For Web Designers
=|=
Softwares
* Game Maker
|==|
[[Opportunities of Digital Art->Opportunities of Digital Art]]</tw-passagedata><tw-passagedata pid="28" name="Basic Knowledge Correlations" tags="" position="566,562" size="100,100">#Do not panic
Twine is INCREDIBLY similar to other documentation sites
- Google Docs
- Word
If you have used any engine to write a paper you would definitely recognize the styles listed at the top of the UI when editing.
Bold, Italicize, Header, Bullet Points, Numbering, Paragraph Alignment
A simple click on these buttons will get the job done for a simple story and for basic use.
We will get into extra commands on how to access these as well in later links but for now you can just click on them.
* The same keyboard shortcuts as google docs and word will not work the same on Twine
* Twine is moreso similar to HTML except with more accessibility
Something a little more advanced but not complicated is Styles which changes how the words look. An example of how they will turn out is in the same text.
Do not worry if Twine may look complicated, a lot of it's interface is already descripted for the most part.
[[Now, what exactly are we looking at?!->The Interface of Twine]]</tw-passagedata><tw-passagedata pid="29" name="Interactive Story Example" tags="" position="373,966" size="100,100">Here are examples of interactive stories outside of Twinery resources.
* Keep in mind, there might be audio...
(link: "Les Debuts De L Aventure")[(open-url: "https://noel.heschung.com/en/chapitre/les-debuts-de-l-aventure/")]
* A story showcasing
(link: "Tarot Bot")[(open-url: "https://tarotobot.illo.tv/")]
* A website that determines tech and design trends for the future using tarot cards.
Notice the similarities between this and Twine
[[At the end of this curriculum you will...->Introduction of Final Prompt]]</tw-passagedata><tw-passagedata pid="30" name="The actual code and formatting" tags="" position="619,196" size="100,100">See how when you first open the software you get a blank screen and a singular box.
That singular box will carry the rest of your project together.
What you will be creating in Twine is a virtual flowchart.
You are going to be organizing your links based on..
[[Twine Basics->Twine Basics + Basic Coding]]</tw-passagedata><tw-passagedata pid="31" name="The Looping Process" tags="" position="792,989" size="100,100">The actual decision making...
You've got your information down now for how is this going to look all together.
[[Time for an exercise->Looping Exercise #1]]</tw-passagedata><tw-passagedata pid="32" name="How is this interactive?" tags="" position="259,847" size="100,100">Not exactly a game sort of deal..
Audiences can explore their multiple choices and interact with the art given to them.
See for example no matter what you type in this input, my code will force the word "Example"
into...
(force-input-box:"=XX=","Example")
[[Here is your final project.->Introduction of Final Prompt]]</tw-passagedata><tw-passagedata pid="33" name="Show us what you have made! (Activity)" tags="" position="1043,267" size="100,100">#What have you made?
Post your creations using Github.
[[If you need help->Publishing]]
''Provide the website down below.''
(input-box:2bind $Creation,"X","Insert URL")
[[Continue->Short Show and Tell Activity]]</tw-passagedata><tw-passagedata pid="34" name=" Follow Up of Notecard Exercise" tags="" position="292,668" size="100,100">Notice how for every notecard you have made a link.
Now I want you to take those notecards and holepunch the card to tie a piece of yarn between every notecard decision.
This is a representation of choices within a webpage
[[Why Twine?->What is Twine and Why Twine?]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="35" name="Introduction of Final Prompt" tags="Learning" position="491,848" size="100,100"># Project for the End of the Curriculum
For the end of the curriculum you will be introducing yourself and giving multiple links of what type of digital art careers you might want to explore.
With a digital art career you must list your schedule and your activities throughout the day.
You must pick two digital art careers you might be intrested in.
You must show your schedule for both of the careers.
You will be required to do research.
Keep this in mind while you learn.
[[Now for actual learning.->Getting Started]]
If you want to start the final prompt [[Final Prompt->Final Product]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="36" name="Link Exercise (5 questions)" tags="" position="908,16" size="100,100">Now create your first link.
Write a question and answer link.
Create a question about yourself (similar to 20 questions)
Create a hyperlink called "Answer"
Provide the answer in the other link.
You will be creating ''5 questions''
[[Another Type of Link!->Hyperlinking]]</tw-passagedata><tw-passagedata pid="37" name="The Interface of Twine" tags="" position="602,388" size="100,100">Now getting into Twine
Most important step,
to access Twine!
You will be googling Twinery or you can use this link.
twinery.org
You can either click on download if you are running on Windows, macOS, or Linux or you can just use on the browser.
It runs best through download but do not let this discourage you as the website proves powerful by itself.
Some extra resources are also on this website such as the Cookbook, Discussions, and the Discord.
Now let's get into the software. [[How does this code actually look like?->The actual code and formatting]]</tw-passagedata><tw-passagedata pid="38" name="Input Exercise#1" tags="" position="964,686" size="100,100">[[Ready to Learn More!->Very Basic Color Changing]]</tw-passagedata><tw-passagedata pid="39" name="Variable Exercise #1" tags="" position="973,450" size="100,100">Create a variable called Player and Damage
[[We will continue using these variables in the next lesson->If... Statements]]</tw-passagedata><tw-passagedata pid="40" name="Paper Fortune Teller Activity" tags="" position="175,507" size="100,100">Remember this by any chance?
This will serve as an introduction to this activity.
You will be creating a paper fortune teller.
Remember those little origami toys that you would make to answer questions or tell more about your personality?
Watch this video to recreate the project.
Copy this link if the video does not work.
(text-style:"underline")[https://www.youtube.com/watch?v=SAhiIlTxUYA
]
<iframe width="1280" height="720" src="https://www.youtube.com/embed/SAhiIlTxUYA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
[[Understanding what you just made->Making Decisions]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="41" name="Teacher Notes" tags="" position="445,0" size="100,100">#Teacher Notes
Before introducing this to your students provide a brief summary that your students will be learning basic interaction skills on a website and will explore the medium of digital art through a singular aspect.
Make sure that students are put into groups so that they could all look through the websites and doing the activities together.
Make sure that the students get through each of the links as a class but are doing the exercises together.
* Introduce the website as if it were a slideshow but make sure that students are also on the site as well.
Towards the end of the curriculum it will show students progress and what they have inputted. Explain to students that they will need to go through the inputs and properly answer.
[[back to learning!->Digital Art Curriculum]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(color:white) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="42" name="Citations" tags="" position="2100,1007" size="100,100">''Citations''
</tw-passagedata><tw-passagedata pid="43" name="Getting Started" tags="" position="568,696" size="100,100">''What knowledge do you need?''
Not much, everything you need to know about the basics of twine will be involved here.
Basic computer literacy like typing on keyboard or going through a website would be appreciated.
Do not worry too much about the fact that Twine does entail some coding, [[you already have some basic knowledge!->Basic Knowledge Correlations]]</tw-passagedata><tw-passagedata pid="44" name="Story Formats" tags="" position="1838,749" size="100,100"></tw-passagedata><tw-passagedata pid="45" name="Looping Exercise #1" tags="" position="937,989" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="46" name="Getting Your Twine Creation Started" tags="" position="1389,406" size="100,100">...[[back to the beginning->Twine Basics + Basic Coding]]
#Getting Started with Twine (typically used in Twine)
---
''Basics''
1. [[Links->Links: Most basic and most used button.]]
2. [[Images->Images]]
3. [[Publishing->Publishing]].
4. [[Variables->Variables]]
5. [[If Statements->If... Statements]]
6. [[Inputs->Inputs]]
7. [[Basic Color Changing->Very Basic Color Changing]]
---
''Under Construction''
8. [[Hooks->Hooks]]
9. [[Macros->Macros]]
10. [[Creating a Loop->The Looping Process]]</tw-passagedata><tw-passagedata pid="47" name="Hooks" tags="" position="807,1097" size="100,100">Hooks can be used anywhere within your code. It is not constrained to one box.
[[Now for practice->Hook Exercise #1]]</tw-passagedata><tw-passagedata pid="48" name="If... Statements" tags="" position="802,574" size="100,100"># If Statements
---
As we learned from earlier this will tie hand in hand with variables.
Imagine this..
You are on an adventure to
[[Let's Practice!->If Statements Exercise #1]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="49" name="Basic Design" tags="" position="1422,700" size="100,100">While this is a Twine tutorial, this is not everything that Twine has to offer.
[[Let's Check out More.->Extra Learning]]
</tw-passagedata><tw-passagedata pid="50" name="Table of Contents" tags="" position="26,66" size="100,100">=><=
(enchant: "Table of Contents",
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1)
)
Table of Contents
---
1. [[Digital Art Curriculum Beginning->Digital Art Curriculum]]
2. [[Digital Art Definition->Digital Art Definition and Why is it used?]]
3. [[Interactive Art->Interactive Art Introduction]]
4. [[Twine Basics->Twine Basics + Basic Coding]]
5. [[Getting Your Twine Creation Started->Getting Your Twine Creation Started]]
6. [[Extra Learning->Extra Learning]]
7. [[Things You Can Add onto Your Twine Creation->Things You Can Add onto Your Twine Creation]]
8. [[Advice->Advice]]
[[Final Product->Final Product]]
[[Citations->Citations]]</tw-passagedata><tw-passagedata pid="51" name="Hook Exercise #1" tags="" position="929,1093" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="52" name="Macros" tags="" position="806,1212" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="53" name="COLOR CHANGES" tags="" position="1123,1062" size="100,100"></tw-passagedata><tw-passagedata pid="54" name="Adding Embedded Items" tags="" position="1766,869" size="100,100"># Embedding Items</tw-passagedata><tw-passagedata pid="55" name="Images" tags="Twine" position="814,137" size="100,100">#Images
---
Now to add images to your Twine project.
This is what will kick off your creation.
You will require some code for this
but do not worry it only takes some wording.
''Here is a short cut to add images:''
<img src="images/imagescode.png" />
You will be required to find an image on your browser for this.
* When finding an image on your browser you will need to right-click the google image to open the image in a new tab.
<img src="images/openimageinnewtab.png" />
However, if you want to make sure that files do not get messed up you can organize your files.
[[How to organize files to add personal images/files.->Organizing Files + Images]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="56" name="Image Exercise (Notecards Continued)" tags="" position="1090,148" size="100,100">Remember those notecards that you made earlier?
Draw on every single one of those notecards and recreate those notecards as links.
You will then scan your notecards with pictures on them and input them into the links.
You will need to download your files.
I recommend using either Adobe Scanner or Scanner.
I personally use Scanner as you can easily put it into your google drive and then download it onto the computer.
[[Are you ready to post your creation?->Publishing]]</tw-passagedata><tw-passagedata pid="57" name="Advice" tags="" position="1923,281" size="100,100">Now time for the final product
[[Final Project->Final Product]]</tw-passagedata><tw-passagedata pid="58" name="Certificate" tags="" position="2095,737" size="100,100">Congratulations
(if:$Name is 0)[Did you forget to type your name?]
(else:)(print: $Name)
You have finished the Twine Digital Art Curriculum
Here is your certificate---
[[Credits->Credits]]</tw-passagedata><tw-passagedata pid="59" name="What have you learned as a result?" tags="" position="2100,616" size="100,100">What did you learn in this curriculum?
(input-box:"=XX=")
[[Extra Resources->Extra Resources]]
[[Certificate->Certificate]]</tw-passagedata><tw-passagedata pid="60" name="Final Product" tags="" position="1961,61" size="100,100">Now you will be creating your final product...
In case you want to review the curriculum.
[[Table of Contents->Table of Contents]]
[[Have you finished?->Final Reflection]]</tw-passagedata><tw-passagedata pid="61" name="Introduction + Learning Objectives" tags="" position="393,109" size="100,100">In this curriculum we will be learning about digital art and its possibilities. We will encounter a type of digital art and an example of it through a specific software.
Students will be creating a final project and through finishing students will be obtaining a certificate in Digital Art.
''Learning Objectives:''
* Students will be learning Storytelling through HTML
* Students will assess learning through creativity in Twine
* Students will be able to create a message through a piece of digital art
* Students will be discovering, exploring, producing, and presenting a piece
(align:"<==")+(box:"=========XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=====================")[(text-color:#64A79B)[Discover:] Students will be reading and understanding stories and websites.
(text-color:#64A79B)[Explore:] Students will be researching digital art and stories.
(text-color:#64A79B)[Produce:] Students will be developing and prototyping short stories as well as a final prompt.
(text-color:#64A79B)[Present:] Students will be explaining their creation process and demonstrating their workflow.]
This will be graded on if students have interacted with all of the inputs.
''Requirements:''
* Basic computer literacy of interacting through websites
* Basic Knowledge of how to download programs
''Type your name below to acknowledge this --
''(input-box:2bind $Name,"=XX=","(First Name, Last Name)")
[[Now let's test your knowledge->What exactly is digital art? (exercise)]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="62" name="Pop Quiz!!" tags="" position="1117,804" size="100,100">#Pop Quiz!!!
---
Try your best not to go back.
(checkbox: 2bind $Correct,"Answer")</tw-passagedata><tw-passagedata pid="63" name="Hyperlinking" tags="" position="1044,13" size="100,100">#Hyperlinking
---
Say you want to go to a passage but you want to go back to where you were before, hyperlinks are your answer.
You can easily send a link back and make the arrow point two directions.
[[Let's Practice->Hyperlinking Exercise (5 MC Questions)]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="64" name="Input + Linking Exercise" tags="" position="1088,686" size="100,100">Now that you have learned about doing inputs.
Do you remember the 5 questions that we had done before?
You will be </tw-passagedata><tw-passagedata pid="65" name="Hyperlinking Exercise (5 MC Questions)" tags="" position="1182,17" size="100,100">We will be doing something similar as to what we had done before.
[[Have you finished?->Linking Reflection]]</tw-passagedata><tw-passagedata pid="66" name="Linking Reflection" tags="" position="1341,140" size="100,100">Time to reflect.
Explain your steps for the past two exercises.
(input-box:"=XX=")
[[Ready to Learn More?->Images]]</tw-passagedata><tw-passagedata pid="67" name="Test" tags="" position="2423,591" size="100,100">(dialog: "Hello ", "Test 2")
</tw-passagedata><tw-passagedata pid="68" name="VARIABLES WITHIN TWINE" tags="" position="1120,942" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="69" name="Which Types of Digital Art are you Interested in?" tags="" position="474,360" size="100,100">The full list of types of digital art is provided by:
(link: "https://www.heavym.net/types-of-digital-art-and-how-you-can-easily-master-one/
")[(open-url: "https://www.heavym.net/types-of-digital-art-and-how-you-can-easily-master-one/
")]
https://www.heavym.net/types-of-digital-art-and-how-you-can-easily-master-one/
https://okuha.com/digital-art-styles-and-types/
(link: "https://okuha.com/digital-art-styles-and-types/")[(open-url: "https://okuha.com/digital-art-styles-and-types/")]
''What types of Digital Art might you be interested in?''
* Could just be based off of name.
* You may not even need to know what they are.
* Select at least 6.
Checkmark below.
(checkbox: 2bind $2DDigitalPainting,"2D Digital Painting")
(checkbox: 2bind $3DDigitalPainting3DSculpting,"3D Digital Painting And 3D Sculpting")
(checkbox: 2bind $PixelArt,"Pixel Art")
(checkbox: 2bind $FractalArt,"Fractal Art")
(checkbox: 2bind $AlgorithmicArt,"Algorithmic Art")
(checkbox: 2bind $DigitalPhotography,"Digital Photography")
(checkbox: 2bind $VRPainting,"VR Painting")
(checkbox: 2bind $2DComputerGraphics,"2D Computer Graphics")
(checkbox: 2bind $3DComputerGraphics,"3D Computer Graphics")
(checkbox: 2bind $PhotoBashing,"Photo Bashing")
(checkbox: 2bind $DataMoshing,"Data-Moshing")
(checkbox: 2bind $DynamicPainting,"Dynamic Painting")
(checkbox: 2bind $DigitalCollage,"Digital Collage")
(checkbox: 2bind $RasterPainting,"Raster Painting")
(checkbox: 2bind $VectorArt,"Vector Art")
(checkbox: 2bind $IntegratedArt,"Integrated Art")
(checkbox: 2bind $MixedMedia,"Mixed Media")
(checkbox: 2bind $ComputerGeneratedDigitalPainting,"Computer-Generated Digital Painting")
(checkbox: 2bind $ProjectionMapping,"Projection Mapping")
(checkbox: 2bind $Interactive,"Interactive Art")
(checkbox: 2bind $WebDesign,"Web Design")
[[Now for what we will be learning->Interactive Art Introduction]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="70" name="Very Basic Color Changing" tags="" position="810,814" size="100,100"># Color Changing
---
Notice how in your basic links when you press play all you get is a dark background with white text and blue for the links,
you are capable of chaging this!
[[Let's Practice->Color Changing Exercise #1]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="71" name="CONDITIONALS" tags="" position="1119,1177" size="100,100"></tw-passagedata><tw-passagedata pid="72" name="Small Image Activity" tags="" position="1209,152" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="73" name="If Statements Exercise #1" tags="" position="989,567" size="100,100">Create an interactive maze where audiences have to escape.
If they reach a certain passage they will be congratulated.
* Maybe you can reward them with an item
[[Ready to Learn More!->Inputs]]</tw-passagedata><tw-passagedata pid="74" name="If Statements Interactive Activity" tags="" position="1140,558" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="75" name="Color Changing Exercise #1" tags="" position="960,823" size="100,100">[[Skip Under-Construction Items->Conclusion of Getting Started]]</tw-passagedata><tw-passagedata pid="76" name="Conclusion of Getting Started" tags="" position="1272,720" size="100,100">Still stuck on how to get your Twine Creation Started?[[Go Back to Tutorials->Getting Your Twine Creation Started]]
If you have finished learning - [[Continue->Basic Design]]</tw-passagedata><tw-passagedata pid="77" name="Final Project" tags="" position="1311,862" size="100,100">Double-click this passage to edit it.</tw-passagedata><tw-passagedata pid="78" name="Start to Basic Twine Coding" tags="" position="707,350" size="100,100"># Time for Basic Coding
---
Now that we have been able to learn how to officially make Twine works. Let us move onto very basic coding.
Let's see what Twine can do...
[[Ready to Learn?->Variables]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="79" name="Short Show and Tell Activity" tags="" position="1231,268" size="100,100">Let's not forget the most important part.
With sharing your stories comes development and fixes.
Share with a peer your website and discuss what to improve on and what was challenging.
Remember:
* Keep this professional only helpful criticism allowed
* Compliment your peer and give proper advice on how to strengthen there story.
Here is an article on constructive criticism.
https://www.nownovel.com/blog/constructive-writing-feedback/
Type what type of criticism you had discussed on your projects.
(if:$Creation is 0)[* Wait how will your friends see your website? Are you sure you shared your website? [[Check if you shared the URL->Show us what you have made! (Activity)]] ]