Arts

From mywiki
Jump to navigation Jump to search


EditDate 2021/08/13

Related Threads: Music

The prime example of complex order from chaos is the Arts wherever and however you perceive them.

Web References https://johnnywunder.info/mywiki/index.php/Arts

Music


EditDate 2021/04/22

Related Threads: Arts, Schrödinger equation

My muse is music.

Working on wave functions for incorporating Schrödinger equationWeb References https://johnnywunder.info/mywiki/index.php/Arts

Smoking on the Porch

Working on incorporating Schrödinger equation

Links

Reference Links 

Local WebContent
W3 Web Audio API Recommendation
Mozilla AnalyserNode
Mozilla Web Audio API
Apple HTML5 Audio Video Introduction
OLD Apple Playing Sounds
Have fun be free be safe be well.

Guitar Wand

If there's magic in the world it comes from new strings on a good guitar.

Service Items

Set-up

Setting up necessary toys.

Recording

+ Simple Working getMediaDevices

Tuning Ubuntu Studio

Distribution

Lightshow

I'm hesitating more than usual here.

Normally I'd be hacking up a program and then adapting it as I go to get what I want. Indeed that's how I started out creating and analyzing wav, riff and flac audio files. In the course of that I've closed on flac as my distribution and hope to do a javascript screen display directly from a flac file.

I do believe that is the right structure and format but got stuck there for one pretty solid reason. Looking at simple E string pluck how would you visualize it? A 7< second seemingly continuous sound geometrically decreasing in amplitude.

Let's simplify and assume it's pure exclusive 82hz recorded in 192,000 samples per second. Doing the math that means from pluck onward every 2341.4634146341 samples there's a high amplitude sample that is decreasing. Rounding off and keeping in mind pure exclusive pitch the other 2340 samples are dead quiet.

My initial take is I have 3 parameters to work with on the screen

  1. Location
  2. Brightness
  3. Color

which I'm leaning toward mapping

  1. Location streamed to screen sequentially as pixels wrapping at screen boundaries
  2. Brightness = amplitude sample with quiet 2340 0(no change)
  3. Color infra red and below ROYGBIV ultra violet and above mapped last recognized pitch from 0hz 20hz human hearing 22,000hz 192,000hz

Two things I cannot seem to wrap my head around are

  1. The sound though seemingly continuous and analog is belied by 2340 holes.
  2. What does someone or something whose hearing range is broader than mine hear?

Tuning

Technical

  1. Removed scrollbar as and eyesore
    body {
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: white;
      }

Visuals

Balancing the 192hz music and the screen refresh cycle is the next step. The screen refresh cycle will vary based on device running the browser which I have no control over. Leaning towrd defaulting to 60hz but not sure what that means yet.

Setting up tuning parameters in select.html. Currently the only working parameter is the number of circles.

Looking to restructure seeTheMusic.js to run everything on single pass draw so every animation draws everything.

Sinusoidal Functions

Bounce function 

From Libretext Calculus

Trigonometric Formula 

f(x)=Asin(B(x−α))+C

y2 calculation 

y2 = freqAmp.MaxAmp sin((key.width-key.x2Count+freqAmp.MaxFreq)/π)+key.y2Count

Want -π/2 = x = 0 and π/2 = x = key.width.



  1. Radian measure is defined such that the angle associated with the arc of length 1 on the unit circle has radian measure 𝜋π rad.
  2. For acute angles θ,the values of the trigonometric functions are defined as ratios of two sides of a right triangle in which one of the acute angles is θ.
  3. For a general angle θ, let (𝑥,𝑦) be a point on a circle of radius 𝑟 corresponding to this angle θ. # The trigonometric functions can be written as ratios involving 𝑥,𝑦, and 𝑟.
  4. The trigonometric functions are periodic. The sine, cosine, secant, and cosecant functions have period 2π. The tangent and cotangent functions have period π.


Sinusoidal Values

ChatGPT

Asking ChatGPT how to do this

Here are a few examples of music visualizations that employ Schrödinger's equation and/or Heisenberg's matrix:

Schrödinger's Dream by Joachim Schöberl: This visualization employs Schrödinger's equation to create a colorful, abstract representation of a piece of music. The video can be found on YouTube: https://www.youtube.com/watch?v=-eRYz7PzsH0 The Quantum Symphony by The Private Life of Cows: This visualization employs Heisenberg's matrix to create a visual representation of a musical score, with the probabilities of different notes or chords determining the size and position of various visual elements. The video can be found on Vimeo: https://vimeo.com/245997645 Quantum Music Visualizer by Edwin McLean: This visualization employs both Schrödinger's equation and Heisenberg's matrix to create a 3D representation of a piece of music, with different aspects of the wave function and matrix elements mapped to various visual elements. The video can be found on YouTube: https://www.youtube.com/watch?v=WgGSCp5_5Y0 Keep in mind that these are just a few examples, and there are likely many other music visualizations out there that use quantum mechanics in different

AI Generated Templates

