├── 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 | ![black hole](images/blackhole.jpg) 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 | [![drawing an image](images/drawingImage.png)](https://editor.p5js.org/aferriss/sketches/4b5CCySZI) 220 | 221 | [Resizing an image](https://editor.p5js.org/aferriss/sketches/UgjO9vQm7) 222 | 223 | [![resized](images/resized.png)](https://editor.p5js.org/aferriss/sketches/UgjO9vQm7) 224 | 225 | [Drawing images at different sizes](https://editor.p5js.org/aferriss/sketches/78lSHPwgP) 226 | 227 | [![multiple sizes](images/multiSize.png)](https://editor.p5js.org/aferriss/sketches/78lSHPwgP) 228 | 229 | [Using an image as a brush](https://editor.p5js.org/aferriss/sketches/OHE5exvLc) 230 | 231 | [![image brush](images/imageBrush.png)](https://editor.p5js.org/aferriss/sketches/OHE5exvLc) 232 | 233 | [Grid of images](https://editor.p5js.org/aferriss/sketches/0Z5PeqjlK) 234 | 235 | [![grid of images](images/imageGrid.png)](https://editor.p5js.org/aferriss/sketches/0Z5PeqjlK) 236 | 237 | #### filter() 238 | 239 | [Posterize](https://editor.p5js.org/aferriss/sketches/qkjkaecOi) 240 | 241 | [![posterize](images/posterizeFilter.png)](https://editor.p5js.org/aferriss/sketches/qkjkaecOi) 242 | 243 | [Blur](https://editor.p5js.org/aferriss/sketches/EuUnrBglp) 244 | 245 | [![blur](images/blurFilter.png)](https://editor.p5js.org/aferriss/sketches/EuUnrBglp) 246 | 247 | [Threshold](https://editor.p5js.org/aferriss/sketches/nXztG1jOHf) 248 | 249 | [![threshold](images/thresholdFilter.png)](https://editor.p5js.org/aferriss/sketches/nXztG1jOHf) 250 | 251 | [Invert](https://editor.p5js.org/aferriss/sketches/vL_KEIQlE) 252 | 253 | [![invert](images/invertFilter.png)](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 | [![image as lines](images/pixelWaveform.png)](https://editor.p5js.org/aferriss/sketches/UJmdHqx_u) 260 | 261 | [Concentric Rings](https://editor.p5js.org/aferriss/sketches/DZTQpJ5yS) 262 | 263 | [![concentric rings](images/concentricRings.png)](https://editor.p5js.org/aferriss/sketches/DZTQpJ5yS) 264 | 265 | [Pixelate](https://editor.p5js.org/aferriss/sketches/DmcJX_3pg) 266 | 267 | [![pixelated](images/pixelate.png)](https://editor.p5js.org/aferriss/sketches/DmcJX_3pg) 268 | 269 | [Grid of circles](https://editor.p5js.org/aferriss/sketches/SPu1I9yOJ) 270 | 271 | [![grid of circles](images/circleGrid.png)](https://editor.p5js.org/aferriss/sketches/SPu1I9yOJ) 272 | 273 | [Random pixel walkers](https://editor.p5js.org/aferriss/sketches/tz9NjOu2A) 274 | 275 | [![pixel walkers](images/randomWalkers.png)](https://editor.p5js.org/aferriss/sketches/tz9NjOu2A) 276 | 277 | [Image chopper - Multiple Layers](https://editor.p5js.org/aferriss/sketches/l-aQewvtj) 278 | 279 | [![chopper](images/imageChopper.png)](https://editor.p5js.org/aferriss/sketches/l-aQewvtj) 280 | 281 | #### set() 282 | 283 | [Threshold](https://editor.p5js.org/aferriss/sketches/xrK9geMRr) 284 | 285 | [![threshold](images/threshold.png)](https://editor.p5js.org/aferriss/sketches/xrK9geMRr) 286 | 287 | #### copy() 288 | 289 | [Slicer-upper vertical](https://editor.p5js.org/aferriss/sketches/_q0GykOh4) 290 | 291 | [![slicer vertical](images/verticalOffset.png)](https://editor.p5js.org/aferriss/sketches/_q0GykOh4) 292 | 293 | [Slicer-upper vertical and horizontal](https://editor.p5js.org/aferriss/sketches/45meFjN0m) 294 | 295 | [![slicer both dir](images/verticalHorizontalOffset.png)](https://editor.p5js.org/aferriss/sketches/45meFjN0m) 296 | 297 | [Pixel Stretch Brush](https://editor.p5js.org/aferriss/sketches/Y_W6EK2gA) 298 | 299 | [![pixel stretch brush](images/pixelStretchBlock.png)](https://editor.p5js.org/aferriss/sketches/Y_W6EK2gA) 300 | 301 | [Pixel Line brush](https://editor.p5js.org/aferriss/sketches/6HdQFAcEm) 302 | 303 | [![pixel line brush](images/imageAsLines.png)](https://editor.p5js.org/aferriss/sketches/6HdQFAcEm) 304 | 305 | [Image offset brush](https://editor.p5js.org/aferriss/sketches/rg5bpO2h_) 306 | 307 | [![image offset brush](images/imageOffsetBrush.png)](https://editor.p5js.org/aferriss/sketches/rg5bpO2h_) 308 | 309 | [Feedback](https://editor.p5js.org/aferriss/sketches/FrTF-Po0R) 310 | 311 | [![feeback](images/copyFeedback.png)](https://editor.p5js.org/aferriss/sketches/FrTF-Po0R) 312 | 313 | [Offset glitchy grid](https://editor.p5js.org/aferriss/sketches/r8916miFo) 314 | 315 | [![glitchy grid](images/glitchyGrid.png)](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 | [![pixel sample](images/singleSample.png)](https://editor.p5js.org/aferriss/sketches/vpAEs1x5B) 322 | 323 | [Invert Color](https://editor.p5js.org/aferriss/sketches/Qa_68KTs8) 324 | 325 | [![invert](images/invert.png)](https://editor.p5js.org/aferriss/sketches/Qa_68KTs8) 326 | 327 | [Invert Color - Feedback Brush](https://editor.p5js.org/aferriss/sketches/hOXtFRpns) 328 | 329 | [![invert brush](images/invertBrush.png)](https://editor.p5js.org/aferriss/sketches/hOXtFRpns) 330 | 331 | [Color Sampling Brush](https://editor.p5js.org/aferriss/sketches/cuBwO3bPQ) 332 | 333 | [![color sample brush](images/colorSampleBrush.png)](https://editor.p5js.org/aferriss/sketches/cuBwO3bPQ) 334 | 335 | [Random Colors](https://editor.p5js.org/aferriss/sketches/8zIvzGQ2M) 336 | 337 | [![random colors](images/randomColors.png)](https://editor.p5js.org/aferriss/sketches/8zIvzGQ2M) 338 | 339 | [Average color](https://editor.p5js.org/aferriss/sketches/x4W77PZVI) 340 | 341 | [![average color](images/averageColor.png)](https://editor.p5js.org/aferriss/sketches/x4W77PZVI) 342 | 343 | [Looping through pixels - multiple ways](https://editor.p5js.org/aferriss/sketches/Ozumm9KmB) 344 | 345 | [![pixel loops](images/pixelLoops.png)](https://editor.p5js.org/aferriss/sketches/Ozumm9KmB) 346 | 347 | [Convolution - Sharpen Brush](https://editor.p5js.org/aferriss/sketches/TQuYDbOKv) 348 | 349 | [![sharpen brush](images/sharpenBrush.png)](https://editor.p5js.org/aferriss/sketches/TQuYDbOKv) 350 | 351 | [Convolution - Emboss Feedback Brush](https://editor.p5js.org/aferriss/sketches/01SNvnh-e) 352 | 353 | [![emboss brush](images/embossBrush.png)](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 | [![simple red](images/simpleRedShader.png)](https://editor.p5js.org/aferriss/sketches/ZXvJ14lLv) 360 | 361 | [Mouse Uniforms](https://editor.p5js.org/aferriss/sketches/RYT2u7-te) 362 | 363 | [![mouse uniforms](images/mouseUniforms.png)](https://editor.p5js.org/aferriss/sketches/RYT2u7-te) 364 | 365 | [Passing Uv's](https://editor.p5js.org/aferriss/sketches/14L9tqHFV) 366 | 367 | [![passing uvs](images/uvShader.png)](https://editor.p5js.org/aferriss/sketches/14L9tqHFV) 368 | 369 | [Texture 2D](https://editor.p5js.org/aferriss/sketches/m74DWvY9z) 370 | 371 | [![texture2D](images/texture2D.png)](https://editor.p5js.org/aferriss/sketches/m74DWvY9z) 372 | 373 | [Texture 2D - Offset](https://editor.p5js.org/aferriss/sketches/Uad5q03f0) 374 | 375 | [![Tex2d offset](images/texture2DOffset.png)](https://editor.p5js.org/aferriss/sketches/Uad5q03f0) 376 | 377 | [Texture 2D - Scale](https://editor.p5js.org/aferriss/sketches/-fROpY6zG) 378 | 379 | [![Texture 2D Scale](images/texture2DScale.png)](https://editor.p5js.org/aferriss/sketches/-fROpY6zG) 380 | 381 | [Texture Wrap](https://editor.p5js.org/aferriss/sketches/cwm7kEBcH) 382 | 383 | [![texture wrap](images/texture2DRepeat.png)](https://editor.p5js.org/aferriss/sketches/cwm7kEBcH) 384 | 385 | [Invert Colors](https://editor.p5js.org/aferriss/sketches/124gjwyyG) 386 | 387 | [![invert](images/invertShader.png)](https://editor.p5js.org/aferriss/sketches/124gjwyyG) 388 | 389 | [Wiggle Distort](https://editor.p5js.org/aferriss/sketches/H27Weuajr) 390 | 391 | [![Wiggle](images/wiggle.png)](https://editor.p5js.org/aferriss/sketches/H27Weuajr) 392 | 393 | [Brightness and Contrast](https://editor.p5js.org/aferriss/sketches/2E3Rl9PPG) 394 | 395 | [![brightness and contrast](images/brightnessContrast.png)](https://editor.p5js.org/aferriss/sketches/2E3Rl9PPG) 396 | 397 | [Smoothstep Threshold](https://editor.p5js.org/aferriss/sketches/wdT7661kh) 398 | 399 | [![Smooth thresh](images/smoothThreshold.png)](https://editor.p5js.org/aferriss/sketches/wdT7661kh) 400 | 401 | [Chromatic Aberration](https://editor.p5js.org/aferriss/sketches/Vf-h3VgO4) 402 | 403 | [![chroma aberrate](images/colorSep.png)](https://editor.p5js.org/aferriss/sketches/Vf-h3VgO4) 404 | 405 | [Pixelate](https://editor.p5js.org/aferriss/sketches/nAHtfUJcZ) 406 | 407 | [![Pixelate](images/pixelateShader.png)](https://editor.p5js.org/aferriss/sketches/nAHtfUJcZ) 408 | 409 | [Mix two images](https://editor.p5js.org/aferriss/sketches/1P3KwupKv) 410 | 411 | [![mix](images/blend.png)](https://editor.p5js.org/aferriss/sketches/1P3KwupKv) 412 | 413 | [Displacement](https://editor.p5js.org/aferriss/sketches/hlHzkj80Z) 414 | 415 | [![displacement](images/displacement.png)](https://editor.p5js.org/aferriss/sketches/hlHzkj80Z) 416 | 417 | [Blur](https://editor.p5js.org/aferriss/sketches/WxxbE4qeG) 418 | 419 | [![blur](images/blur.png)](https://editor.p5js.org/aferriss/sketches/WxxbE4qeG) 420 | 421 | [Emboss Convolution](https://editor.p5js.org/aferriss/sketches/jAPIT0hke) 422 | 423 | [![emboss](images/embossConvolution.png)](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: `/// ` 494 | - [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) is a little addon that makes it a little easier to tell which brackets belong to which by coloring the opening { and closing } the same color 495 | 496 | ### Books 497 | 498 | - [Generative Design](http://www.generative-gestaltung.de/2/) is an excellent book with tons of code examples for getting your feet wet with generative design. The book now comes with p5.js examples too! 499 | - [Getting Started with p5.js](https://www.oreilly.com/library/view/make-getting-started/9781457186769/) by Lauren McCarthy and Casey Reas is a great and quick primer for jumping into p5.js. I've often used this book for teaching and think it's one of the most friendly and approachable books for learning to code. 500 | - [Learning Processing](http://learningprocessing.com/) by Daniel Shiffman is the book that I first read when learning to code. Super clear examples and covers just a tad of everything you need to get started with processing / p5. 501 | - [The Nature of Code](https://natureofcode.com/) is Daniel Shiffman's follow up to Learning Processing. It looks at patterns in nature as inspiration for processing sketches and goes into some deeper topics like AI and emergence behavior. 502 | -------------------------------------------------------------------------------- /images/averageColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/averageColor.png -------------------------------------------------------------------------------- /images/blackhole.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/blackhole.jpg -------------------------------------------------------------------------------- /images/blend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/blend.png -------------------------------------------------------------------------------- /images/blur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/blur.png -------------------------------------------------------------------------------- /images/blurFilter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/blurFilter.png -------------------------------------------------------------------------------- /images/brightnessContrast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/brightnessContrast.png -------------------------------------------------------------------------------- /images/circleGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/circleGrid.png -------------------------------------------------------------------------------- /images/colorSampleBrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/colorSampleBrush.png -------------------------------------------------------------------------------- /images/colorSep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/colorSep.png -------------------------------------------------------------------------------- /images/concentricRings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/concentricRings.png -------------------------------------------------------------------------------- /images/copyFeedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/copyFeedback.png -------------------------------------------------------------------------------- /images/displacement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/displacement.png -------------------------------------------------------------------------------- /images/drawingImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/drawingImage.png -------------------------------------------------------------------------------- /images/embossBrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/embossBrush.png -------------------------------------------------------------------------------- /images/embossConvolution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/embossConvolution.png -------------------------------------------------------------------------------- /images/glitchyGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/glitchyGrid.png -------------------------------------------------------------------------------- /images/imageAsLines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/imageAsLines.png -------------------------------------------------------------------------------- /images/imageBrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/imageBrush.png -------------------------------------------------------------------------------- /images/imageChopper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/imageChopper.png -------------------------------------------------------------------------------- /images/imageGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/imageGrid.png -------------------------------------------------------------------------------- /images/imageOffsetBrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/imageOffsetBrush.png -------------------------------------------------------------------------------- /images/invert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/invert.png -------------------------------------------------------------------------------- /images/invertBrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/invertBrush.png -------------------------------------------------------------------------------- /images/invertFilter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/invertFilter.png -------------------------------------------------------------------------------- /images/invertShader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/invertShader.png -------------------------------------------------------------------------------- /images/lenticular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/lenticular.png -------------------------------------------------------------------------------- /images/mouseUniforms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/mouseUniforms.png -------------------------------------------------------------------------------- /images/multiSize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/multiSize.png -------------------------------------------------------------------------------- /images/pixelLoops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/pixelLoops.png -------------------------------------------------------------------------------- /images/pixelStretchBlock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/pixelStretchBlock.png -------------------------------------------------------------------------------- /images/pixelWaveform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/pixelWaveform.png -------------------------------------------------------------------------------- /images/pixelate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/pixelate.png -------------------------------------------------------------------------------- /images/pixelateShader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/pixelateShader.png -------------------------------------------------------------------------------- /images/posterizeFilter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/posterizeFilter.png -------------------------------------------------------------------------------- /images/randomColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/randomColors.png -------------------------------------------------------------------------------- /images/randomWalkers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/randomWalkers.png -------------------------------------------------------------------------------- /images/resized.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/resized.png -------------------------------------------------------------------------------- /images/sharpenBrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/sharpenBrush.png -------------------------------------------------------------------------------- /images/simpleRedShader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/simpleRedShader.png -------------------------------------------------------------------------------- /images/singleSample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/singleSample.png -------------------------------------------------------------------------------- /images/smoothThreshold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/smoothThreshold.png -------------------------------------------------------------------------------- /images/texture2D.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/texture2D.png -------------------------------------------------------------------------------- /images/texture2DOffset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/texture2DOffset.png -------------------------------------------------------------------------------- /images/texture2DRepeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/texture2DRepeat.png -------------------------------------------------------------------------------- /images/texture2DScale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/texture2DScale.png -------------------------------------------------------------------------------- /images/threshold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/threshold.png -------------------------------------------------------------------------------- /images/thresholdFilter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/thresholdFilter.png -------------------------------------------------------------------------------- /images/uvShader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/uvShader.png -------------------------------------------------------------------------------- /images/verticalHorizontalOffset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/verticalHorizontalOffset.png -------------------------------------------------------------------------------- /images/verticalOffset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/verticalOffset.png -------------------------------------------------------------------------------- /images/wiggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/images/wiggle.png -------------------------------------------------------------------------------- /p5Template/assets/mountain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aferriss/computational-photography/64186ab5b7ee150cc270c2cd5bf55fe708fe0ec7/p5Template/assets/mountain.jpg -------------------------------------------------------------------------------- /p5Template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5 Template 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /p5Template/sketch.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | let img; 4 | function preload() { 5 | img = loadImage("./assets/mountain.jpg"); 6 | } 7 | 8 | function setup() { 9 | createCanvas(500, 500); 10 | } 11 | 12 | function draw() { 13 | image(img, 0, 0, width, height); 14 | } 15 | --------------------------------------------------------------------------------