Beat detect & image loading DSDN 142 Creative Coding
Beat detect
import ddf.minim.*; import ddf.minim.analysis.*;
So far we have learnt how to create sound, play it and possibly manipulate it a little. We can extend the possibilities of interaction and synchronisation by using a beat detect object.
Minim minim; AudioPlayer song; BeatDetect beat;
Beat detect opens many possibilities in terms of dynamic audio-visual applications. When used well it can give life to an otherwise artificial animation, when misused can just be a lazy way to achieve movement in an underdeveloped applet. The example given here highlights the basic beat detect code. This example pulses a white background at every beat, but can be used for infinitely more interesting purposes. The blue code shown is the necessary beat-detecting code, whilst the red code can be replaced with almost anything.
Exercise 1 Modify this code draw a red circle when a beat is detected, at the position of the mouse cursor.
void setup(){ size(400, 400); noStroke(); background(255, 0, 0); minim = new Minim(this); song = minim.loadFile("mySong.wav"); song.play(); beat = new BeatDetect(); } void draw(){ fill(0, 10); rect(0, 0, width, height); beat.detect(song.mix); if (beat.isOnset()){ fill(255); rect(0, 0, width, height); } } void stop(){ song.close(); minim.stop(); super.stop(); }
Beat detect & image loading DSDN 142 Creative Coding
Solution 1 import ddf.minim.*; import ddf.minim.analysis.*; Minim minim; AudioPlayer song; BeatDetect beat; void setup(){ size(400, 400); noStroke(); background(255, 0, 0); minim = new Minim(this); song = minim.loadFile("mySong.wav"); song.play(); beat = new BeatDetect(); } void draw(){ fill(0, 10); rect(0, 0, width, height); beat.detect(song.mix); if (beat.isOnset()){ fill(255, 0, 0); ellipse(mouseX, mouseY, width/4, height/4); } } void stop(){ song.close(); minim.stop(); super.stop(); }
You could even replace the code with a call to a custom function you have written!
Beat detect & image loading DSDN 142 Creative Coding
Beat detect part 2 In the next way that beat detect can be used (code in blue text) we are able to track different frequency ranges in the audio track, which unless changed default to the typical range for the kick drum, snare drum and hi hat. The number 2048 after the audio track name in loadFile and the song.bufferSize() and song.sampleRate() in the brackets where the BeatDetect object is created set up the buffer size and sample rate to be used. You do not need to pay much attention to these for now – just including them in the code is enough. You can find out more about these at the Minim website if you are interested. The line beat.setSensitivity(300) determines how long BeatDetect will wait after detecting a beat before looking for the next beat. This is measured in milliseconds, and can be configured by you to better match your audio track if needed. Within draw, isKick(), isSnare() and isHat() are used like isOnset() was in the previous example, except this time we are looking for beats in three different frequency ranges. The end result of this code is three coloured circles that pulse when a beat is detected. The red circle detects the kick, the green the snare, and the blue the hi hat.
import ddf.minim.*; import ddf.minim.analysis.*; Minim minim; AudioPlayer song; BeatDetect beat; float kickSize, snareSize, hatSize; void setup() { size(512, 200); minim = new Minim(this); song = minim.loadFile("mySong.wav", 2048); song.play(); beat = new BeatDetect(song.bufferSize(), song.sampleRate()); beat.setSensitivity(300); kickSize = snareSize = hatSize = 45; } void draw() { background(0); fill(255); beat.detect(song.mix); if ( beat.isKick() ) kickSize = 65; if ( beat.isSnare() ) snareSize = 65; if ( beat.isHat() ) hatSize = 65; fill(255, 0, 0); ellipse(width/4, height/2, kickSize, kickSize); fill(0, 255, 0); ellipse(width/2, height/2, snareSize, snareSize); fill(0, 0, 255); ellipse(3*width/4, height/2, hatSize, hatSize); kickSize = constrain(kickSize * 0.95, 45, 65); snareSize = constrain(snareSize * 0.95, 45, 65); hatSize = constrain(hatSize * 0.95, 45, 65); } void stop() { song.close(); minim.stop(); super.stop(); }
Beat detect & image loading DSDN 142 Creative Coding
Images Like beat detect, using images in processing is a double edged sword, While opening many fantastic generative avenues it also creates a very real possibility of taking the easy way out; Creating images using conventional means and just using processing to make minor changes, or additions. Used well, however, images can form the seed from which an application can grow and generate new outcomes.
Processing can display .gif, .jpg, .tga, and .png images, so make sure your image is in one of these formats, and put it into the data folder inside your sketch folder (you will need to create this folder if it doesn’t already exist). If you look up PImage on the Processing website, you will see all of the options you have with regards to using PImage. The ones we have used here are loadImage(), resize() and image(). After creating a Pimage variable to hold our image, we call loadImage() to load in the image we wish to display, using the image name and format within the brackets.
Next we called resize() to set the image to be the same size as the sketch window. You can set your image to whatever size you want with this line, or omit the line altogether if your image is already the size you want to display it at. (careful scaling the image size though, this often causes pixelation ) Finally image() is called within draw() to display the image to the screen. The arguments inside the brackets are the name of the variable we loaded our image into, and the coordinates of where the top left corner of our image will be on our screen.
PImage b; void setup(){ size(200, 200); b = loadImage("myImage.jpg"); b.resize(width, height); } void draw(){ background(0); image(b, 0, 0); }
Beat detect & image loading DSDN 142 Creative Coding
Exercise 2
PImage b; float position;
Modify this code: Load an image and resize it so that it fills up all of the screen vertically, but only half of the screen horizontally.
void setup(){ size(200, 200); b = loadImage("myImage.jpg"); b.resize(???, ???); position = 0.0; }
if the left mouse button is pressed, the image is displayed on the left side of the screen if the right mouse button is pressed the image displays on the right side of the screen.
void draw(){ background(0); image(b, ???, ???); } void mousePressed(){ if (mouseButton == LEFT) { position = ???; } else if (mouseButton == RIGHT) { position = ???; } }
Beat detect & image loading DSDN 142 Creative Coding
Solution 2 PImage b; float position; void setup(){ size(200, 200); b = loadImage("myImage.jpg"); b.resize(width/2, height); position = 0.0; } void draw(){ background(0); image(b, position, 0); } void mousePressed(){ if (mouseButton == LEFT) position = 0.0; else if (mouseButton == RIGHT) position = width/2; }