-
Notifications
You must be signed in to change notification settings - Fork 0
/
Digital Art Curriculum Update 5.html
1629 lines (1229 loc) · 448 KB
/
Digital Art Curriculum Update 5.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 5</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 5.</tw-noscript></noscript></tw-story>
<tw-storydata name="Digital Art Curriculum Update 5" startnode="1" creator="Twine" creator-version="2.3.16" ifid="227A4110-0116-4CAB-835C-B3BE1BD7A146" 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
}
tw-story[tags~="Twine"] {
background-image: ("images/twineimage.png");
background-size:cover;
}</style><script role="script" id="twine-user-script" type="text/twine-javascript"></script><tw-passagedata pid="1" name="Digital Art Curriculum" tags="Learning" position="159,0" size="100,100">#(text-color:#64A79B)+(text-style: "underline")[Digital Art Curriculum]
Why is digital art important?
<img src="images/whatisdigitalart.png" />
A curriculum made by Charlize Serrano a (text-style:"shudder")[High School Senior]
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/1280/azure/dazed-prod/1280/8/1288188.jpg" />
[[First Page (students go here)->Introduction + Learning Objectives]]
(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")
)
(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="262,112" 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="Twine" 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))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="4" name="Examples" tags="" position="54,387" size="100,100">(link: "Borderless TeamLab Museum")[(open-url: "https://crowscrowscrows.itch.io/the-temple-of-no")]
(text-style:"superscript")
[Copy if button above doesn't work 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.]]
(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="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
(you may also do this activity with sticky notes -- grab sticky notes and put them on a piece of paper; draw lines of which sticky notes to go to)
[[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))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="7" name="Making Decisions" tags="" position="346,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 time; 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))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="8" name="What is Twine and Why Twine?" tags="" position="440,691" 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.
* Basics such as HTML coding and CSS coding are introduced in a basic and non-threatening way to early learners.
[[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))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="9" name="Digital Art Definition and Why is it used?" tags="Learning" position="107,241" size="100,100">#What is Digital Art?
---
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="883,263" 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!
* However, itch.io and Newgrounds provide great advertisement for your games!
---
''How to Publish on Github''
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.
Create a reposititory --something along the lines of firstnamelastname.github
Import the folder that you are working with.
Pushing Origin
[[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 (text-style:"underline")[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 (text-style:"underline")[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 (text-style:"underline")[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))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="13" name="Extra Learning" tags="" position="1586,608" 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]]
(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="14" name="Extra Resources" tags="" position="2258,635" size="100,100">For extra research on specific items here are some example of tutorials.
[[Go Back->What have you learned as a result?]]
(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="15" name="Advanced Macros" tags="" position="1810,429" size="100,100">Otherwise considered as shortcuts, macros are </tw-passagedata><tw-passagedata pid="16" name="What Twine Can Do?" tags="" position="104,812" size="100,100">#What Twine Can Do?
---
Twine allows for a truly interactive story.
Not only are people capable of creating a story, they are capable of coding movement in their ideas without necessarily the knowledge of coding.
[[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="257,234" 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="Maybe-not-add" position="1574,395" size="100,100"># Color Changing
Want to learn how to further change the colors</tw-passagedata><tw-passagedata pid="19" name="Advanced CSS" tags="" position="1705,353" 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
What might be stored within a variable
---
Inputs are important as creators can keep track of what player's have inputted.
What a player has inputted can be referenced again so long as that input is binded to a variable.
[[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="799,440" 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.
Variables store values within themselves. You will be naming these variables in order to store information.
These values may be called are changed with programs of code.
We will cover these codes later.
* Keep in mind: Data that you want to change will always be binded to a variable
* Aim to keep your variable names short to lessen confusion and easily revise actions
Within Twine, variables can also be deemed as temporary (only held within one link).
* This is useful as you may use variables with similar names or you may find it less clunky to have less variables used all throughout the passage.
Temporary variables are read with a ''_'' while non-temporary variables are read as ''$''.
Variables may also come in different types. Your main ones to focus on include:
* Text String: a piece of text that could be stored, changed, or inputted
* Number: a number value that could be stored, changed, or inputted (this could be inputted by drop down inputs as well--covered later)
* Boolean value: a 0 and 1 value that is a representation of 'false' and 'true'
* Colour:
More Advanced Items:
* Array: a storage of numbers that can be changed
* Datamap: a storage of text
Read if you want more information: Upon using Twine more often, variables will range based on the story format--you do not need to worry about this as you are only using Harlowe for this exercise)
(link: "Check out this link for more information")[(open-url: "https://damonwakes.wordpress.com/2018/01/24/twine-for-beginners-using-variables/
")]
(text-style:"superscript")
[Copy if button above doesn't work https://damonwakes.wordpress.com/2018/01/24/twine-for-beginners-using-variables/
]
[[Let's get first-hand experience->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="1598,798" size="100,100">[[For images...->Image Editing]]
[[For Videos...->Video Editing]]
[[Let's Continue->Advice]]
(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="23" name="Image Editing" tags="" position="1600,933" 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="1742,856" 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))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="26" name="Opportunities of Digital Art" tags="" position="2093,464" 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]]
(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="27" name="Challenges and Alternatives to Twine" tags="" position="2094,336" 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]]
(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="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]]
(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="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 the dates of important events within a man's life.
(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, while you probably will not have enough to put that much detail in the visual area (you could try to if you want), it's interaction is very similar to Twine.
How you are selecting buttons and interacting with the site to move is a basic of Twine.
[[Are you ready to see what you will be making?->Introduction of Final Prompt]]
(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="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 free to organize your flowchart in any way you see fit.
To guide you, you are advised to ensure that your flowchart is organized based on how students will engage with your creation.
[[Twine Basics->Twine Basics + Basic Coding]]
(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="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="234,850" size="100,100">How is this Interactive
---
Not exactly a game sort of deal..
Audiences can explore their multiple choices and interact with the art given to them.
See if you use this drop down, until you find the correct number, "Correct" Appears
(dropdown: 2bind $numbers,"1","2","3","4","5","6")
(set: _correct to "Correct")
(if:$numbers is 4)(print: _correct)
See for example no matter what you type in this input, my code will force a certain sentence. Try typing.
into...
(force-input-box:"=XX=","I'm making you type this. Are you scared yet? You're still typing? Really? Press the next button please.")
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)[[Let's check out further examples, outside of Twine.->Interactive Story Example]]</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]]
(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="34" name=" Follow Up of Notecard Exercise" tags="" position="272,674" size="100,100">''What exactly are we doing?''
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
* You have officially made a draft of a second-person point of view story.
[[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="493,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.
You will also be adding your own personal touch.
* For example: What are challenges you might find in your digital art career?
You are not required to start this project now rather you are to 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]]
(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="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]]
(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="38" name="Input Exercise#1" tags="" position="962,691" size="100,100">Basic Input Exercise
For this exercise you will storing a player's input within a variable. That input will be changed
[[Ready to Learn More!->Very Basic Changing the Look]]
(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="39" name="Variable Exercise #1" tags="" position="974,450" size="100,100">Create a variable called Player and Health.
Give Player a Name and give Health a certain value
* The "Player Name" will be a text string
* The "Health" will be a Number Value
[[We will continue using these variables in the next lesson->If... Statements]]
(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="40" name="Paper Fortune Teller Activity" tags="" position="175,509" size="100,100">#Paper Fortune Teller
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,1006" size="100,100">''Citations''
</tw-passagedata><tw-passagedata pid="43" name="Getting Started" tags="" position="568,697" 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]]
(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="44" name="Story Formats" tags="" position="1840,540" 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="1399,372" 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 Changing the Look]]
---
''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="805,573" size="100,100"># If Statements
Changing values
---
As we learned from earlier this will tie hand in hand with variables.
Imagine this..
You are at the mall purchasing items.