taylorthesis-blog - Tumblr blog

[taylorthesis-blog]

Thesis Final Outcomes

Music Visualizer 

Interactive - 

1. Star Sketch

2. Rotation

Link to slideshow of all sketches 

[taylorthesis-blog]

Here is an easier link regrading my parametric equation sketch. 

[taylorthesis-blog]

Parametric Equations

Parametric Equations is much like a regular equation meant to solve but instead is a pair. One for X, and one for Y. The third variable is T which is the parameter. 

An example of this is y = 3t + 3

When we plug in values of t, we get out both values of x and y and then we can plot out the value of x and y on the coordinate plane.

This allows you to generate different types of curves. We can represent our parametric equation in processing by methods. Method X is gonna return a float (decimal #) and a s a parameter it’s going to accept a float. We do the same for HereY.

Here I’ve drawn a point in the center of the screen using and parametric equation, but what I want to do to visualize the parametric equations is to change our value of t over time. So every time the draw method is called, the point will be drawn at the current x and y coordinates and then t will be incremented. 

So now I create a variable for t, and then we can pass in that variable for those two methods. After the point is drawn, we can increment t by 1.

to make the line move I return t instead of 0, for out x and y position and it causes the line to start moving. 

There are multiple lines being drawn but until I clear the canvas they remain stacked. Using cosign and sign inside of these methods will create more visual variation

When I divide t, I’m lowering the frequency of the sine wave. When I multiply t I increase the frequency. 

I can create more interesting effects by layering sine and cosin on top of each other by adding on top of them, for example adding another sine wave on top of the first one and giving it different coefficients.

If I increase the amplitude of the second sine wave I get more wild shapes. 

Here I increased it to 100. This is the output

Now instead of drawing points I’m going to draw lines that connects the first parametric equation to the second parametric equation.

The movement of the visual is getting better but the lines are still stacking on top quite a bit.

In order to get the lines to move in a trailing effect without having the lines stack on each other so much, I’m going to add a for() loop. I create an integer called NUM_LINES and place that in the for loop to get incremented. To prevent the lines from stacking so you can’t see more than one, I add that I integer into the line function and add it to t.

The lines are now swirling in a figure 8 movement. 

I will attach a dropbox file of the code here for viewing.

The key to creating interesting movement and visuals is to keep playing around with parametric equations.

[taylorthesis-blog]

Update

In processing I have come come across a lot of difficulties with music analysis. 

For my thesis show I am readjusting my final outcome, and instead will be creating additional processing sketches that don’t use FFT spectrum analysis.

I’m going to convert these multiple sketches into GIFs and put them on a loop  as well as a process break-down book of what I have learned in this venture of coding. 

[taylorthesis-blog]

Just adding some progress on my music visualizer. I’ve developed two patterns I want to use for one of the 5 sketches I’m making. I will be changing minor aesthetic choices and it will be more unified in the end but for now I was just experimenting with color

the lines pulsate from the middle

Here is the link 

[taylorthesis-blog]

Following the last sketch here is a more intricate visual, the lines are shifting left to right on 2 circles, one plotted inner and one plotted outer. As they shift direction a pattern unfolds. 

the code ^^^^

[taylorthesis-blog]

Using the polar coordinate system I created my first practice sketch. 

These lines are moving in a circle for a middle point and depending where the mouse is the rotation follows. 

Link to the dropbox file 

[taylorthesis-blog]

Cartesian 2D Space & Polar Coordinates

The polar coordinate system is a two-dimensional coordinate system in which each point on a plane is determined by a distance from a reference point and an angle from a reference direction.

Polar coordinates are useful for expressing the position of a point in space as an angle around an origin and the radius of that origin. 

In processing we can’t use polar coordinates directly but using trigonometry we can express the polar coordinates R, theta, into Cartesian Coordinates (x,y) by calculating the lengths of each side of a right triangle formed by the x length, the y length and the radius of as the hypotneuse. 

x = radius * cos(theta)

y = radius * sin(theta)

Using this system I map visuals in a radial format. 

[taylorthesis-blog]

3D shapes

With the shapes I want to use in my visualizer in mind,  I drew my first 3D shape in processing. 

Stills of the rotation

[taylorthesis-blog]

This sketch is practice to practice for() loops / nested loops. 

A nested loop is a loop within a loop, an inner loop within the body of an outer one. How this works is that the first pass of the outer loop triggers the inner loop, which executes to completion. Then the second pass of the outer loop triggers the inner loop again. This repeats until the outer loop finishes. Of course, a breakwithin either the inner or outer loop would interrupt this process.

[taylorthesis-blog]

This week I made a visual prototype that interacts with the user. I was really interested in the way the processing sketch I posted last week worked so I decided to make it. Basically, the mouse responds in an x axis direction and controls the speed of the stars depending on the position the mouse is in. I want my final “sketches” (idk what else to call them in processing to be inside of a space-like field. Although it may not like seem like a lot there was a lot of code in this. My next move in the process is to figure how to patterns in this type of space (like my last sketch) and to get the patterns to respond to frequency.

Link to file

[taylorthesis-blog]

This week I ran into some technical troubles with my prototype but I I do have a few working sketches. I’m not really sure how to show the prototype, but I’m going to attach a dropbox link that shows the file. Link

With much thought I am thinking of shifting the focus of my thesis from scheduling an event and hosting it to creating a working visualizer and making the focus learning this new program. I still want to learn how to make a generic music visualizer that people can participate ( via hosting it on the web or some kind of platform.) but without the event. I would like to talk to you about this in person on Wednesday.

I have only learned how to plot things linearly and tomorrow Professor Nelson is going to show me how to plot nonlinear shapes. Also we plan to go over the code of two processing visuals I’ve found and start applying it to my own visualizer.

Here is the link

[taylorthesis-blog]

This week I began composing a technical prototype. First I drew some simple 2D shapes on paper to map simple concepts that I could draw in Processing. Then I drew those 5 sketches in processing.

this sketch toggles the ball left and right

I’m trying get the foundation of drawing shapes in Processing.

Finally I started looking on this website to see what visual styles I like and then looking through their codes to see what libraries and functions they use in their code.

[taylorthesis-blog]

This week i implemented some sketches and learned about analog output, mapping values, servo motors, using built-in libraries, and discovered how to output soundwaves off a piezo element ( electrical component that can be used to detect and vibrations and create noise) by calibrating analog sensors.

Please click this in each section to see the video in dropbox.

In this sketch, i used a tri color LED ad 3 phototransitors to create a “lamp” that smoothly changes colors depending on external lighting conditions. We use PMW (pulse width modulation) to rapidly turn the output pin high and low over a fixed period of time. The rapid change simulates a change in voltage. This is similar to the way movies work quickly flashing imagery to simulate motion. Then by using phototransitors for input, they generate a current proportional to the quantity of light absorbed. In the video, watch my hand cover and uncover certain phototransistors, to see change in color of the LED. RGB is divided between the 3 phototransitors.

In this sketch, i worked with a servo motor which is a motor that doesn’t spin all the way around but moves to a specific position until you tell them to move again. PMW tells the motor what angle to move to depending upon a number of pulses that is sent to them. This is where built in libraries come in, it is necessary to repurpose values by mapping them from one scale to another. The potentiometer (turning knob) is a variable resistor with 3 pins. The external sides are connected to a positive and negative charge, and the middle leg is used to give the difference in voltage as you tun the knob. This is used to control the servo motor.

Finally in this sketch i used a phototransistor and a piezo to make a light based theremin. A theremin is an instrument that makes sounds based on the movement of a musician’s hand around the instrument. Traditional theremins detect a performer’s hands in relation to two antennas by reading the capacitive change on the antennas. These antennas are connected to analog circuitry that creates sound. In this sketch I used a light theramin, so that means instead of measuring capacitance I’ll be using a phototransistor to detect the amount of light. By moving my hands over the sensor, I can change the amount of light that falls on the photoresistor’s face, and the change in voltage on the analog pin will determine what frequency note to play. Notice in the video the change in sound when i cover or add additional light to the photoresistor.

Besides this I am still studying more about the sketching online shapes and syncing them to sample sounds. Also I have been learning and creating a book of function references and terminology to help me in the long run.

As for my list of deliverables I’m thinking

Technical Prototype. -basically a preliminary mock up showing the capabilities of code and sound synchronization. Proposed date – Feb 27

2. Visual Language identified – in this prototype i will show the types of forms and sounds I plan to work with in my final deliverable. Proposed date – March 12

3. Branding clarified – finding an identity and creating logo and website for music visualizer. Proposed date – March 27

4. Cleaning and find tuning – make whatever fixes, clean up, or additional aspects added to final outcome – April 3

5. Event hosted & documented – Between April 10th – April 17th

6. Thesis Show – May 3 I will provide headphones and a screen so participants can hear and see my visualizer.

I would like to run this by the teacher I am working with for my independent study just to be 100% positive on the dates and I should have that set by Tuesday February 19th.

[taylorthesis-blog]

FFT Spectrum

Sound visualization can go one of two ways, measuring frequency or amplitude.

FFT Spectrum is used to analyze a stream of sound. 

A fast Fourier transform (FFT) is an algorithm that computes the discrete Fourier transform (DFT) of a sequence, or its inverse (IDFT). Fourier analysis converts a signal from its original domain (often time or space) to a representation in the frequency domain and vice versa.

These are some of the algorithms that you would include in a sketch using the FFT class to analyze a stream of music. 

---------------------------------------------

Before Setup

import processing.sound.*; 

SoundFile sample; FFT fft; 

Declare the sound source and FFT analyzer variables

int bands = 4;

Define how many FFT bands to use (this needs to be a power of two)

float smoothingFactor = 0.2;

Define a smoothing factor which determines how much the spectrums of consecutive. Points in time should be combined to create a smoother visualisation of the spectrum. A smoothing factor of 1.0 means no smoothing (only the data from the newest analysis is rendered), decrease the factor down towards 0.0 to have the visualisation update more slowly, which is easier on the eye.

float[] sum = new float[bands];

This creates a vector to store the smoothed spectrum data in.

In Setup

sample = new SoundFile(this, "beat.aiff");  sample.loop();

Loads, plays a soundfile and loops it.

 fft = new FFT(this, bands);  fft.input(sample);

Creates The FFT analyzer and connects soundfile to it.

In Draw

fft.analyze ();

Performs the analysis. 

for (int i = 0; i < bands; i++) {sum[i] += (fft.spectrum[i] - sum[i]) * smoothingFactor;

Smooth the FFT spectrum data by smoothing factor. For loops control a sequence of repetitions. A for structure has three parts: init, test, and update. The loop continues until the test evaluates to false. When a for structure is executed, the following sequence of events occurs:

1. The init statement is executed 2. The test is evaluated to be true or false 3. If the test is true, jump to step 4. If the test is False, jump to step 6 4. Execute the statements within the block 5. Execute the update statement and jump to step 2 6. Exit the loop.

[taylorthesis-blog]

3

Using my Arduino (microcontroller) I worked with analog input using a serial monitor to measure things like temperature. The black (half circle) sensor measures how warm your skin is and outputs a changing voltage depending on the temperature it senses.

When placing your finger on the sensor you can visibly see the change in value, volts, and temperature.

Arduino uses it’s own syntax, and building small projects with analog or digital input helps familiarize some of the general aspects of creating reactive elements.

[taylorthesis-blog]

2

This week I started conceptualizing and recording visual sketches in a book based off music i listen to and wanted to include in my thesis. I thinking about depth and form in relation to sounds and frequencies that I hear, and how they relate to each other.

I started an independent study with Aaron Nelson and enrolled in his mechatronics class, as a foundation behind my independent study. I made this device in DDF this week, which may be the beginning stages of a possible device that could control and sync my code to generated images.

David Shiftman runs the Youtube channel The Code Train and I’ve begun watching his videos so I can start understanding the language around javascript.