├── README.md
├── images
├── averageColor.png
├── blackhole.jpg
├── blend.png
├── blur.png
├── blurFilter.png
├── brightnessContrast.png
├── circleGrid.png
├── colorSampleBrush.png
├── colorSep.png
├── concentricRings.png
├── copyFeedback.png
├── displacement.png
├── drawingImage.png
├── embossBrush.png
├── embossConvolution.png
├── glitchyGrid.png
├── imageAsLines.png
├── imageBrush.png
├── imageChopper.png
├── imageGrid.png
├── imageOffsetBrush.png
├── invert.png
├── invertBrush.png
├── invertFilter.png
├── invertShader.png
├── lenticular.png
├── mouseUniforms.png
├── multiSize.png
├── pixelLoops.png
├── pixelStretchBlock.png
├── pixelWaveform.png
├── pixelate.png
├── pixelateShader.png
├── posterizeFilter.png
├── randomColors.png
├── randomWalkers.png
├── resized.png
├── sharpenBrush.png
├── simpleRedShader.png
├── singleSample.png
├── smoothThreshold.png
├── texture2D.png
├── texture2DOffset.png
├── texture2DRepeat.png
├── texture2DScale.png
├── threshold.png
├── thresholdFilter.png
├── uvShader.png
├── verticalHorizontalOffset.png
├── verticalOffset.png
└── wiggle.png
└── p5Template
├── assets
└── mountain.jpg
├── global.d.ts
├── index.html
├── p5.min.js
└── sketch.js
/README.md:
--------------------------------------------------------------------------------
1 | # Computational Photography
2 |
3 | Hello! These are the materials for the computational photography workshop taught by Adam Ferriss (aferriss@gmail.com) at the Anderson Ranch summer of 2020.
4 |
5 | #### Table of Contents
6 |
7 | - [Schedule](#schedule)
8 | - [What is Computational Photograph](#what-is-computational-photography)
9 | - [Workshop Format](#workshop-format)
10 | - [What you'll get out of it](#what-youll-get-out-of-it)
11 | - [Code of Conduct](#code-of-conduct)
12 | - [Setting up your environment](#setting-up-your-coding-environment)
13 | - [In class demos](#in-class-demo-code)
14 | - [Code Examples](#code-examples)
15 | - [Resources](#resources)
16 |
17 | ## Schedule
18 |
19 | **\*The schedule may change depending on the pace and needs of the class!**
20 |
21 | #### Meeting Times
22 |
23 | July 27 - 31
24 |
25 | _The below times are in MST_
26 |
27 | 9am - 11am Class time and demos
28 |
29 | 11am - 1pm Lunch
30 |
31 | 1pm - 4pm Class time and individual meetings
32 |
33 | #### Day 1 - Monday July 27
34 |
35 | - Introductions
36 | - Workshop Overview
37 | - Setting up your environment
38 | - p5 image function demos
39 | - `loadImage()`
40 | - `image()`
41 | - `get()`
42 | - `set()`
43 | - `copy()`
44 | - exporting your work
45 |
46 | #### Day 2 - Tuesday July 28
47 |
48 | - Pixel Part 1
49 | - looping over pixel array
50 | - accessing individual pixels
51 | - pixels as data
52 |
53 | #### Day 3 - Wednesday July 29
54 |
55 | - Pixels Part 2
56 | - Kernel Convolution demo
57 | - Shaders Part 1
58 | - Shader Syntax
59 | - Texture2D
60 | - Shader functions `smoothstep()`, `step()`, `clamp()`, `mix()`
61 |
62 | #### Day 4 - Thursday July 30
63 |
64 | - Shaders Part 2
65 | - UV fun (wiggle, distort, displacement)
66 | - Shader convolution
67 | - Multipass rendering
68 | - Feedback
69 |
70 | #### Day 5 - Friday July 31
71 |
72 | - Going further
73 | - Work Share / Critique
74 |
75 | ## What is Computational Photography?
76 |
77 | 
78 |
79 | Computational Photography is actually a pretty broad term but for the purposes of this class, I am taking it to mean any method by which a photograph or digital image can be manipulated via code.
80 |
81 | In the broader definition, it refers to imaging techniques that expand the capability of digital cameras / sensors through the use of software. A lot of this tech was made for our phones. Think of portrait mode on iPhones or Google's night sight on Androids. Newer techniques using machine learning have also been deployed for things like upscaling small images, removing noise and artifacts, or extracting 3d depth information from single photographs. We'll look at some of these new advances in the course of this workshop.
82 |
83 | ## Workshop Format
84 |
85 | We'll be meeting on zoom every morning from 9am - 11am for live coding demos of new techniques. We'll have a short break for lunch and then return in the afternoon at 1pm. Depending on the day, we will likely do a combination of individual meetings and demos in the afternoon, ending at 4pm.
86 |
87 | On Friday we'll all get together to share our work and critique.
88 |
89 | ## What (I hope) you'll get out of it
90 |
91 | My hope is that you take away some of the core techniques for learning how to manipulate images with code. Hopefully these are processes that will help further your own artistic practice and expand your tool set for artistic expression / ideation. What you produce here is up to you. If you want to make a suite of new tools for your own practice, great! If you want to just sit back and soak it in and experiment with the examples I provide, that's totally fine too!
92 |
93 | I'll be leaving this repo up as a resource for you and the general public for as long as I can so hopefully it is something you can return to for guidance or help for as long as you need it.
94 |
95 | I'm here to help you as much as I can so please don't hesitate to reach out if you need help or even just wanna chat (e-mail is great but we can talk about setting up a slack or discord if people are interested). Also reach out to your fellow workshop-mates. We're only together for a short time but we can all learn from each other during this week.
96 |
97 | Lastly, I encourage you to consider the ways in which computational photography (and code based image making in general) might cause harm in the world (ex. face recognition used for surveillance by an authoritarian govt). What can we use these technologies for that will move the needle in the direction of racial, social, and ecological justice?
98 |
99 | ## Code of Conduct
100 |
101 | This code of conduct was borrowed from the p5.js code of conduct but the same tenets apply in this workshop.
102 |
103 | - **Be mindful of your language.** Any of the following behavior is unacceptable:
104 |
105 | - Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background
106 | - Threats of violence
107 | - Deliberate intimidation
108 | - Sexually explicit or violent material that is not contextualized and preceded by a considerate warning
109 | - Unwelcome sexual attention
110 | - Stalking or following
111 | - Or any other kinds of harassment
112 |
113 | Use your best judgement. If it will possibly make others uncomfortable, do not post it.
114 |
115 | - **Be respectful.** Disagreement is not an opportunity to attack someone elses thoughts or opinions. Although views may differ, remember to approach every situation with patience and care.
116 | - **Be considerate.** Think about how your contribution will affect others in the community.
117 | - **Be open minded.** Embrace new people and new ideas. Our community is continually evolving and we welcome positive change.
118 |
119 | ## Setting up your coding environment
120 |
121 | If you're just learning to code, or just want to get started quickly, I strongly recommend that you use the p5.js code editor which can be found at [https://editor.p5js.com](https://editor.p5js.com). Be sure to make an account, otherwise you won't be able to save your sketches or upload images. You can always download your code and move it to another environment later if you don't like the online editor.
122 |
123 | However, if you'd like to branch out and explore other options, I recommend you [download VSCode](https://code.visualstudio.com/). Along with VSCode you may want to download some [extensions](#environment-and-code-editor). I've listed a few of the ones I use below in the resource section, but of particular note is the VSCode live share extension. This may be useful so that we can code together during one on one sessions. The live server extension is also really handy for spinning up a localhost server (which you will need to use images) from within VSCode.
124 |
125 | If you opt to use VSCode, I've also provided a template p5.js project for you to start with. It also includes the typescript file so that code auto-completion will work out of the box. Just be sure to duplicate the template whenever you want to start a new sketch.
126 |
127 | ## In Class demo code
128 |
129 | ### Monday
130 |
131 | - [Loading Images](https://editor.p5js.org/aferriss/sketches/AIOIo1Iha)
132 | - [Get - First Steps](https://editor.p5js.org/aferriss/sketches/LeZ383qUv)
133 | - [Get - For Loop](https://editor.p5js.org/aferriss/sketches/dZACrHEA2X)
134 | - [Get - Nested Loops](https://editor.p5js.org/aferriss/sketches/xHoVMmnMW)
135 | - [Get - Draw Shapes](https://editor.p5js.org/aferriss/sketches/2_uWH7ZOZ)
136 | - [Get - Random Walkers](https://editor.p5js.org/aferriss/sketches/r1uW_3qc_)
137 | - [Get - Image brush](https://editor.p5js.org/aferriss/sketches/8OLksBFO7)
138 | - [Get - Slitscan](https://editor.p5js.org/aferriss/sketches/8gIVVvPFn)
139 | - [Get - Random Walk Bugs](https://editor.p5js.org/aferriss/sketches/2mFQCc8Z3)
140 | - [Get - Concentric Rings](https://editor.p5js.org/aferriss/sketches/xHoVMmnMW)
141 |
142 | - [Get - Threshold](https://editor.p5js.org/aferriss/sketches/4wYRoPo7t)
143 |
144 | - [Filter - Dilate + Blur](https://editor.p5js.org/aferriss/sketches/8gIVVvPFn)
145 |
146 | - [Set - Single Pixel](https://editor.p5js.org/aferriss/sketches/zQehGMDf7)
147 |
148 | - [Copy - Simple](https://editor.p5js.org/aferriss/sketches/tZxgRjGIq)
149 | - [Copy - Pixel Stretch Brush](https://editor.p5js.org/aferriss/sketches/lxBUoMmGT)
150 | - [Copy - Pixel Slicer](https://editor.p5js.org/aferriss/sketches/AYOVCOUFe)
151 | - [Copy - Grid Offset](https://editor.p5js.org/aferriss/sketches/s04gz51uY)
152 |
153 | ### Tuesday
154 |
155 | - [Getting Pixels from the array](https://editor.p5js.org/buckWorkshop/sketches/asrUSvVtp)
156 | - [Getting Pixels brush](https://editor.p5js.org/buckWorkshop/sketches/5pW5VQ9gA)
157 | - [Setting Pixels - Gradient](https://editor.p5js.org/buckWorkshop/sketches/dohvNDnyL)
158 | - [Invert Pixels](https://editor.p5js.org/buckWorkshop/sketches/zBXTUYfKT)
159 | - [Invert Pixels Brush](https://editor.p5js.org/buckWorkshop/sketches/vNLQVKd9v)
160 |
161 | - [Line Drawer](https://editor.p5js.org/buckWorkshop/sketches/Cf-pkvTAg)
162 | - [Average Color](https://editor.p5js.org/buckWorkshop/sketches/-HwBJLNi0)
163 | - [Simple blur algorithm](https://editor.p5js.org/buckWorkshop/sketches/4F4VbBKZu)
164 |
165 | - [FullScreen](https://editor.p5js.org/buckWorkshop/sketches/rsIKfM_g_)
166 | - [Convolution](https://editor.p5js.org/buckWorkshop/sketches/l7G85CSJ2)
167 | - [Pixel Sorting](https://editor.p5js.org/aferriss/sketches/fehK4235c)
168 |
169 | ### Wednesday
170 |
171 | - [First Shader](https://editor.p5js.org/buckWorkshop/sketches/Jo6kSR0zg)
172 | - [Texture Sample](https://editor.p5js.org/buckWorkshop/sketches/14qUMrRBg)
173 | - [Texture Offsets](https://editor.p5js.org/buckWorkshop/sketches/DpZnTBmVD)
174 | - [Texture Color Adjustments](https://editor.p5js.org/buckWorkshop/sketches/-PB-YWBPC)
175 |
176 | - [Using a Slider](https://editor.p5js.org/buckWorkshop/sketches/d1mOs4INA)
177 | - [Two Images Mixed](https://editor.p5js.org/buckWorkshop/sketches/UL9x_eSuu)
178 | - [Color Separation](https://editor.p5js.org/buckWorkshop/sketches/6voJjxfD_)
179 | - [Displacement](https://editor.p5js.org/buckWorkshop/sketches/eXXW6jLV3)
180 | - [Displacement Painter](https://editor.p5js.org/buckWorkshop/sketches/Y9wxsHuHF)
181 |
182 | - [Shader Masking](https://editor.p5js.org/buckWorkshop/sketches/xhbhil-n6)
183 |
184 | ### Thursday
185 |
186 | - [Shadertoy to p5 conversion](https://editor.p5js.org/buckWorkshop/sketches/Bg9toEg0G)
187 | - [Posterized](https://editor.p5js.org/buckWorkshop/sketches/VIcHC1OMy)
188 | - [Pixelated](https://editor.p5js.org/buckWorkshop/sketches/lCUdHs2bi)
189 | - [Texture Rotation](https://editor.p5js.org/buckWorkshop/sketches/WkjdZ-O_I)
190 | - [Single Pass Blur](https://editor.p5js.org/buckWorkshop/sketches/g3p5vF_OI)
191 | - [Bloom](https://editor.p5js.org/buckWorkshop/sketches/oVy8Y53Up)
192 | - [Bloom Buffers](https://editor.p5js.org/buckWorkshop/sketches/FyMvw7G3J)
193 | - [Motion Detector](https://editor.p5js.org/buckWorkshop/sketches/t8vLTmHR1)
194 | - [Load and Save Video](https://editor.p5js.org/buckWorkshop/sketches/rjCcime7e)
195 |
196 | ### Friday
197 |
198 | - [Load Video](https://editor.p5js.org/buckWorkshop/sketches/SF39_uz-Y)
199 | - [Load Sound](https://editor.p5js.org/buckWorkshop/sketches/HOlFT8AqL)
200 | - [Video + Audio with a shader](https://editor.p5js.org/buckWorkshop/sketches/Q1iOpGNTg)
201 | - [Slit Scan Video](https://editor.p5js.org/buckWorkshop/sketches/yT9xbsLHg)
202 | - [RGB Delay](https://editor.p5js.org/buckWorkshop/sketches/-gV1Wv3py)
203 | - [Feedback](https://editor.p5js.org/buckWorkshop/sketches/jwVg3EKlW)
204 | - [Vertex Shader](https://editor.p5js.org/buckWorkshop/sketches/XKgYf5XFk)
205 | - [Grid of Old Frames](https://editor.p5js.org/buckWorkshop/sketches/-y-jy0A8Z)
206 |
207 | ## Code Examples
208 |
209 | I have created this collection of code example sketches for your reference. Most of them should be pretty well commented but if you've got questions about how anything is working, let me know!
210 |
211 | Everything below is arranged from least complex to most complex
212 |
213 | ### Image functions
214 |
215 | #### loadImage() and image()
216 |
217 | [Loading and drawing an image](https://editor.p5js.org/aferriss/sketches/4b5CCySZI)
218 |
219 | [](https://editor.p5js.org/aferriss/sketches/4b5CCySZI)
220 |
221 | [Resizing an image](https://editor.p5js.org/aferriss/sketches/UgjO9vQm7)
222 |
223 | [](https://editor.p5js.org/aferriss/sketches/UgjO9vQm7)
224 |
225 | [Drawing images at different sizes](https://editor.p5js.org/aferriss/sketches/78lSHPwgP)
226 |
227 | [](https://editor.p5js.org/aferriss/sketches/78lSHPwgP)
228 |
229 | [Using an image as a brush](https://editor.p5js.org/aferriss/sketches/OHE5exvLc)
230 |
231 | [](https://editor.p5js.org/aferriss/sketches/OHE5exvLc)
232 |
233 | [Grid of images](https://editor.p5js.org/aferriss/sketches/0Z5PeqjlK)
234 |
235 | [](https://editor.p5js.org/aferriss/sketches/0Z5PeqjlK)
236 |
237 | #### filter()
238 |
239 | [Posterize](https://editor.p5js.org/aferriss/sketches/qkjkaecOi)
240 |
241 | [](https://editor.p5js.org/aferriss/sketches/qkjkaecOi)
242 |
243 | [Blur](https://editor.p5js.org/aferriss/sketches/EuUnrBglp)
244 |
245 | [](https://editor.p5js.org/aferriss/sketches/EuUnrBglp)
246 |
247 | [Threshold](https://editor.p5js.org/aferriss/sketches/nXztG1jOHf)
248 |
249 | [](https://editor.p5js.org/aferriss/sketches/nXztG1jOHf)
250 |
251 | [Invert](https://editor.p5js.org/aferriss/sketches/vL_KEIQlE)
252 |
253 | [](https://editor.p5js.org/aferriss/sketches/vL_KEIQlE)
254 |
255 | #### get()
256 |
257 | [Image as lines](https://editor.p5js.org/aferriss/sketches/UJmdHqx_u)
258 |
259 | [](https://editor.p5js.org/aferriss/sketches/UJmdHqx_u)
260 |
261 | [Concentric Rings](https://editor.p5js.org/aferriss/sketches/DZTQpJ5yS)
262 |
263 | [](https://editor.p5js.org/aferriss/sketches/DZTQpJ5yS)
264 |
265 | [Pixelate](https://editor.p5js.org/aferriss/sketches/DmcJX_3pg)
266 |
267 | [](https://editor.p5js.org/aferriss/sketches/DmcJX_3pg)
268 |
269 | [Grid of circles](https://editor.p5js.org/aferriss/sketches/SPu1I9yOJ)
270 |
271 | [](https://editor.p5js.org/aferriss/sketches/SPu1I9yOJ)
272 |
273 | [Random pixel walkers](https://editor.p5js.org/aferriss/sketches/tz9NjOu2A)
274 |
275 | [](https://editor.p5js.org/aferriss/sketches/tz9NjOu2A)
276 |
277 | [Image chopper - Multiple Layers](https://editor.p5js.org/aferriss/sketches/l-aQewvtj)
278 |
279 | [](https://editor.p5js.org/aferriss/sketches/l-aQewvtj)
280 |
281 | #### set()
282 |
283 | [Threshold](https://editor.p5js.org/aferriss/sketches/xrK9geMRr)
284 |
285 | [](https://editor.p5js.org/aferriss/sketches/xrK9geMRr)
286 |
287 | #### copy()
288 |
289 | [Slicer-upper vertical](https://editor.p5js.org/aferriss/sketches/_q0GykOh4)
290 |
291 | [](https://editor.p5js.org/aferriss/sketches/_q0GykOh4)
292 |
293 | [Slicer-upper vertical and horizontal](https://editor.p5js.org/aferriss/sketches/45meFjN0m)
294 |
295 | [](https://editor.p5js.org/aferriss/sketches/45meFjN0m)
296 |
297 | [Pixel Stretch Brush](https://editor.p5js.org/aferriss/sketches/Y_W6EK2gA)
298 |
299 | [](https://editor.p5js.org/aferriss/sketches/Y_W6EK2gA)
300 |
301 | [Pixel Line brush](https://editor.p5js.org/aferriss/sketches/6HdQFAcEm)
302 |
303 | [](https://editor.p5js.org/aferriss/sketches/6HdQFAcEm)
304 |
305 | [Image offset brush](https://editor.p5js.org/aferriss/sketches/rg5bpO2h_)
306 |
307 | [](https://editor.p5js.org/aferriss/sketches/rg5bpO2h_)
308 |
309 | [Feedback](https://editor.p5js.org/aferriss/sketches/FrTF-Po0R)
310 |
311 | [](https://editor.p5js.org/aferriss/sketches/FrTF-Po0R)
312 |
313 | [Offset glitchy grid](https://editor.p5js.org/aferriss/sketches/r8916miFo)
314 |
315 | [](https://editor.p5js.org/aferriss/sketches/r8916miFo)
316 |
317 | #### pixels array
318 |
319 | [Single Pixel Sample](https://editor.p5js.org/aferriss/sketches/vpAEs1x5B)
320 |
321 | [](https://editor.p5js.org/aferriss/sketches/vpAEs1x5B)
322 |
323 | [Invert Color](https://editor.p5js.org/aferriss/sketches/Qa_68KTs8)
324 |
325 | [](https://editor.p5js.org/aferriss/sketches/Qa_68KTs8)
326 |
327 | [Invert Color - Feedback Brush](https://editor.p5js.org/aferriss/sketches/hOXtFRpns)
328 |
329 | [](https://editor.p5js.org/aferriss/sketches/hOXtFRpns)
330 |
331 | [Color Sampling Brush](https://editor.p5js.org/aferriss/sketches/cuBwO3bPQ)
332 |
333 | [](https://editor.p5js.org/aferriss/sketches/cuBwO3bPQ)
334 |
335 | [Random Colors](https://editor.p5js.org/aferriss/sketches/8zIvzGQ2M)
336 |
337 | [](https://editor.p5js.org/aferriss/sketches/8zIvzGQ2M)
338 |
339 | [Average color](https://editor.p5js.org/aferriss/sketches/x4W77PZVI)
340 |
341 | [](https://editor.p5js.org/aferriss/sketches/x4W77PZVI)
342 |
343 | [Looping through pixels - multiple ways](https://editor.p5js.org/aferriss/sketches/Ozumm9KmB)
344 |
345 | [](https://editor.p5js.org/aferriss/sketches/Ozumm9KmB)
346 |
347 | [Convolution - Sharpen Brush](https://editor.p5js.org/aferriss/sketches/TQuYDbOKv)
348 |
349 | [](https://editor.p5js.org/aferriss/sketches/TQuYDbOKv)
350 |
351 | [Convolution - Emboss Feedback Brush](https://editor.p5js.org/aferriss/sketches/01SNvnh-e)
352 |
353 | [](https://editor.p5js.org/aferriss/sketches/01SNvnh-e)
354 |
355 | ### Shaders
356 |
357 | [Simple Red Shader](https://editor.p5js.org/aferriss/sketches/ZXvJ14lLv)
358 |
359 | [](https://editor.p5js.org/aferriss/sketches/ZXvJ14lLv)
360 |
361 | [Mouse Uniforms](https://editor.p5js.org/aferriss/sketches/RYT2u7-te)
362 |
363 | [](https://editor.p5js.org/aferriss/sketches/RYT2u7-te)
364 |
365 | [Passing Uv's](https://editor.p5js.org/aferriss/sketches/14L9tqHFV)
366 |
367 | [](https://editor.p5js.org/aferriss/sketches/14L9tqHFV)
368 |
369 | [Texture 2D](https://editor.p5js.org/aferriss/sketches/m74DWvY9z)
370 |
371 | [](https://editor.p5js.org/aferriss/sketches/m74DWvY9z)
372 |
373 | [Texture 2D - Offset](https://editor.p5js.org/aferriss/sketches/Uad5q03f0)
374 |
375 | [](https://editor.p5js.org/aferriss/sketches/Uad5q03f0)
376 |
377 | [Texture 2D - Scale](https://editor.p5js.org/aferriss/sketches/-fROpY6zG)
378 |
379 | [](https://editor.p5js.org/aferriss/sketches/-fROpY6zG)
380 |
381 | [Texture Wrap](https://editor.p5js.org/aferriss/sketches/cwm7kEBcH)
382 |
383 | [](https://editor.p5js.org/aferriss/sketches/cwm7kEBcH)
384 |
385 | [Invert Colors](https://editor.p5js.org/aferriss/sketches/124gjwyyG)
386 |
387 | [](https://editor.p5js.org/aferriss/sketches/124gjwyyG)
388 |
389 | [Wiggle Distort](https://editor.p5js.org/aferriss/sketches/H27Weuajr)
390 |
391 | [](https://editor.p5js.org/aferriss/sketches/H27Weuajr)
392 |
393 | [Brightness and Contrast](https://editor.p5js.org/aferriss/sketches/2E3Rl9PPG)
394 |
395 | [](https://editor.p5js.org/aferriss/sketches/2E3Rl9PPG)
396 |
397 | [Smoothstep Threshold](https://editor.p5js.org/aferriss/sketches/wdT7661kh)
398 |
399 | [](https://editor.p5js.org/aferriss/sketches/wdT7661kh)
400 |
401 | [Chromatic Aberration](https://editor.p5js.org/aferriss/sketches/Vf-h3VgO4)
402 |
403 | [](https://editor.p5js.org/aferriss/sketches/Vf-h3VgO4)
404 |
405 | [Pixelate](https://editor.p5js.org/aferriss/sketches/nAHtfUJcZ)
406 |
407 | [](https://editor.p5js.org/aferriss/sketches/nAHtfUJcZ)
408 |
409 | [Mix two images](https://editor.p5js.org/aferriss/sketches/1P3KwupKv)
410 |
411 | [](https://editor.p5js.org/aferriss/sketches/1P3KwupKv)
412 |
413 | [Displacement](https://editor.p5js.org/aferriss/sketches/hlHzkj80Z)
414 |
415 | [](https://editor.p5js.org/aferriss/sketches/hlHzkj80Z)
416 |
417 | [Blur](https://editor.p5js.org/aferriss/sketches/WxxbE4qeG)
418 |
419 | [](https://editor.p5js.org/aferriss/sketches/WxxbE4qeG)
420 |
421 | [Emboss Convolution](https://editor.p5js.org/aferriss/sketches/jAPIT0hke)
422 |
423 | [](https://editor.p5js.org/aferriss/sketches/jAPIT0hke)
424 |
425 | #### save() and exporting work
426 |
427 | [Save on keypress](https://editor.p5js.org/aferriss/sketches/rg5bpO2h_)
428 |
429 | [Save on button press](https://editor.p5js.org/aferriss/sketches/bhh2UJd_Z)
430 |
431 | ## Resources
432 |
433 | ### Pixels
434 |
435 | - [Adam's Pixel Collection on the p5 editor](https://editor.p5js.org/aferriss/collections/eK47k_qL8)
436 | - p5js Pixel and Image functions:
437 | - [get()](https://p5js.org/reference/#/p5/get)
438 | - [set()](https://p5js.org/reference/#/p5/set)
439 | - [copy()](https://p5js.org/reference/#/p5/copy)
440 | - [loadPixels()](https://p5js.org/reference/#/p5/loadPixels)
441 | - [updatePixels()](https://p5js.org/reference/#/p5/updatePixels)
442 | - [pixels](https://p5js.org/reference/#/p5/pixels)
443 | - [loadImage()](https://p5js.org/reference/#/p5/loadImage)
444 | - [createImage()](https://p5js.org/reference/#/p5/createImage)
445 | - [image()](https://p5js.org/reference/#/p5/image)
446 | - [filter()](https://p5js.org/reference/#/p5/filter)
447 | - p5js Color Functions
448 | - [color()](https://p5js.org/reference/#/p5/color)
449 | - [red()](https://p5js.org/reference/#/p5/red)
450 | - [green()](https://p5js.org/reference/#/p5/green)
451 | - [blue()](https://p5js.org/reference/#/p5/blue)
452 | - [brightness()](https://p5js.org/reference/#/p5/brightness)
453 | - [saturation()](https://p5js.org/reference/#/p5/saturation)
454 | - [hue()](https://p5js.org/reference/#/p5/hue)
455 | - [Image processing in p5js](https://idmnyu.github.io/p5.js-image/index.html) is a nice tutorial on getting started with pixel manipulation in p5.
456 | - [The Pixel Array - Coding Train](https://www.youtube.com/watch?v=nMUMZ5YRxHI)
457 | - [Brightness Mirror - Coding Train](https://www.youtube.com/watch?v=rNqaw8LT2ZU)
458 |
459 | ### Shaders
460 |
461 | - p5js Shader functions:
462 | - [p5.Shader](https://p5js.org/reference/#/p5.Shader)
463 | - [loadShader](https://p5js.org/reference/#/p5/loadShader)
464 | - [shader()](https://p5js.org/reference/#/p5/shader)
465 | - [resetShader()](https://p5js.org/reference/#/p5/resetShader)
466 | - [setUniform()](https://p5js.org/reference/#/p5.Shader/setUniform)
467 | - [textureWrap()](https://p5js.org/reference/#/p5/textureWrap)
468 | - [The Book of Shaders](https://thebookofshaders.com/) by Patricia Gonzalez Vivo and Jen Lowe is an introduction to writing shaders with interactive editors in the browser.
469 | - [p5js shaders](https://itp-xstory.github.io/p5js-shaders/#/) is a write up of how to get started with shaders in p5js.
470 | - [Adam's shader examples](https://github.com/aferriss/p5jsShaderExamples) is a repo I've created with a whole bunch of examples of how you might accomplish certain effects using shaders
471 | - [Shadertoy](https://www.shadertoy.com) is an online fragment shader editor. There's a ton of knowledge here if you're willing to be patient and comb through other examples. People have done some truly mind blowing things on this site.
472 | - [Shader functions reference](https://www.shaderific.com/glsl-functions) is a reference for GLSL shader functions
473 |
474 | ### Javascript / p5
475 |
476 | - [p5js editor](https://editor.p5js.org/)
477 | - [p5js.org reference](https://p5js.org/reference) is where you can find information about all of the functionality of p5.js.
478 | - [p5js forum](https://discourse.processing.org/c/p5js/10) is a good place to ask questions or talk to other people working with p5
479 | - [The Coding Train](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw) is an amazing series of videos hosted by Daniel Shiffman (and others) that teaches coding and extensively covers p5js / processing.
480 | - [MDN Javascript Docs](https://developer.mozilla.org/en-US/). Probably my favorite site for getting information about features of javascript. Typically very well written with lots of examples.
481 | - [ES6 Features](https://github.com/lukehoban/es6features). ES6 is a modern flavor of javascript that adds some really handy new features to the language. This site is a little wrap up of all of them for quick reference.
482 | - [Nested Loops - Coding Train](https://www.youtube.com/watch?v=1c1_TMdf8b8)
483 | - [Arrays - Coding Train](https://www.youtube.com/watch?v=VIQoUghHSxU)
484 | - [Arrays and Loops - Coding Train](https://www.youtube.com/watch?v=RXWO3mFuW-I&t=1s)
485 |
486 | ### Environment and Code Editor
487 |
488 | - [VS Code](https://code.visualstudio.com/)
489 | - [Workflow: Visual Studio Code](https://www.youtube.com/watch?v=yJw0SyKO9IU)
490 | - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a great code style guide / auto formatter. It also helps bring everyone's code into the same style which makes it easier to debug when reading code other people have written.
491 | - [Shader Language Support](https://marketplace.visualstudio.com/items?itemName=slevesque.shader) is super helpful for syntax highlighting when working with GLSL or other shader languages.
492 | - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) adds a localserver to VSCode so you can preview your sketches without having to do any work to set up a localhost. Just click the `Go Live` button on the blue bar on the bottom right to start which should open up a web page at [localhost:5500](localhost:5500)
493 | - [p5 Types](https://www.npmjs.com/package/@types/p5) is a typescript definitions file for p5.js. It is already included in the template I've prepared for you but if you plan to continue working in VSCode I highly recommend picking this up. This will give you autocomplete support when working with p5 in VSCode. You can just copy the `global.d.ts` file into your project folder and then on the first line of your sketch add: `///