aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1# Aesthetic Computer Programming Basics
2
3Writing and publishing a `piece` on aesthetic.computer involves
4programming against an easy to learn JavaScript API while using
5the <a href="https://marketplace.visualstudio.com/items?itemName=aesthetic-computer.aesthetic-computer-code">VS Code</a> extension.
6<br>
7<br> Follow the <a href="#">setup guide</a> to get started.
8
9## Graphics
10
11<!-- wipe() -->
12<details>
13<summary class="fun">wipe()</summary>
14<ul>
15 <li>wipe() <em>Yields a random color</em></li>
16 <li>wipe(<a href="https://www.w3.org/wiki/CSS/Properties/color/keywords">colorName</a>) <em>Such as "red" or "hotpink" (CSS)</em></li>
17 <li>wipe(red, green, blue) <em>Each from 0-255</em></li>
18 <li>wipe(gray) <em>Grayscale from 0-255</em></li>
19 <li>wipe(paletteName) <em>Try "rainbow"</em></li>
20</details>
21<span class="desc">Clear the screen with a given color.</span>
22
23<!-- ink() -->
24<details>
25<summary class="fun">ink()</summary>
26<ul>
27 <li>ink() <em>Chooses a random color</em></li>
28 <li>wipe(<a href="https://www.w3.org/wiki/CSS/Properties/color/keywords">colorName</a>) <em>Such as "red" or "hotpink" (CSS)</em></li>
29 <li>ink(red, green, blue) <em>Each from 0-255</em></li>
30 <li>ink(red, green, blue, trans) <em>Including transparency</em></li>
31 <li>ink(gray) <em>Grayscale from 0-255</em></li>
32 <li>ink(gray, trans) <em>Grayscale with transparency</em></li>
33 <li>ink(paletteName) <em>Try "rainbow"</em></li>
34</ul>
35</details>
36<span class="desc">Set the color for future graphics functions like <code>line</code> or <code>box</code>.</span>
37
38<!-- point() -->
39<details>
40<summary class="fun">point()</summary>
41<ul>
42 <li>point() <em>Paint a random point</em></li>
43 <li>point(x, y) <em>At specific coordinates</em></li>
44</ul>
45</details>
46<span class="desc">Plot a pixel at position <code>x</code>, <code>y</code>.</span>
47
48<!-- line() -->
49<details>
50<summary class="fun">line()</summary>
51<ul>
52 <li>line() <em>Paints a random line</em></li>
53 <li>line(Ax, Ay, Bx, By) <em>From 0 on up starting at top left</em></li>
54</ul>
55</details>
56<span class="desc">Paint a 1px thick line from point <code>A</code> to <code>B</code>.</span>
57
58<!-- box() -->
59<details>
60<summary class="fun">box()</summary>
61<ul>
62 <mark><li>box() <em>A random box</em></li></mark>
63 <li>box(x, y, size) <em>Square from top left corner</em></li>
64 <li>box(x, y, w, h) <em>Rectangle from top left corner</em></li>
65 <li>box(x, y, size, mode) <em>Square with <code>mode</code></em></li>
66 <li>box(x, y, w, h, mode) <em>Rectangle with <code>mode</code></em></li>
67 <li class="subsection"><code>mode</code></li>
68 <em class="small">
69 center - paints a box from the center<br>
70 <hr>
71 outline - paints the outline of a box<br>
72 inline - the opposite of outline<br>
73 <em class="tiny">(thicken with <code>:</code> like <code>outline:4</code>)</em>
74
75 <br>
76 combine modes with <code>*</code> like <code>outline*center</code> or <code>inline:3*center</code>
77 </em>
78</ul>
79
80</details>
81<span class="desc">Paint a rectangle.</span>
82
83<!-- circle() -->
84<details>
85<summary class="fun">circle()</summary>
86<ul>
87 <mark><li>circle() <em>A random circle</em></li></mark>
88 <li>circle(x, y, radius) <em>Circle from center</em></li>
89 <li>circle(x, y, radius, filled) <em>Set to <code>false</code> for outline</em></li>
90 <li>circle(x, y, radius, filled, thickness) <em>Set outline thickness</em></li>
91</ul>
92</details>
93<span class="desc">Paint a circle.</span>
94
95<!-- oval() -->
96<details>
97<summary class="fun">oval()</summary>
98<ul>
99 <mark><li>oval() <em>A random oval</em></li></mark>
100 <li>oval(x, y, w, h) <em>Oval from center with width & height</em></li>
101 <li>oval(x, y, w, h, filled) <em>Set to <code>false</code> for outline</em></li>
102 <li>oval(x, y, radius, filled, thickness) <em>Set outline thickness</em></li>
103</ul>
104</details>
105<span class="desc">Paint an oval.</span>
106
107<!-- shape() -->
108<details>
109<summary class="fun">shape()</summary>
110<ul>
111 <mark><li>shape() <em>A random shape</em></li></mark>
112 <li>shape(x, y, x, y, ...) <em>Shape from a list of points</em></li>
113 <li>shape({ points: [x, y, ...], filled: false }) <em>Outline only</em></li>
114</ul>
115</details>
116<span class="desc">Paint any shape with points.</span>
117
118<!-- poly() -->
119<details>
120<summary class="fun">poly()</summary>
121<ul>
122 <mark><li>poly() <em>A random scribble</em></li></mark>
123 <li>poly([[x, y], [x, y], ...]) <em>Line from a list of points</em></li>
124</ul>
125</details>
126<span class="desc">Paint connected lines with points.</span>
127
128<!-- flood() -->
129<details>
130<summary class="fun">flood()</summary>
131<ul>
132 <mark><li>flood() <em>Fill a random location.</em></li></mark>
133 <li>flood(x, y) <em>Line from a list of points</em></li>
134</ul>
135</details>
136<span class="desc">Fill connected pixels of the same color and return a list of them.</span>
137
138<!-- write() -->
139<details>
140<summary class="fun">write()</summary>
141<ul>
142 <li>write("text") <em>A word in a random location</em></li>
143 <li>write("text", x, y) <em>Or at specific coordinates</em></li>
144</ul>
145</details>
146<span class="desc">Write text on the screen.</span>
147
148## Sound
149## Action
150## Number
151
152<style>
153 h2 {
154 border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
155 }
156 body {
157 background: rgba(32, 32, 32, 1);
158 color: white;
159 }
160 code {
161 color: yellow;
162 }
163 mark {
164 color: white;
165 opacity: 0.25;
166 text-decoration: line-through;
167 }
168 .fun {
169 font-size: 1.25em;
170 font-weight: bold;
171 user-select: none;
172 cursor: pointer;
173 color: yellow;
174 }
175 details ul {
176 font-family: monospace;
177 list-style-type: none;
178 margin-left: 1.1em;
179 padding-left: 0;
180 }
181 details[open] ul {
182 padding-bottom: 0.75em;
183 margin-bottom: 0.75em;
184 border-bottom: 1px solid rgba(255, 255, 255, 0.25);
185 }
186 .subsection, .small {
187 margin-left: 1em;
188 }
189 .subsection {
190 padding-top: 0.5em;
191 opacity: 0.5;
192 }
193 .small {
194 display: block;
195 font-size: 0.85em;
196 font-style: normal;
197 padding-left: 0.4em;
198 padding-top: 0.35em;
199 }
200 .tiny {
201 opacity: 1;
202 font-style: normal;
203 display: block;
204 padding-top: 0.3em;
205 }
206 .small code, .tiny code {
207 color: white;
208 }
209 details ul li em { opacity: 0.5; }
210 details ul em { opacity: 0.5; }
211 a { color: pink; }
212 .desc {
213 padding-left: 1.1em;
214 font-size: 1.1em;
215 margin-bottom: 1em;
216 display: block;
217 }
218</style>