Importing your own images for funkin'

Importing your own images is super easy, and I'm here to walk you through it!

In the first tab of the sketch, there's a line that says img_strings = ["mount", "awl", "cat", "paints" ]. What this is doing is literally just matching the names out of the sketch folder (mount.jpg, awl.jpg, cat.jpg, and paints.jpg), and then appending the ext value (.jpg) to the files where necessary.

All you really have to worry about is this:

• Dragging and dropping new images into the sketch (or opening the sketch folder with ctrl / command + k and placing them there)
• Adding or replacing your image's names to the img_strings [] array (if your image is named Cat.jpg, then 'Cat' will work)
• Being mindful of size (uniformity is best among your images, and defaults are 2000 x 2000 pixels)
• Being mindful of the data type (such as jpg, png, gif, etc)

For the quickest results, just resize or crop the images you want to use to 2000 x 2000, and use JPG.

If you insist on using a different format or size, no problem, but you will need to change a few things:

• The img_width variable at the top of the sketch (current value is 2000)
• The img_height variable at the top of the sketch (current value is 2000)
• The ext variable at the top of the sketch (current value is .jpg, but you're free to use .gif, .png and others)
• Also, make sure that these are at least the same sizes across the board for a smoother time!

Once you've changed those values and added the image strings to your sketch, it will automatically convert them all to usable images without you having to do anything else.  Accessing your own images from within the sketch is super easy, for example:

1. images[0] is your first image
2. images[1] is your second image
3. images[2] is your third image
4. etc, etc, etc

Therefore...

• imagePaste(images[2], blank, "brightness", 'lt', 200, img_width, img_height) will paste pixels from image 3...
• imageSmear(images[4] 'blue', 'lt', 100, img_width, img_height) will smear image 5...
• show(images[1] will display image 2, and so on.

If you enjoyed this tutorial, there will be many more to come!