Inspiration
https://www.youtube.com/watch?v=7ilUiSLaJQo
More About Images
The map() function
Sound (Using the Sound Library)
Examples
Fade Between Images Using map() and tint()
// how to fade between two images using
// map(); and tint();
let img;
let img2;
let opacity;
function preload(){
img = loadImage("left.jpg");
img2 = loadImage("right.jpg");
mic = new p5.AudioIn();
}
function setup() {
createCanvas(640,640);
}
function draw() {
background(0);
opacity = map(mouseX, 0, width, 0, 255);
tint(255,opacity);
image(img,0,0,width,height);
tint(255,255-opacity);
image(img2,0,0,width,height);
text(mouseX + "," + opacity, mouseX, mouseY);
text("Move the mouse from left to right to fade between images", 50,50);
}
Using the Sound Library
let img;
let opacity;
let mic;
let micLevel;
function preload(){
img = loadImage("right.jpg");
mic = new p5.AudioIn();
mic.start();
}
function setup() {
createCanvas(640, 640);
}
function draw() {
background(0);
// get the audio level
micLevel = mic.getLevel();
// map the values
opacity = map(micLevel, 0, 0.1, 0, 100);
let eSize = map(micLevel, 0, 0.1, 10, 300, true);
let x = map(micLevel, 0, 0.05, 50, width-50, true);
// image
tint(255-opacity,255,255-opacity);
image(img,0,0);
//shapes
fill(opacity,0,100,100);
noStroke();
ellipse(width/2-120,140,eSize);
ellipse(width/2+5,120,eSize);
ellipse(width/2+125,135,eSize);
fill(0);
text("Open in OpenProcessing to see the sound interaction", 50,50);
}
Random Walker
Multiple Random Walkers Using Arrays and the for() Loop
Coding Challenge
- Load an image
- In the setup function, create a bunch of coordinates in random locations
- Store the color of the pixel of the image for each point
- Start moving the points in the draw function
- The example below only uses 1000 ellipses to make it run a bit faster on this website with all the other sketches