Tina & Alice: Flicker of Dreams Yanny & Yitong: Infinity Gauntlet Lynelle: Santa’s Elves Tiri: EverWear Garment Yancy: Cosmic Clash Jonathan & JingJing: Space Hunters Chris & Tim: Ultrasense – Sonic Pentagon Constance: Box of Calm Cynthia: Hanabi Taikai with you Noctis: Parenting your child for you Ella: Decisive Moments in History
This week, we will be creating a kinetic sculpture using digital fabrication tools.
Such sculptures use movement as their basic element to create works of art.
To make your own kinetic sculpture using digital fabrication methods you will first need to design your parts with computer-aided software (CAD). In this case, you will use cuttle.xyz which is a 2D vector software optimized for laser cutting. Watch the 4 mintue tutorial on cuttle!
Work together with a partner to build one sculpture. Each one of you will design half of the parts. At the end of the recitation you should end up with something like this:
Step 1.1: Stand design
In cuttle, go to Units & Settings to change the inches into millimeters.
Student A
Student B
.
Start by creating a new document and activating the “Grid snapping” option in the toolbar at the top of your canvas. This will help you place components accurately on the grid.
Drag a rectangle a place it in the origin.
Resize to 80 mm wide and 120 mm tall.
Select the rectangle and add a round corner modifier. Add a 3 mm radius rounded corner.
Drag another rectangle size 40 mm wide and 2.8 mm tall (2.8 mm is the thickness of the material we will cut). Place it on the right side edge of the first rectangle you placed and -17.5 mm on the Y axis. This rectangle will create a slot for 2 pieces of wood to intersect with each other and create the stand.
Select both rectangles and perform a “Boolean Difference”. This allows you to subtract one shape from another.
Drag and drop a rectangle based on the servo dimensions measured by your partner.
Select both objects and center-align horizontally as shown in the gif below. Position at Y -100 mm.
Drag and drop a circle based on the servo’s screw hole diameter. Adjust the position as shown in the gif below. Copy the hole to the other side.
Select all the lines of your design, right-click and select Group (⌘G / Ctrl+G)
You have now finished the stand design.
Start by creating a new document and activating the “Grid snapping” option in the toolbar at the top of your canvas. This will help you place components accurately on the grid.
Drag a rectangle a place it in the origin.
Resize to 80 mm wide and 60 mm tall.
Select the rectangle and add a round corner modifier. Add a 3 mm radius rounded corner.
Drag another rectangle size 40 mm wide and 2.8 mm tall (2.8 mm is the thickness of the material we will cut). Place it on the right side edge of the first rectangle you placed and -17.5 mm on the Y axis. This rectangle will create a slot for 2 pieces of wood to intersect with each other and create the stand.
Select both rectangles and perform a “Boolean Difference”. This allows you to subtract one shape from another.
Measure the width and depth of the blue servo motor in your arduino kit.
Measure the servo screw hole diameter and its distance from the inside edge.
You have now finished the stand design.
Together your design should look like this. After the second part of the design is completed, you will merge your files together.
Step 1.2: Pattern design
Here is where you get to be creative. Each one of you will design a pattern that when put together will create an interference visual effect. Same as you did during the cuttle.xyz intro tutorial, create a circular pattern of 120 mm in diameter. Feel free to experiment with the tools and shapes until you come up with something interesting. For a more interesting effect, students A and B should design patterns going in opposite directions.
*Tip: Use the canvas origin point to easily create the circular pattern. If necessary move the previous objects away.
Here is a reminder of the commands used in the tutorial:
Create a shape (try using 1 or multiple paths) ->
Rotational repeat (the more repetition the better the effect) ->
Outline stroke ->
Select pattern, right-click, and Group (to make it easier to move around)
Tip: You can use the Pen tool to create lines. You can make a curve with the handles of the pen.
Alright, you are almost done with the design. To finalize you need to find a way to mount the circular patterns.
One of them will be attached to the stand and will be static with a square cut-out (32.5 x 12.5 mm) for the servo to go through.
The other one will be attached to the shaft of the servo which will move it in a sweep motion. For that create a circle diameter 4.5 mm.
Decide who will make the moving/static part and add the additional features in your design that will allow you to mount your patterns. The implementation should look something like this:
Step 1.3: Export your design
File -> Export SVG
Create a new folder with your names in this Google Drive and add both of your files.
Step 2: Laser cut
Once you and your partner have finished Step 1, you can now laser cut your parts. For this recitation, you can just go directly to the fabrication lab in 823 but remember that you will need to
Come to the front table to laser cut before the recitation ends.
Come to Office Hours this Friday, November 25, at 3 pm to 823.
Assemble your stand with the servo and the circular patterns. You also may need to add a screw to keep everything together. Connect the servo wires to your Arduino with the File > examples > Servo > Sweep example. You should now be able to contemplate the result of both of your designs overlapping each other!
Documentation
Make sure you document the design and fabrication of the entire process.
Step 1: Connect the NeoPixel Led strip to your Arduino like shown on the diagram below:
The NeoPixel strips we use at IMA have is 1 meter long and contains 60 LEDs. For this amount of LEDs, you can connect directly to the Arduino 5V pin and supply all the current necessary. However in the future, if you work with more than that you might need an additional power source to light up all the LEDs. More info on that here.
Step 2: Download the library. Just in case you didn’t do this step in class, to control the NeoPixel strip we need to download the FastLED library. To do so go to: Sketch -> Include library -> Manage libraries.
Inside the new library manager window search bar type: fastLED and click Install.
Step 3: Test the NeoPixels to make sure they are working correctly. You can do that with the example FastLED/Blink. Remember to change the DATA_PIN to the number of the pin you connected the cable to the Arduino board (3 in the diagram we provided you).
Task #2: Use your computer to light up NeoPixels
Step 1: Install the SerialRecord library. Similarly to the step you installed for the LEDs. Select from the menu Sketch -> Include library -> Manage libraries, and input SerialRecord. (kudos to Oliver Steele for providing the library)
Step 2: Program your Arduino using the code we used in class, you can copy it from here: IxLab_recitation7_ARDUINO.ino
Make sure you test your code using the Serial Monitor. This program receives four values, so you will need to send them in a Comma Separated Value protocol (CSV). The first parameter will indicate the pixel number, the second the content of red color, then green, and last blue. For example, to turn the second pixel purple, you need to send 1 the values of 255, a 0 for the second value, and a 100 last, you should input in your Serial Monitor: 1,255,0,100
Remember you might need to press Enter, Return, CMD + Enter, or CTRL+ Enter.
Step 3: Program your Processing sketch using the code we saw in class, you can copy it from here: IxLab_recitation7_PROCESSING.pde
Remember to close ALL the Serial Monitor windows you might have opened. Otherwise, it won’t run and it might show an error of “PORT BUSY”. Similarly, you won’t be able to program Arduino while you have any Processing sketch running.
Task #3: Add Music!
Step 1: Download this sketch which plays an audio file (located in the data folder) and analyzes the amplitude. Replace beat.aiff with a song you like.
Step 2: Modify this sketch so that it creates a visualization on the screen AND on the NeoPixel strip. For this, you want to merge code from the Processing sketch from Task into #2 into the current one. Embrace your inner VJ!
Step 3: Add different light effects for the song you have chosen. You can use millis() in Processing to know how long you have been running your sketch. You can use the following sample to do that:
long t = millis();
if (t < 1500) {
background(155);
} else if ((t>=1500) && t<3000) {
background(255);
} else {
background(55);
}
Step 4: Have fun with your music visualization! Challenge yourself to add ‘for’ loops, different color visualizations, and finding ways that effects with the NeoPixels complement what is happening with the screen. Tip: you can use the FFT Analysis to let the colors react to the pitch of the music.
Documentation
Document each task thoroughly, including taking a video. Describe your visualization and record the changes you made to the sample code from Task 3. Upload everything to the documentation blog.
In this recitation, you will work individually to explore using physical controllers to modify the way in which media is being (dis)played. Reflect on this week’s classes to guide you in your coding process and think about how you can incorporate interactivity and computation into this week’s exercises.
Today’s task: Media controller Create a Processing sketch that controls media (image or video) by manipulating that media’s attributes using a physical controller made with Arduino. For the serial communication, use the examples of the SerialRecord library as a starting point (e.g. SendMultipleValues on the Arduino, and ReceiveMultipleValues on the Processing side).
Arduino:
For the physical controller, incorporate digital and/or analog input via your Arduino. These inputs should manipulate the media in your Processing sketch by serially connecting Arduino to Processing and sending your Arduino’s inputs as values to Processing. The relationship between the Arduino input controls and the Processing media manipulation should have a clear correlation (i.e. the ultrasonic ranger to adjust an analog value, like video speed or image size).
Consult the slides from class 22 and class 23 to learn about the different methods available for manipulating how images and videos are being played back or displayed. More information, including examples, can be viewed on the Processing website: Image, Video.
If you do not have authorship over the media that you use for this exercise, make sure you credit the source. Here are a few resources for public domain and creative commons sounds, videos, and images. You can use those for this recitation, don’t forget to credit the source:
Document your work on your blog, detail how your process of building the circuits and writing the code went. In addition, upload a video of your exercises in action. Any success? Any failures? What did you learn?
Each and one of us as a unique and distinctive voice. Your voice starts down in your lungs where air is exhaled to create an airstream across the larynx which vibrates. The vibrations make sound waves that travel through your throat, nose, and mouth. The size and shape of these structures create the pitch, loudness, and tone of your voice. This voice is your unique gift to the world and it is amazing, believe in its power and express yourself!
Inspired by the work from thedotisblack, we will use Fast Fourier Transforms (FFT) to analyze the frequency and amplitude of our voice and create its unique visual interpretation.
The “Fast Fourier Transform” (FFT) is an important measurement method in the science of audio and acoustics measurement. It converts a signal into individual spectral components and thereby provides frequency information about the signal. Source: Nti-audio
Sound of EARTH – AURORA BOREALIS 1 | SOUND OF SPACE (Procedural art made with code, FFT Processing)
Step 1.
Begin by opening a new sketch in Processing. We will add the Sound library and declare the necessary functions and variables.
import processing.sound.*;
// Declare the sound source and FFT analyzer variables
FFT fft;
AudioIn mic;
// Define how many FFT bands to use (this needs to be a power of two)int bands = 1024;
// Define the bands wanted for our visualization. // Above a certain threshold, high frequencies are rarely attained and stay flat.int bandsWanted = 128;
// Create an array to store the bands wantedfloat[] spectrum = newfloat[bandsWanted];
Next we will establish the setup to make sure our microphone and FFT function are correctly assigned.
voidsetup() {
background(255);
size(600, 600);
// Create the AudioIn object and select the mic as the input stream
mic = new AudioIn(this, 0);
// Start the input stream without routing it to the audio output.
mic.start();
// Create the FFT analyzer and connect it to the sound input
fft = new FFT(this, bands);
fft.input(mic);
}
Inside the draw() function, we proceed to perform the FFT and draw a simple line representation of the sound from the microphone input.
Note: At the moment, the values for the lines spacing and height are hardcoded to match this sketch. We will modify these later to be responsive no matter the size of our window.
voiddraw() {
background(255);
// Perform the analysis
fft.analyze(spectrum);
//Here we are reversing the spectrum array in order to get the higher frequencies on the right edge of canvas.
spectrum = reverse(spectrum);
pushMatrix();
//Translating the position to start drawing in the middletranslate(width/2, height/2);
//Drawing a line for every frequency of the spectrumfor (int i=0; i<bandsWanted; i++) {
stroke(0);
line( i*2, 0, i*2, -spectrum[i]*1000 );
}
popMatrix();
}
When you run the sketch and if all went well you should see something like this. Give it a try and say something !
Step 2.
We now need to refine the code and find a way to make that linear FFT rotate around the center of the window.
For that we will declare 4 additional variables at the top of our sketch. One for the gap in between each frequency, another 2 for the position and spinning speed, and the last for the duration of the event.
To make the gap in-between lines responsive, we need assign the values according to the half-width of the windows divided by the amount of frequencies we are displaying. We can do so in the setup() like shown below.
gap = (width/2) / (float)bandsWanted;
Now we can adjust the line function inside draw() to make use of this variable.
line( i*gap, 0, i*gap, -spectrum[i]*1000 );
Rotating
Let’s assign in setup() to the variable “duration” the value 10, which in this case represents the number of seconds.
duration = 10;
We want our FFT visualizer to rotate 360 degrees in that period of time. We also know that by default, processing works at 60 frames per second. So, we need to know how many degrees to rotate for each frame knowing that the entire duration is 10 seconds.
In setup() , we assign to “spindSpeed” the following formula:
spinSpeed = radians(360) / (duration*frameRate);
Now that we have determined the amount of degrees to rotate each time, we can add-assign that value to our “position” variable and use a push and pull matrix to make the transformation.
We also need to add an if () statement that will stop the drawing after the 10 seconds have elapsed.
In draw(), replace everything the for loop by the block of code below:
pushMatrix();
//Translating the position to start drawing in the middletranslate(width/2, height/2);
position += spinSpeed;
rotate(position);
if (frameCount <= duration*frameRate) {
//Drawing a line for every frequency of the spectrumfor (int i=0; i<bandsWanted; i++) {
stroke(0);
line( i*gap, 0, i*gap, -spectrum[i]*1000 );
}
} else {
noStroke();
}
popMatrix();
The last step is to comment the background() function in draw() to keep the trail of the FFT.
//background(255);
You should have something like this:
Step 3.
It is now time for you to manipulate the code and customize your voice portrait. You can try to experiment with different shapes such as rectangles or circles, adding color depending on the spectrum frequencies position or amplitude, changing the opacity, changing the amount of frequencies displayed or anything else that comes to your mind.
Note: Pay attention to the value highlighted in orange which multiply the amplitude of each frequency. You might want to decrease this value to 100 for example for a more subtle effect.
line( i*2, 0, i*2, -spectrum[i]*1000);
The final outcome may look something like this:
Other things you can: Album Cover
Using the same technique as with the Voice portrait, create an album cover of one of your favorite songs. For this, you will use a SoundFile.
sample = new SoundFile(this, "song.mp3");
You will also need to change the speed of rotation according to the duration of the song.
Hint: you can use the function sample.duration()
Working individually, you will integrate the coding elements from this week’s classes to create an interactive animation in Processing. When you are done, screen-record a video of it.
You may animate your creation from Recitation 5, or draw and animate something completely new. Regardless of what you choose to animate, your Processing sketch should include a combination of at least 2 of these parameters:
Variables
Conditionals
Loops
Some level of interaction (i.e. keyboard or mouse).
Here are some animations you can get inspired by or you can try to replicate as many as you can.
Documentation
Upload the screen recording (video) of your interactive animation along with your code (copy-as-HTML) to the documentation blog. Write some comments about what you learned during this recitation, for example, list the most interesting functions you used or what you struggled with. Be thorough so that you can refer to these notes in the future.
Additional Homework
For each of the steps below, create a Processing sketch that satisfies the criteria in the description. Take a screenshot and a screen recoding video of the sketch after running it, and upload this to the blog along with your recitation exercise documentation.
Step 1
Create a Processing sketch with a circle or square at the center of the screen. Your canvas size should be 600 x 600.
Step 2
Next, modify that Processing sketch so that the circle or square periodically expands and contracts, like the circle in this gif.
Step 3
Then, modify the Processing sketch so that the outline changes color smoothly, as seen in the gif below. HINT: set the colorMode() to HSB.
Step 4
Finally, modify that Processing sketch so that the circle or square moves around the canvas based on your keyboard’s arrow key input.
As an added bonus, you may make your canvas’ edges a border that the circle or square cannot pass.
You can work on the assignment on your own, or join one of the Rainbow Study Sessions hosted by our amazing LAs to learn how to make this!
