DEV Community: Emurtzle

Realtime Audio Visualizer Controller Part 2

Emurtzle — Tue, 13 Aug 2019 01:13:01 +0000

Part two of making my real time audio visualizer program + controller. This week I got midi input and spectrum analysis working in Unreal. I included some pictures of the blueprint setup and will be posting a video demonstration later this week once I have a better demo made.

https://imgur.com/a/vS68Ibl

Realtime Audio Visualizer Controller Part 1

Emurtzle — Tue, 06 Aug 2019 00:47:38 +0000

I started a project and want to document it here as I build it. The project is a real-time audio-visualizer with a corresponding controller. The program is going to be built with Unreal Engine 4 and the controller is going to be custom-built by me with whatever I can find offhand (I.E. don't have much to anything to spend on this project).

Step one is salvaging some parts. I have two old mixers that may or may not be working, between the both of them, there are over 3 dozen knobs, that will be perfect.

In this Imgur album, you can view some pictures I took of the process.

https://imgur.com/a/H9jtMJk

Deep Fakes in Politics

Emurtzle — Mon, 29 Jul 2019 21:56:30 +0000

Unfortunately in todays day and age, regardless of where you are on the political spectrum, fake news and propaganda have become a common place, especially as social media use is at an all time high. There is a war of mis-information and mis-representation going on online. Once it’s impossible to tell the difference between deep fake footage and real footage, what’s stopping people from using that to spread misinformation?
Even if a deep faked video is proven to be false at a later date, the damage is already done, the victim will have to spend time and energy defending and proving themselves innocent that could’ve gone into something more productive. And there will be a minority that will believe it even if the video is proven fake. You already see this tactic all the time in politics, not every claim from one politician about another is completely true.

Why We Should Embrace the Development of Deep Fakes

Emurtzle — Mon, 22 Jul 2019 21:23:59 +0000

We should embrace the development of deep fakes because not doing so will be much worse. In the near future, deep fakes will be able to replicate someone near-perfectly enough that the average person will not be able to tell the difference between the real person and the deep faked person. While convincing CGI humans have been created by large animation studios for high budget films, deep fakes open up that power for users with a small budget and thus opening it up for abuse.
Potential abuse can come in all kinds of different forms, from propaganda and fake news to altering or creating footage of a crime and also creating or editing porn with someone who didn’t consent to.
To combat this we need to let developers continue making deep fakes because if we push them underground, we won’t know enough about them to fight them.

In the next few blog posts these next few weeks I’ll be exploring different aspects of deep fakes and their applications, good or bad, so stay tuned.

Synergistically Speaking

Emurtzle — Tue, 16 Apr 2019 22:15:27 +0000

Introduction

I have written this blog post on the process of synergistially orchestrating technically sound sprints in a client-focused architecture environment.The adoption of progressively disintermediate cloud centric channels means that while there are appropriately incept frictionless potentialities, you can excel in efficiently empowering team driven deliverables in a corporate, cross functional experience.

This leads to the adoption of blueprints that enable auto scaling to match the user's search engine optimization in a given promotional field. These type of technologies are vital for conceptualizing adaptive core competencies and convergences in an always online world. Allowing you to make the correct choices to bring your technology to the forefront.

The Usage of Blockchain Technologies For The Decentralization Of A Company's Core Value Network To Improve Shareholder Retention

We all know how important blockchain developments are in this day and age, they successfully cultivate collaboratively elaborate ROIs on leading edge virtualizations in the market. This lets us "promote proactive technology rather than effective information"

However, as we can see in these two diagrams, that is usually not sufficient for our needs.

So What Can We Do To Fix This And Set Ourselves Up For Success

Stop giving global access to high quality scrums.
Enact a first in first out service to simplify right-shore market shares.
Redefine and refactor core values to disseminate backend methodologies. VERY IMPORTANT!!!
- Your programmers may not like this but it is vital to the success of your corporate validation. You might as well hire ostriches with keyboards tied around their necks!
- Many companies fail at this but if you succeed, it leads to seamless integration with niche markets, leading to investments in empowered equity, making everyone happy.

Putting This Into Practice

When preparing to deploy, be sure to capitalize on the object-orientated version of SQLAlchemy. That's how yoiu maximize the potential of object-relational mapping in your program, without it you have to start thinking about TensorFlow, which is highly relevant in thee context of React. Without that you might end up having to use MongoDB to interact with your machine learning.
There are many unspoken benefits of object relational mapping. Your product becomes more open-source overall, more lightweight and ca n scale to fit your clients needs. Letting you leverage existing technologies into your orchestrated incubator.
Pay attention to these diagrams here, it shows the flow your program should have:

Here, we utilized the Google Cloud platform to enable a flow sate

Useful Free Programs for Planning and Productivity for Developers

Emurtzle — Mon, 01 Apr 2019 22:05:16 +0000

These are a list of programs and websites to aid in the development of web apps or any type of programming in general. I try to avoid the obvious ones (I.E. VSCode, GitHub, Etc...) and find some interesting ones!!!

In no particular order...

Planning/Productivity

Figma - A way to design a website also has collaborative capabilities.
Bundle Phobia - Computes the size and load time of for your bundles, can either search or upload a JSON file of your bundles.
Font Flipper - Helps you find fonts from the Google Fonts library in a convenient Tinder-esque way.
Adobe Color Wheel - Helps you explore colors and find suitable 0nes for your next project
Coolors - A slick site for generating pleasing pallets of color for your next project. Highly Recomend!!
Trello - A way to keep track of tasks for any sort of personal or group project.
Bubbl.us - Brain storm using mind-maps.
JSONPlaceholder
Draw.io - Flow chart and diagram maker.
WakaTime - Track and analyze how you spend your time coding.
Mockaroo -"Mockaroo lets you generate up to 1,000 rows of realistic test data in CSV, JSON, SQL, and Excel formats."
Browser Shots - Test your website in a huge collection of different browsers.
fake{JSON} - Quickly create fake JSON data for testing.
Sizzy -"A tool for developing responsive websites crazy-fast, made by @thekitze"
unDraw - Open source illustrations for any project
Build RegEx - A visual tool for generating RegEx expressions
Regulex - A tool for visualizing RegEx expressions
RegExr - A website for learning, building and testing RegEx expressions.
HTTPie - "HTTPie—aitch-tee-tee-pie—is a command line HTTP client with an intuitive UI, JSON support, syntax highlighting, wget-like downloads, plugins, and more."
VisBug - Edit Content of a webpage inside of Google Chrome.
Insomnia - A pretty darn cool REST Client for debugging APIs )
Codeply - "Responsive Design Playground & Frontend Editor."