IOS
import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!
    
    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: "https://johnnywunder.info/SmokingOnThePorch/index.html")!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        title = webView.title
    }
}
Android
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.loadUrl("https://johnnywunder.info/SmokingOnThePorch/index.html");
    }

    @Override
    public void onBackPressed() {
        if (mWebView.canGoBack()) {
            mWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}
Creating App Bundles

As an AI language model, I cannot create the App Bundles for you. However, I can guide you through the process of creating them.

Please note that the process may vary depending on your specific development environment and app requirements. It's important to carefully review the documentation for each platform to ensure that you follow the correct steps.

IOS Bundle

For iOS, you will need to have an Apple Developer account and follow these general steps:

  1. In Xcode, select the project in the Project navigator and choose your target under Targets.
  2. Select "General" from the top of the screen.
  3. Under "Identity", enter a unique Bundle Identifier. This should be in the format "com.example.myapp".
  4. Under "Signing", choose your team from the "Team" dropdown menu.
  5. Choose a development or distribution provisioning profile.
  6. In the menu bar, choose Product > Archive.
  7. Choose the archive you just created and select "Distribute App".
  8. Choose an option for app distribution, such as App Store Connect, and follow the prompts to upload your app.
Android Bundle

For Android, you will need to have a Google Developer account and follow these general steps:

  1. In Android Studio, select "Build" from the top menu and choose "Generate Signed Bundle/APK".
  2. Choose "Android App Bundle" and click "Next".
  3. Choose your module and keystore file, and enter your keystore password and alias key password.
  4. Choose your build type and select "Release" or "Debug" as appropriate.
  5. Choose your destination folder and click "Finish".
  6. Upload your App Bundle to the Google Play Console or another distribution platform.

Base Development

Multi-colored Bar Graph First Step

Well the hesitation paid off and instead of rediscovering and coding Fourier Transforms , figuring out how to interpret PCMs at different sampling rates and compression standards by using html5 <audio> and Web Audio API AnalyserNode I can concentrate on investigating frequencies and amplitudes from 0hz to 96000hz. Created a multi-colored bar graph. Code at seeTheMusic At this point plan is to formalize it setting up a page with ability to pick your audio source. I'll maintain current code at seeTheMusic and see up a visualization page for entertainment and investigations.

Two ways to go now:

  1. Try and simulate the water light show.
  2. Do a 'permanent' (for the duration of the song) pixel growth.

To do this I'm looking at existing canvas visualization, particularly a simple fireworks and trying to apply that to the frequencies and amplitudes the guitar produces. The key is going to be finding the highest number of samples working for the fftsize and employing the magic doubling of octave to an in tune 440hz A guitar strings.

Step 2 Amplitude

Set images, color and fade based solely on amplitude. Next step frequency.

Learning

Broke algorithm into three part. 0 Frequency 1 Amplitude 2-4 Circle. Communicating state through web document.

Step 3 Frequency

Using max frequency to control lineWidth and globalAlpha. As part of this incorporation I created select which allows use to select their own song(be sure you have the url of the song ready to paste). In addition I added automatic resize and full screen for canvas.

Step 4 getUserMedia

Go locally live!

Change Control

Using git in development with 2 branches sandbox and main. That works fine. What I'm currently trying to think through is how to preserve old versions that I like of seeTheMusic.js without over complicating improving and moving forward.

Still a work in progress.

Ask user to grant permission to use sound source their machine produces from microphones to Spotify to local library.

getUserMedia()

Tools

Modularization and Live

Going to modularize the draw routines and create a live version. Will then port recorded version over to mudlarization.

Flac

Development Environment

Web Audio API

Schrödinger equation

Coming along. Check it out Play with the accelerator.

Determining sound parameters to feed Schrödinger equation
freqArray

The Float32Array that the frequency domain data will be copied to. For any sample which is silent, the value is -Infinity. If the array has fewer elements than the AnalyserNode.frequencyBinCount, excess elements are dropped. If it has more elements than needed, excess elements are ignored.

The indexes of the output can be mapped linearly between zero and the nyquist frequency, which is defined to be half of the sampling rate (available in the Web Audio API via context.sampleRate).


ampArray

The getFloatTimeDomainData() method of the AnalyserNode Interface copies the current waveform, or time-domain, data into a Float32Array array passed into it.


getByteTimeDomainData (and the newer getFloatTimeDomainData) return an array of the size you requested - its frequencyBinCount, which is calculated as half of the requested fftSize. That array is, of course, at the current sampleRate exposed on the AudioContext, so if it's the default 2048 32,648 fftSize, frequencyBinCount will be 1024 16,384, and if your device is running at 44.1kHz 192,000kHz, that will equate to around 23ms of data.

The byte values do range between 0-255 we're floating point so I think maybe different, and yes, that maps to -1 to +1, so 128 is zero. (It's not volts, but full-range unitless values.)

If you use getFloatFrequencyData, the values returned are in dB; if you use the Byte version, the values are mapped based on minDecibels/maxDecibels (see the minDecibels/maxDecibels description).

Old info

Core code examples

Allows me to work in PCM analyser on supported browsers without worrying about format or synchronization.

Tool Problems

  1. CLOSED pmo1948 know issue. Package not maintained for years. Removing from project as not really require. audio-generator generates an audio source and I have my guitar for that.
  2. CLOSED Gulp too much work for limited benefit. If automation necessary will try npm scripts.

Research

Web Audio API Visualization and Study

Visualizations with Web Audio API


References and Metadata

For more sophisticated automation go to Software Source to get a backup of the this site's wiki done August 19th 2014 and sample information automation tools for scraping content from NYS DEC. These tools with coding expertise can collect, aggregate and publish information from any web source you want to monitor. 

Have fun be free be safe be well.


Retrieved from "https://johnnywunder.info/mywiki/index.php?title=Arts&oldid=547560"