Computational Thinking

Joel Gethin Lewis

Lecture 8

What I'm going to talk about today:

  1. Motion and 3D.
  2. Filling shelves.
  3. How to mess with images.
  4. How to put it all together to make a gif maker.
  5. How to steal and share aka How to use GitHub.

Motion and 3D.

Thanks again to Rune Madsen for putting his course online:

http://printingcode.runemadsen.com/lecture-motion/

http://printingcode.runemadsen.com/lecture-3d/.

Don't forget to click to the slides and press 's' Joel!

Filling shelves.

Thanks again to Ali Almossawi for writing his book.

Read the Filling shelves chapter of "Bad Choices" Joel!

How to mess with images

So far we have just been drawing shapes, or drawing gifs or grabbing live video.

How can we mess with images? Lets have a look at the image section of the p5.js reference.

https://p5js.org/reference/#/p5/filter looks useful.

How to put it all together to make a gif maker.

So lets put together all the code we've made over the past few lectures: gif loading, gui control, gif saving and filtering images.

First lets bring all the other libraries into the gif export example that we made last time.

How to put it all together to make a gif maker.

Bringing all the code into one file is a mess, but useful to be able to make sure that everything works together.

Next we need to add a button instead of a mouse click to export the GIF.

You'll notice that the image is coming out at the wrong size - this is a bug with how p5.js works around Retina displays. We need to add a call to pixelDensity to fix this problem.

How to put it all together to make a gif maker.

Once that works lets add a way of choosing between GIF input and live camera input. Looking in the p5.dom Reference, there is an example called createSelect.

Once that works to export, lets add another option - with a filter effect. Threshold is fine - but you could use any of the Filter options.

How to steal and share aka How to use GitHub.

GitHub is a website that enables people to publicly share code using the Git protocol.

Git was made by Linus Torvald (the developer too lazy to fail from lecture 1) to allow the Linux Kernel to continue to develop.

Github is the standard way to share your code with others or work on big projects. p5.js is hosted there, along with many others.

How to steal and share aka How to use GitHub.

I often search GitHub looking for interesting code.

I recommend registering at GitHub as well as working through their tutorial.

Even PSD files work! Git is what I use for all projects - those across time zones or solo ones.

Thanks!