Content Creation

Flare - Easily create animations for your website in in browser
Vectr -"Vectr is a free graphics software used to create vector graphics easily and intuitively. It's a simple yet powerful web and desktop cross-platform tool to bring your designs into reality."
Canva - Free online graph and charts maker
Photo Creator - Free Stock Image Generator
Videvo - Free stock videos
Pexels - Free stock videos
XD - Website and app designer

Resources

DevDocs.io - Many useful documentations all in one place
WolframAlpha - "Computational Intelligence"
Google Fonts - Large collection of free fonts you can use for your projects
Up - Free assets for websites and mobile apps

Git

GitKraken - Github GUI
Sourcetree- Another Github GUI

API

Postman - An environment for developing APIs
Apify - Automated web scraping platform. "Turn any website into an api in minutes!"

OS Tools

Spectacle - Control your windows via keyboard shortcuts.
Oh My Zsh -
Prettier - Make your code prettier
Hyper - A better terminal

Miscellaneous

CloudConvert - Convert anything to anything/cloud based converting/Runnable via api calls
10 Minute Mail - Exactly what it says it is
IFTTT - Super awesome program!!!!
Grammarly - Grammer correction program/extension
Snapdrop - Send files easily across platforms
JSON Parser - Parse your ugly json strings
Carbon - Take pretty screen shots of your code
GTmetrix - Analyze the resources and speed of your website

Intro to Three.js + Interactive Text Example/Tutorial

Emurtzle — Mon, 18 Mar 2019 16:22:47 +0000

What is Three.js?

From the Wikipedia article:
"Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL."

Simply put, it's a way to to display 3D content in a (relatively) simple way without the need for various plugins.

It is built on top of WebGL, which is built on top of OpenGL. It essentially streamlines the use of WebGL

What is it used for?

