-
Notifications
You must be signed in to change notification settings - Fork 0
/
bard.html
163 lines (161 loc) · 12 KB
/
bard.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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Shape of Color – Bard GWC/TLS</title>
<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=BioRhyme&family=Raleway:ital,wght@0,500;0,700;1,500&display=swap" rel="stylesheet">
<style>
html, body {
background-color: #fbf8e7;
font-size: 15px;
font-family: "Raleway";
line-height: 160%;
}
#content {
max-width: 500px;
margin: auto;
width: 90%
}
h1 {
text-align: center;
font-size: 60px;
font-family: "Berkshire Swash";
margin: 0.8em 0;
line-height: 150%;
color: transparent;
background: #6f6da9;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: 0px 2px 2px rgb(155 130 189);
}
h2, h3, h4 {
font-family: "BioRhyme";
margin: 1.2em 0;
}
a {
color: #b9468a;
}
a:visited {
color: #9441c7;
}
.amp {
margin: 0 0.4em;
}
.time {
font-size: 20px;
}
.center {
text-align: center;
margin: 5em 0;
}
.gallery-holder > * {
margin: 4em 0;
}
.gallery {
width: 100%;
}
.gallery-half {
width: 47%;
}
</style>
</head>
<body>
<div id="content">
<h1>The Shape of Color</h1>
<h2 style="color: coral;">About</h2>
<p>Hello! As part of the <a href="https://cce.bard.edu/community/tls/">Bard TLS project</a> that I help co-lead, Girls Who Code, I’m putting on a little workshop and sharing some things I know about colors in the context of programming.</p>
<p>Our Girls Who Code project usually goes to Kingston High School once a week to facilitate an after-school club for high-school girls to learn programming/coding. Because of the pandemic, we had to stop going last semester and won’t be going this semester. I’m not sure when it will be safe for us to actively go to Kingston again, but we would love volunteers or student leaders and you're welcome to stay in touch for when the time comes.</p>
<p>When we stopped in the spring, our students were working with the <a href="https://processing.org/">Processing language</a> to create graphics and we were just starting to discuss and explore colors, which led me to think of talking about colors for this presentation. (I also just love talking and thinking about colors and programming.)</p>
<p>If you can’t join these presentations for whatever reason, I will be posting more resources here for you to explore if you’re curious!</p>
<div class="center">
<h2 style="color: #0f580f;">Presentation Times & Links</h2>
<a class="time" href="https://zoom.us/j/98143452114?pwd=ZXlhbFZEcStpNHdYeFI1QitmUVhXdz09">Friday Aug 14, 7pm</a> <span class="amp">&</span> <a class="time" href="https://zoom.us/j/93085902301?pwd=RG44U0RpMVcwVTBZcWtKNjIxY1RYUT09">Monday Aug 17, 7pm</a>.
</div>
<h2 style="color: #59a4b5;">Resources</h2>
<h3>Info & Articles</h3>
<ul>
<li><a href="https://arstechnica.com/science/2009/02/yes-virgina-there-is-a-magenta/">“Yes, Virginia, there <em>is</em> a magenta”</a> – covers some background on how color is perceived and why there isn’t a specific wavelength that is magenta (etc.), alone, but various combinations of wavelengths will produce our perception of those colors.
</li>
<li>Color spaces – modes of organizing colors numerically and spatially.
<ul>
<li><a href="https://programmingdesignsystems.com/color/color-models-and-color-spaces/index.html">Color models and color spaces</a> – an introduction to RGB, CMYK, and color spaces in general. RGB is how computers display colors on a screen, and CMYK is what printers use to put down colors with ink, but they both don’t really capture how we perceive color.
</li>
<li><a href="https://en.wikipedia.org/wiki/Munsell_color_system">Munsell color system</a> – how can we organize colors uniformly? It turns out that a sphere doesn’t cut it!
</li>
<li><a href="https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/">How To Avoid Equidistant HSV Colors</a> – an introduction to the alternatives to RGB and HSV.
</li>
<li><a href="https://midimagic.sgc-hosting.com/huvision.htm">Human Color Vision</a> – a really nice overview of all the different aspects of color (also has a page on <a href="https://midimagic.sgc-hosting.com/pricol.htm">how primary colors are taught</a>).
</li>
<li><a href="https://youtu.be/UBX2QQHlQ_I">Stand-up Maths’ “Spreadsheets”</a> on YouTube – about halfway through you can see a closeup of an LCD. (worth watching for the laughs!)
</li>
</ul>
</li>
<li>Cubehelix/perceptually uniform color scales, an alternative to rainbow “scales” which vary in hue but not intensity. This one has a lot of links because I think it’s very important, plus a couple of paragraphs of explanation hidden under this summary item (click to open):
<details>
<summary>Summary</summary>
<p>The idea of perceptually uniform color scales is to more effectively communicate information such as intensity or heat using a visual scale that changes in hue (like a rainbow) while consistently getting darker or lighter. This allows people who are colorblind to also be able to assess the intensity better than with a rainbow color scale, which only changes in hue and not intensity. (Or worse – a badly designed rainbow color scale will fluctuate in intensity, up and down, as it goes up!)</p>
<p>This is an area where designing things with disabled people in mind actually helps abled people out, since it is not only more uniform for people who are color blind, but also more uniform for people with full color vision too. It turns out that accessible design is often just plain good design!</p>
<p>So please, if you’re designing anything that uses colors to communicate a linear scale, please choose a perceptually uniform color scheme to better communicate your ideas!!!!</p>
</details>
<ul>
<li><a href="https://mycarta.wordpress.com/2012/05/29/the-rainbow-is-dead-long-live-the-rainbow-series-outline/">The Rainbow Is Dead … Long Live the Rainbow!</a> – a great series of blog posts that digs into the issues at play, and the problems with the rainbow sacle. Worth a read, or at least a skim. (Okay, I admit I just skimmed it. But it looks good!)
</li>
<li><a href="http://www.mrao.cam.ac.uk/~dag/CUBEHELIX/">Dave Green’s post on cubehelix</a> – I believe this is the original post (at least on the cubehelix idea).
</li>
<li><a href="https://bl.ocks.org/mbostock/11415064">Cubehelix implementation in D3.js</a> – a couple examples of the scale using D3.js, which is a popular JavaScript library that helps people write complex visuals and animations for the web.
</li>
<li><a href="https://observablehq.com/@vomc/untitled">More D3.js examples</a> – you can edit some of these examples.
</li>
<li><a href="">https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/</a>
</li>
</ul>
</li>
<li><a href="https://en.wikipedia.org/wiki/Color_blindness">Color blindness</a> on Wikipedia.
</li>
<li><a href="https://theoatmeal.com/comics/mantis_shrimp">The weird and wonderful Mantis Shrimp</a>.</li>
</ul>
<h3>Tools</h3>
<ul>
<li><a href="https://monoidmusician.github.io/colorwheel/">My musical colorwheel!</a> – this is my personal project to investigate a way to relate the chromatic color wheel to the chromatic scale, and how I perceive sound and color.
</li>
<li><a href="https://color.adobe.com/">Adobe Color</a> – the go-to website for exploring color palettes (<a href="https://helpx.adobe.com/creative-cloud/adobe-color-accessibility-tools.html">now with accessibility tools!</a>).
</li>
<li><a href="http://mkweb.bcgsc.ca/colorsummarizer/">Color summarizer tool</a> – this tool will show you color clusters in an image, which is especially important in photographs where individual pixels will vary slightly even though we would perceive a region/object as having a single color. This technique is actually used in some apps to create themes based on album artwork, for example. (I think iTunes might do this somewhere? Someone help me out here.) I used it to make themes based on mine and my brother’s profile pictures once.
</li>
<li><a href="https://blog.xkcd.com/2010/05/03/color-survey-results/">xkcd color survey blog post</a> (and <a href="https://xkcd.com/color/rgb/">just the results</a>) – I’d be remiss if I didn’t mention xkcd!
</li>
<li><a href="http://illusionoftheyear.com/">Illusions of the Year</a> – a collection of great visual illusions, some of which involve colors and tricks in our perception of color and movement! Some nice ones:
<ul>
<li><a href="http://illusionoftheyear.com/2015/06/splitting-colors/">Splitting Colors</a></li>
<li><a href="http://illusionoftheyear.com/2016/06/remote-controls/">Remote Controls</a></li>
<li><a href="http://illusionoftheyear.com/2016/06/lights-and-darks-in-vision/">Lights and Darks in Vision</a></li>
<li><a href="http://illusionoftheyear.com/2018/10/white-gray-red/">White + Gray = Red</a></li>
</ul>
</li>
</ul>
<h3>Gallery</h3>
<details>
<summary>Show/hide gallery</summary>
<ul style="list-style: none;" class="gallery-holder">
<li><a href="https://www.britannica.com/technology/prism-optics">Prism refraction: <img class="gallery" src="https://cdn.britannica.com/78/149178-050-8E28AD25/light-prism-color-angle-colors-wavelength-wavelengths.jpg"></img></a>
<li><a href="https://colourware.wordpress.com/2010/02/07/why-is-hue-circular/">Color wheel with extraspectral hues highlighted: <img class="gallery" src="https://colourware.files.wordpress.com/2010/02/newton-circle.jpg"></img></a>
<li><a href="https://www.unm.edu/~toolson/human_cone_response.htm">Human cone wavelength response: <img class="gallery" src="https://www.unm.edu/~toolson/human_cone_action_spectra.gif"></img></a>
<li><a href="https://www.shutterstock.com/video/clip-1861414-extreme-closeup-pixels-lcd-tv">
Closeup of LCD screen: <img class="gallery" src="https://ak.picdn.net/shutterstock/videos/1861414/thumb/1.jpg"></img></a>
</li>
<li><a href="https://en.wikipedia.org/wiki/SRGB">sRGB gamut inside CIE 1931 xy chromaticity diagram: <img class="gallery" src="https://upload.wikimedia.org/wikipedia/commons/6/60/Cie_Chart_with_sRGB_gamut_by_spigget.png"></img></a>
</li>
<li>sRGB gamut and visible gamut visualized in CIELCHab color space from <a href="https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC">Wikipedia</a>: <br/><iframe class="gallery-half" src="https://upload.wikimedia.org/wikipedia/commons/8/80/SRGB_gamut_within_CIELCHab_color_space_mesh.webm"></iframe><iframe class="gallery-half" src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Visible_gamut_within_CIELCHab_color_space_D65_whitepoint_mesh.webm"></iframe>
</li>
<li><a href="https://en.wikipedia.org/wiki/CIELAB_color_space">CIELAB color space from top and front: <img class="gallery" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/CIELAB_color_space_top_view.png/440px-CIELAB_color_space_top_view.png"></img><img class="gallery" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/CIELAB_color_space_front_view.png/440px-CIELAB_color_space_front_view.png"></img></a>
</li>
</ul>
</details>
<h2 style="color: #b96aa4;">Me</h2>
Hi! I’m Nick Scheel, a third-year conservatory cellist and math major. (You can tell I’m a conservatory student because I just called myself a third-year.) Email me at <a href="mailto:[email protected]">[email protected]</a> if you have any questions or want to talk about programming, math, or cello (or linguistics).
<br>
<br>
<p class="small">(Yes, I threw this website together at 1am in the morning. No, I am not a visual designer. Why would you ask? xD)</p>
</div>
</body>