Images and Blend Modes

Working With Media

Working With Media - Overview

Blending Images Challenge

Understand how to load and blend images
Image Grid Challenge

Store several images into arrays
Image Walker Challenge

Get color values from your images

Working with Images in P5.js

Images in P5.js can be treated in a similar manner to any of our other functions that draw to screen. Before we start working with the image funciton we also need to understand how to load images into our sketch.


                let img;

                // The preload funciton is the same as any other function like it
                function preload() {
                  // This url fetches us a unique image every time we reload from unsplash.com
                  img = loadImage('https://source.unsplash.com/400x400/?tech');
                }

                function setup() {
                  createCanvas(windowWidth, windowHeight);
                  // Uncomment this for the image to have coordinates in the center
                  // imageMode(CENTER);
                }

                function draw() {
                  // Top-left corner of the img is at (0, 0)
                  // Width and height are the img's original width and height
                  image(img,mouseX,mouseY);
                }

Preload Function

In JavaScript, may run at the same time in the main program flow. We call this asynchronicity in programming. In p5, for example, when we use loadImage in setup, the browser begins the process of loading the image but skips onto the next line before it is finished loading. This trait of javascript allows us to have our websites load faster by start these slower processes and continuing with our program. A practical example of this in action is how websites will display text and load their styles often before images are loaded completely. In this example the image will load to late leading to nothing being rendered to screen. We use the preload funciton to ensure that these slower processes are finished first before we start using them in the setup or draw.


                  let img;
                  function setup(){
                    createCanvas(windowWidth, windowHeight);

                    // Here we are filling our img varaible with an image 
                    // using the load image funciton
                    img = loadImage('https://source.unsplash.com/400x400/?tech');
                    noLoop();
                  }

                  function draw() {
                    background(230);
                    // Here we are filling our img variable with an image 
                    // using the load image function
                    image(img,mouseX,mouseY);
                  }

Preload Function

In this example we use the preload function, this ensures that all processes are complete before proceeding with running our setup and draw funcitons. This ensures that we have the image loaded and ready to display when we as for it later in the program. We can apply this function to any time we need to load any larger assets.


              let img;

              function preload() {
                // Here we are using a function called loadImage()
                img = loadImage('https://source.unsplash.com/400x400/?tech');
              }

              function setup() {
                createCanvas(windowWidth, windowHeight);
              }

              function draw() {
                background(230);
                // This image function will call for the img variable which will not be ready
                image(img,mouseX,mouseY);
              }

Unsplash API

In our examples we are doing a very simple API (Application Program Interface) call to request an image from unsplash.com which returns to us a random image based on our specifications. If we look at the simple API documentaiton we can see how to specify what size, which user and search terms of an image.

Unsplash API Documentation


          // This url will return us an image which is 400 by 400 
          // and has a search term of 'tech'
          // Try pasting this into your browser
          https://source.unsplash.com/400x400/?tech

Image Width and Height Atrributes

We can ask P5.js what is the size of our images that we have saved into varaible. For instance, if we are getting random images from our unsplash API we may want to know what size it is.


              let img;

              function preload() {
                // This will return to us a random size tech image
                img = loadImage('https://source.unsplash.com/featured/?tech');
              }

              function setup() {
                createCanvas(windowWidth, windowHeight);
              }

              function draw() {
                // Width and height are half the image's original size
                image(img, mouseX, mouseY, img.width/2, img.height/2);
              }

Blend Mode

We can apply blend modes to make significant changes to how each pixel is drawn to the canvas. Here we can see in the example the image switch between no blending and blendMode(DIFFERENCE);.

Blending Images Challenge

Here

Image Grid Challenge

Here

get function

We can ask for color data of our images by using the get function.


              let img;

              function preload() {
                img = loadImage('https://source.unsplash.com/featured/?tech');
              }

              function setup() {
                createCanvas(windowWidth, windowHeight);
              }

              function draw() {
                background(230);
                noStroke();

                image(img, 0, 0);

                // Here we are asking for the color values at our mouseX and mouseY
                let scannedColor = img.get(mouseX, mouseY);

                // Here we apply our new color value to an ellipse which follows our mouse
                fill(scannedColor);
                ellipse(mouseX,mouseY, 100);
              }

Image Walker Challenge

Here