PFVA:004 – Arrays, for() Loop, Sound Library

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