Displaying 3D content
Multi-Media Projects
Music Visualization
Data Visualization
Video Games
For fun (it's fun!!!)

Why should you use Three.js?

There are several similar libraries also based off of WebGL.
- GLGE
- sceneJS
- PhiloGL
It's a large library that is well documented.
It has DOZENS of example projects and proof-of-concepts to get inspiration and reference from
It's a single JavaScript file, you don't need to load a whole bunch of weird plugins
- This increases security and compatibility between browsers while also making your code cleaner and more efficient.
Active community with 14,000 questions (and growing) questions on Stack Overflow
- Documentation
- Examples
- Forum
- Slack
- IRC
- Stack Overflow
Its is available via the MIT license
- To quote the Wikipedia article again:
  - “The MIT License is a permissive free software license originating at the Massachusetts Institute of Technology (MIT). As a permissive license, it puts only very limited restriction on reuse and has, therefore, an excellent license compatibility. The MIT license permits reuse within proprietary software provided that all copies of the licensed software include a copy of the MIT License terms and the copyright notice. The MIT license is also compatible with many copyleft licenses, such as the GNU General Public License (GPL); MIT licensed software can be integrated into GPL software, but not the other way around.
- Several other large programs that use the MIT license include
  - Ruby on Rails
  - Node.js
  - JQuery
  - X Window System

Tutorial (Simple scene on JSFiddle)

Let's make a super simple example that creates a cube and makes it rotate. Here is the JSFiddle for it, let's go through the code line by line. There's no html or css in this fiddle, except for a script tag to import Three.js. Everything else is pure JavaScript!

Line 1

var camera, scene, renderer, geometry, material, mesh;

Let's break this down:

camera is a virtual camera, what this camera sees is what is rendered.
scene contains everything you want rendered. The camera -> views -> the scene
renderer is the rendering engine, it renders what the camera sees and converts it to something the DOM can display
geometry is the shape of the object we are rendering
material is the color and/or texture of the object we are rendering
mesh is the actual render-able object, it needs a shape (the geometry) and a color (the material)

Line 3-4

init();
animate();

This calls two functions we define below

init(); initializes our 3D scene.
animate(); starts the animation loop that rotates our cube

Line 6-24

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

Ok, this can be alot at once, let's go line by line. This is the majority of our file

scene = new THREE.Scene(); Simply creates a new scene
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000); creates a new Perspective Camera there are several different types of camera but you'll probably be using perspective cameras the most. It takes four parameters
- The Field of View (FoV)
- The aspect ratio, window.innerWidth / window.innerHeight will work for most projects
- Near(float), anything closer to the camera than Near will not be rendered
- Far(float), anything further away from the camera than Far will not be rendered
camera.position.z = 500; sets the position of the camera to 500 units on the z axis
geometry = new THREE.CubeGeometry(200, 200, 200); creates a new cube shape that is 200 units wide by 200 units tall by 200 units deep
material = new THREE.MeshNormalMaterial(); creates a new simple material to apply to the cube. There are many different types of materials, we are using one that changes color based on the normals (direction) that a face (side of the cube) is pointing.
mesh = new THREE.Mesh(geometry, material); creates a new mesh, applying the material to the geometry we defined above
scene.add(mesh); then adds the mesh to the scene so the camera can see it
renderer = new THREE.WebGLRenderer(); creates a new WebGL render engine
renderer.setSize(window.innerWidth, window.innerHeight); sets the width and height of the rendering engine to the width and height of the window containing it
document.body.appendChild(renderer.domElement); the renderer takes it's render result and converts it to something the dom can use, we then append it to the body of the document(DOM)

There! That wasn't so bad was it? All we're doing is creating objects and setting up parent/child relationships. Just like we do with any ol' JavaScript driven website!

Line 26-36

function animate() {

    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}

This function tells the renderer to actually render the scene and it drives the animation of our cube.

requestAnimationFrame(animate); This function is weird, there's not even an entry in the documentation about it. It tells Three.js to setup the code below it into a loop that runs every time the display refreshes (typically 60hz or 60 times per second)
mesh.rotation.x += 0.01; We increment our cubes x rotation a tiny bit, keep in mind this runs 60 times per second, large values will make the cube rotate very fast
mesh.rotation.y += 0.02; We increment our cubes y rotation by a tiny bit
renderer.render(scene, camera); We tell the render to render out the scene using our camera, we have to supply the scene and camera because you can have multiple of both in one project.

This is the main loop that drives the animation and rendering of our scene, so if you have a complex scene, this function can easily becomes many hundreds of lines, I highly recommend abstracting your animations as much as possible.

There you go! That's all there is to this project! You should now have a color changing, rotating cube

Interactive Example

Below is an more in-depth example of how to add interaction between a webpage and Three.js content. I purposely kept it simple to make sure it can run on as many machines as possible. I will not be explaining every line here, however there are comments explaining nearly every line of code there!

What Is An ISF File And Why Would You Want To Use It?

Emurtzle — Wed, 13 Mar 2019 00:36:58 +0000

What is an ISF file?

ISF stands for Interactive Shader Format, it is an extension of the language GLSL that adds interactivity and dynamics. GLSL is a language created to interact directly with the gpu, commonly used to render images and videos based on complex mathematical formulas. ISF was created by the Company VidVox, which is an industry leader for creating live animations.

ISF adds that interactivity by letting you alter the variables that feed the formulas in real time.

ISF is very versatile in what it can do, from color correcting an existing photo or video to generating complex 3d fractals. Additionally, in your host program, you can chain ISF files together to create complex scenes that one file couldn’t do alone.

You don’t need to know how to program an ISF file to be able to use them effectively

Some Neat Examples

Color Correction
Fractal 1
Fractal 2
Voronai

Why would you want to use an ISF file over a pre-rendered animation?

ISF files are relatively lightweight, file sizes are usually less than 10kb, and it is essentially just a text file. When presenting visuals, you want to be able to run them as close to 60fps as possible, since ISF files are all mathematical formulas and GPUs are very good at calculating straight math, these files can run very fast.
ISF files can render images/videos that are very hard to replicate in 2d or 3d animation programs, particularly fractals. Some rendering engines such as Octane has experimental features for creating fractal meshes, however it still takes a screipt file that is very similar to openGL files
ISF files are dynamic. You can change the variables that feed the formula in real time. Your host program will be able to map values to those variables from stuff such as a knob on your controller or an audio frequency analysis
ISF files can loop seamlessly and indefinitly (or as long as your floats can be). Some files do break as they approach infinity, however this is more likely the formula breaking and not the framework.
ISF files can work on their own or input a photo or video
ISF files have a small but highly dedicated community with incrediably smart members
ISF files can do everything OpenGL can plus more.

Where would you see an ISF file being used?

You probably wouldn’t see an ISF file or openGL shader used in a high level production (Think Bonnaroo or Coachella). You are much more likely to find them in productions run by a smaller community, think Burning Man or small tier music/art festivals
Often these files are used as a visualizer for music or as part of a visualizer. A branch of this is Live Coding, where you write the file as it’s rendering.

Acronyms and Names

Emurtzle — Wed, 06 Mar 2019 21:30:50 +0000

Programmers LOVE their names and acronyms

Perhaps even more than other industries, we take pride and have fun in naming our programs. Names are important because, not only are they how we talk about our code (obviously), but they can also add important contextual information
Take Ruby and Ruby Gems for example. Ruby is the programming language and Ruby Gems are libraries for Ruby. What does a gem make you think of? Something small, unique and valuable right? We could say the same thing about the libraries! They are "small" collections of code that does something unique that is valuable to us.

Someone could guess what a gem for ruby is just based on the name alone.

Take Pry as another example. Pry is used to "pry" into our code and see the inner workings of it.

Or take Windows, it's is a collection of windowed applications!

Or ISF - Interactive Shader Format, it's a shader format that's interactive!

That doesn't mean you can't have fun with your names, many companies like to add references, silliness or even recursion to their names! Look at what the creators of the popular linux OS Ubuntu named their versions...These names might look silly (because they are!!) but serve the purpose well as they are unique and easy to remember. You're probably more likely to remember "Disco Dingo" better than Ubuntu 19.04.01 LTS, plus "Disco Dingo" is inherently Ubuntu while 19.04.01 LTS could easily refer to another OS.

My personal favorite name is XINU, XINU is a primitive, linux-based operating system that is used as a framework to teach how operating systems work to beginners. XINU stands for XINU Is Not UNIX, but XINU is also UNIX backwards!

Let's look at some bad examples now. Specifically the notorious JavaScript language. Based on the context of the name, you may assume, and many have (including me!) that JavaScript is A) related to Java B) is a scripting language. But neither is true! It is it's own language built by Netscape, not Sun Microsystems.It's a lie!

Or what about Capybara? Why is it called Capybara? What does Capybara do? What does a real capybara do? Why isn't it as cute as a real one. We...Just... Don't... Know...

A name like Python gives us way more context than Capybara

So why is this all important

There is a lot of code out there, and we need to able to talk about it clearly and efficiently. It helps IMMENSELY when you can guess what some code does based on it's name and context it's used.

If your name is hard to pronounce, people will call it something else, you may not want that

What if your name is immortalized? We still talk about FORTRAN (latest stable release is 2018 BTW!) even though that was made in the 1950s.

Social Media and SEO is tied into EVERYTHING these days, it sucks but your code will probably be more popular if it has a unique name people can remember and Google easily. SEO is important! I can't even remember the last time I went to the second page of a Google Search

But is it actually important?

Not really... People will use your code if it's good regardless of it's name, JavaScript is one of the largest implemented languages in the world.

What makes a good name/acronym?

Make it unique/notable, this doesn't matter too much, but a unique easily searchable name will make it more notable and improve SEO

Make it easy to say, don't name your code something that's hard to pronounce or people will call it something else.

Make it themed, like Ruby - Gems, keeping related software named in a theme can make their relations inherently make sense.

Make it make sense. If you call something Student_controller, it should probably control the students, not handle server security

Make it professional. Adding swear words or something cringey or inappropriate. As neat as Brainfuck or the My Little Pony interpreter is, I probably won't talk to my boss about it.

Make it whatever you want. Seriously, at the end of the day you can name your code whatever you want. If people want to use your code, they will regardless of it's name, I mean... JavaScript is one of the most implemented languages in the world.

But help the programmers of the world and make your names nice! This extends to anything in code, from classes to methods to variables to actual name of the app. In a professional setting, people who are not you are going to be reading your code and making edits, implementations, bastardizations and who knows what else. It could even be you in the future! Help yourself and your coworkers, have good names