DEV Community: Cameren Dolecheck

Introducing A Quick Start Template for Using p5.js in Electron

Cameren Dolecheck — Wed, 04 Sep 2019 00:00:00 +0000

There is something uniquely enjoyable seeing the code you write come to life. That’s why many of my favorite projects to work on have been creative coding projects. Most of these have revolved around p5.js, the Javascript library based on the Processing language.

This is a cross-post from the blog I run, Imago Dev.

The goal of the Processing Foundation is to make coding accessible for artists and designers. This library does so by providing an easy to understand API to draw and animate in a web browser. From learning programming by moving primitive shapes, to creating complex generative art, p5.js has got your back.

Bumps in the road

As neat as p5.js is, the web browser itself can throw up some limitations. You have to spin up a local server to retrieve assets, you don’t have access to the file system, you’re limited to one tab and window, and if you’re anything like me you’re likely to get distracted by that open Youtube tab.

That’s where Electron comes in. By combining Chromium and Node.js, you fix all those problems (maybe not the Youtube distraction) with one tool.

Electron and p5.js pair up great. Electron takes care of all your file system, window, and menu bar needs, leaving p5.js to do what it does best — create super cool art and designs. Sketches move from a little dinky webpage to a full blown local app.

To help you get up and running creating p5.js sketches in Electron, I’ve built a quick start template — P5-Electron-Quick-Start Project Template.

Features

This template comes pre-configured with:

p5.js npm module, rather than statically downloaded files.
Electron with pre-configured main and render process files.
Electron-reload to keep the sketch up-to-date as you make changes.
Mocha as the Node.js test suite.
Example sketch that reacts to mouse movement and click.
Examples of creating pure functions to drive your sketch.
Examples tests for your sketch.

For those of you familiar with p5.js sketches, you’ll notice that the sketch.js file is setup a bit different. In order to keep P5 out of the global scope, it is instantiated inside sketch.js rather than declared as a <script> in the index.html file. This means that whenever you would call a p5 method, you must call it from the injected p5 instance. For example, in the sketch() function, you must use p.ellipse() rather than just ellipse.

Only a button press away

Github makes creating new repos from template projects simple with the Use this template button. After that and a couple npm commands, you’ll have skipped the annoying setup and can get straight to building awesome creative coding pieces with p5.js in Electron!

Hopefully, this template serves you well in your next project. Please provide any feedback on ways this quick starter can be improved to help you.

10 Intriguing Public REST APIs For Your Next Project

Cameren Dolecheck — Wed, 28 Aug 2019 00:00:00 +0000

The notion of working on side projects gets thrown out a lot amongst the programming community. It can be intimidating sitting in front of a blank code editor wondering what to build. Hosts of blog posts have been written recommending building applications like calculators, to-do lists, and social media clones. While those can certainly be helpful for learning technology stacks, let’s face it — the word doesn’t need any more calculators or to-do list apps. Instead, we can build new and interesting applications around public facing REST APIs.

This is a cross-post from the blog I run, Imago Dev.

What’s a REST API?

A Representable State Transfer(REST) Application Programming Interface(API) provides a set of methods that a programmer can use via HTTP to send and receive data. Since these methods are over HTTP, any programming language can be used to employ REST APIs.

There are thousands of REST APIs available on almost every different domain conceivable. Commonly used public data like weather or stock markets have dozens of APIs available for use. Many popular web platforms, like Facebook and Twitter, provide APIs to developers too. Some of the proprietary APIs have limitations to the number of times you can call. Many require signing up and receiving a private API Key. The most secure APIs require setting up OAuth for users to login securely.

You can find a huge list of public apis at this Github and an even grander list at RapidAPI.

10 Intriguing Public REST APIs

This list is certainly not exhaustive of cool REST APIs, but simply some I find to be especially neat and worthy of some side projects. All of these are completely free and do not require any thing more than getting an API Key — no need to figure out how to handle OAuth or pay for their use.

PokeAPI The largest media franchise of all time now has an easy way to get data on the 800+ Pokemon.
NASA API Space, the final frontier. Get data on astroids, galaxies, and more.
Open Food Facts A huge amount of data on food products from around the world.
TransLoc OpenAPI Get live data of public transportation of cities and college campuses.
Urban Dictionary API It’s amazing what slang people come up with.
Merriam-Webster Dictionary API For those that want real words’ definitions and synonyms.
Numbers API Interesting facts and trivia on numbers.
WeatherBit API Current and historical weather data.
US Government Data API A fairly big catch-all for dozens of United State data samples such as agriculture, health, and public safety.
Bible API The best selling book of all time. The greatest story ever told.

What To Do With Them

All those public APIs are great, but having a list of interesting sources of data does not inherently help the initial problem of determining what to do for a new project.

The best place to start is by simply getting and displaying data. Maybe that’s showing a Pokemon of the day or the definition of a typed in word. For the more creative types, try taking pieces of the data and mapping it to a visual element, such as temperature to color or drawing lines based on bus movement.

The hardest part is simply getting started. Once you’ve gotten past the initial hurdle of fetching and displaying the information, I’m sure you’ll think of plenty of next steps for your project!

Book Review - If Hemingway Wrote Javascript

Cameren Dolecheck — Wed, 21 Aug 2019 00:00:00 +0000

What would computer code look like if it was created by history’s greatest writers? How would some of the most creative linguistic minds take to writing Javascript? Angus Troll attempts to answer those questions in “If Hemingway Wrote Javascript”.

This is a cross-post from the blog I run, Imago Dev.

This book takes an entirely different approach to coding and style. Croll solves a handful of common programming challenges, such as finding Fibonacci or prime numbers, in a matter fitting a wide variety of famous writer’s styles. Some solutions, like the first example by Hemingway, are down right elementary; however, some like Italo Calvino turn functional programming on its head.

Often times, comments in the code work to tell a story more so than simply describe the lines of code. Some authors throw out form all together, combining code and comment into one string of thought. For instance, the beat generation writer Jack Kerouac’s solution to factorial, writes the whole program as essentially a single line.

/*...the only numbers for me are the mad ones, take forty-three like a steam engine with a talky caboose at the end*/ (n = 43), /*and that lanky fellow in a cocked fedora*/ (r = 1); /*then back to our number, our mad number, mad to become one*/ while (n > 1) /*mad to descend*/ n--, /*mad to multiply*/ (r = r * n); /*and at the end, you see the blue center-light pop, and everybody goes 1.4050061177528801e+51…*/
r;

It’s so wonky that I had to turn off my Prettier VS Code extension just to save the snippet properly. You’ll also notice that he totally disregards any factorial except for that of the number 43.

Croll does an excellent job of providing a brief bio on each writer in order to set up the reasoning behind a given solution. Even if you hardly understand Javascript, you’ll walk away with a greater understanding of 25 brilliant writers. If you’re like me, this book will probably stuff up the urge to dive into some of the authors’ actual literary work.

When most folks who create code are the technical engineering types, having an artist play with the “language” part of “programming language” truly provides a fresh take on coding style. That is not to say you should emulate the topsy-turvy nature of these authors when starting the next project, but it certainly will push you to think outside the box.

Overall, this book is an excellently playful read that is worth your time.

Have you reader this book? What were your thoughts?

Simple Internet Radio Music Visualizer

Cameren Dolecheck — Wed, 14 Aug 2019 00:00:00 +0000

Creating animations that react to music is a fun way to get started learning how to build generative art and design. There is something extremely satisfying in seeing shapes dance around the screen to the music. This tutorial will walk you through how to get started creating reactive music visualizer based on an Internet radio stream. This tutorial will stick to web technologies and is based on my Radio Visualizer Starter Project.

This is a cross-post from the blog I run, Imago Dev.

Keeping Time

Music acts as an easy to use and constantly changing data set for generative animations. Both sound and animation share a common variable — time. While words or images are locked into place once created, both sound and animation must be experienced over time. It is this shared parameter that allows such an easy link between the two mediums.

The strong bond of time allows for easier mappings of the parameters that do differ between sound and animation. For sound, commonly employed parameters are volume, frequency, and tempo. These intuitively map to an object’s size, position, color, and speed in the animation. Since changing these parameters over time is what creates animation, having the music control the various values is an ideal way to drive the animation.

While this connection between music and animation can be done with any piece of music, doing so against a radio stream provides a practically unlimited amount of music to play with. Given that even the lamest radio stations do not play the exact same song 24/7, it has the benefit of providing a wider range of sound parameters to build your animation around. Not only that, but you the developer also have the benefit of not hearing the same first 20 seconds of a song hundreds of times as you refresh the animation while building.

Bring On The Sound

To start, we first need to receive and analyze the radio stream. There are many great sound libraries for a variety of languages. Modern web browsers come equipped with the <audio> node and Web Audio API. This API gives easy to use methods to connect and analyze our audio source. First, we need to define our audio source. In the example, I use NC State University’s radio station, WKNC Raleigh. As long as the stream allows Cross Origin sharing, you can replace the src with the station of your liking.

<audio id="radio" preload="auto" crossorigin="anonymous">
  <source src="http://sc8.streammystation.com:7430/stream" />
</audio>

Now that the audio node is defined, it needs to be told to play. Chrome, and likely more browsers, now enforces that the user interacts with the page before allowing audio to begin playing. To handle this, we must put our call to the play() method inside an event listener. In the starter project, this is contained inside of the radio.js file.

//Uses the WebAudio API to analyze streaming audio
let analyser, source;
let audioElement = document.getElementById("radio"); //gets the element in the HTML document with the id="radio"

window.onload = function() {
  // Start playing the radio stream when document is clicked
  document.getElementById("defaultCanvas0").addEventListener("click", function() {
    audioElement.play();

    //TODO: hook up the analyzer
  });
};

But wait, what is this defaultCanvas0 element? Now is when we get to the animation side of this tutorial. The starter project employs p5js to create our animations. The initial setup() function creates our <canvas> which gets the id of defaultCanvas.

Until we get the audio stream going and hook it up to the API that will analyze the audio for us, we need the draw() p5js function to tell us to click the <canvas> to get started. Since we have not created our analyzer yet, we will just have p5js draw the background and start text, and then not run any of the rest of our draw function.

drawBackground();

if (!analyser) {
  //we haven't started the audio yet
  showStartText();
  return;
}

Now we need to hook up the analyzer, which our entire animation hinges on. This is where the Web Audio API really shines. All of the hooking up of audio nodes happens inside the click event listener, immediately following our audioElement.play(); call.

let context = new (window.AudioContext || window.webkitAudioContext)(); //Tells the browser we want to use Audio for out analyser

source = context.createMediaElementSource(audioElement); //Set the context to be our radio stream
analyser = context.createAnalyser();

source.connect(analyser); //Connect up the radio stream to the audio analyser

// Connect the output of the analyser to the destination, so that the audio will play out speakers
analyser.connect(context.destination);

Basically, all the above code does is tell the Web Audio API where to find our audio source, connect that source up to the analyzer, and then connect the analyzer up to our destination, which is really just our computer’s speakers.

Getting The Frequency

Everything is all hooked up and ready to be analyzed for our animation. To use our analyzer, we need to ask it for data every frame of animation. For the starter project, we will base the animation off of the sound frequencies. To do this, in the draw() method of p5js, we have

frequencyData = new Uint8Array(analyser.frequencyBinCount);

//Tell the analyser in radio.js to fill our Array with the frequency data
analyser.getByteFrequencyData(frequencyData);

This clears out the frequencyData from the previous animation frame and then fills it with the latest frequency data. This data is put into an array, which by default the analyzer fills with 1024 different values. The lower the index in the array, like frequencyData[10], the lower the audio frequency; thus, the higher the index, like frequencyData[900], the higher the audio frequency the cell represents.

Driving The Animation

The final step is to use this frequency data for our animation. This starter project simply adjusts the size of a circle based on a low frequency. The more the audio has that frequency, the bigger the circle will be.

//Draw an ellipse in the center of our canvas that scales with the frequency data
ellipse(width / 2, height / 2, 1 + frequencyData[10], 1 + frequencyData[10]);

And that’s it! Every frame, we have a new value for frequencyData[10], and thus a new size for our circle. One last minor effect to add is having the circle fade out. This gives a smoother animation as the circle changes size.

The way we redraw our frame is by covering the previous frame with a new one. We do this by covering the last frame with the background of our new frame. If we keep our background with 100% opacity, every frame is drawn seemingly totally separate from the previous; however, if we lower the opacity to 10% then the frames bleed into each other, since the last frame is only a little bit obscured by the new background. This creates the desired fade out effect.

drawBackground() {
  //Sets the fill color of our shape red with low opacity
  //uses low opacity so the circle fades out on edges
  fill(255, 0, 0, 10);

  //Draw a rectangle, which will be red with low opacity
  rect(0, 0, width, height);
}

Now that you’ve got the basics of building animation based on music, try linking other animation parameters, like position or the number of objects, to the frequency data!

Code Editors Change Our Work

Cameren Dolecheck — Wed, 07 Aug 2019 00:00:00 +0000

Since the beginning, man has been finding ways to extend the ability of the individual with tools. We began using tools to create more advanced tools. Over the millennia, our technology compounded on itself. With the invention of computer software, our tools vent virtual. The growth of software has exploded faster than practically any other toolset man has created. With that explosion has come the evolution of one of the core tools one uses in making software, a source code editor.

This is a cross-post from the blog I run, Imago Dev.

Evolution of Editors

I first learned to code about 10 years ago in a high school course. Other than using Notepad for the first program or two, we used Turbo C++ by Borland. Looking at the interface now, it seems quite ugly and dated, and to be honest it looked dated even then. Once you get past the over-saturated blue editor pane and drab grey tool bar, you find a fairly decent integrated development environment for a beginner. It compiled and executed the code, syntax highlighted keywords, showed where compile time errors were located, and had a debugger to step through the code during runtime.

In just the decade since I used Turbo C++, source code editors have grown substantially in their ability and scope. I have used a number of editors over the years, now landing on VS Code for web development and Intellij IDEA for Java, Scala, and heavier Javascript work. It is almost hard to believe how advanced these tools are when compared to Turbo. Between the huge number of features that come built into the editor and the vast array of available extensions available, the software developer has everything all in one comprehensive tool.

Speed & Flow

Putting all of the features a developer needs into one tool can drastically increase productivity. Powerful search functionality allows jumping to disparate sections of code in an instant. Refactoring convoluted components can be done with a click of a button. Building, testing, and deploying can be kicked off with a single hotkey.

There is no doubt that source code editors have come a long way at supercharging the development process; however, one must be careful about speed for speed’s sake. Simply creating code faster, if not the correct code solving the correct problem, only puts you down the wrong path even quicker. The latest tips and extensions for your VS Code setup is not going to solve your poorly designed application architecture.

Assuming what you are building and how you are building is sound, the less friction the developer runs into while constructing the better. Not only does the problem get solved faster, but the developer can think clearer with the limited amount of cognitive load. The less you have to think about superfluous tasks like how to build or where a function lives, the more you can focus on the real problem.

Getting to the point where editor creates this speed and flow can take some up front investment. Advanced editors like Intellij can be so vast that knowing where the feature you need resides takes some searching. The editors may also require some third-party extensions for it to handle your project well. Even the most basic editors, like Vi, take deliberate effort to learn how to maneuver. Thankfully, many great tutorials exist, often by the editor’s creators, on how to master these powerful tools.

Evaluate

I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail. -Abraham Maslow

Tools change how we look at a problem. When used optimally, tools can make a task easier; however, a limited idea of when a tool is best used can cause us to approach the problem in the wrong way. This may not only make solving the problem harder, but cause additional problems. It is because of this importance that we must take the time to learn about our tools, both how to optimally use the ones we have and what other tools are available.

Source code editors are no exception. With such a powerful tool that every developer will spend a vast amount of time using, these tools have a great impact on the resulting application.

How does your editor effect your work?

Matters of Style

Cameren Dolecheck — Wed, 31 Jul 2019 00:00:00 +0000

What comes to your mind when you consider the word style? Have you considered your style? Most people limit their idea of style to the clothes on their backs or to some design trends. Maybe, if they have thought a little more about it, they consider a fuller picture of their style — the way they communicate.

This is a cross-post from the blog I run, Imago Dev.

Understanding Style

Our style is the conglomeration of all the ways we choose to reflect our inner-self to the outside world. This encompasses far more than simply what colors we pick or what words we use. Everything that expresses our values, emotions, interests, faith, knowledge, status, and skills adds up to the cumulative whole of style.

Style matters a lot. A well planned style can vastly improve your ability to communicate to others; however, how we communicate may need to be adjusted based on the context and audience. A white coat and stethoscope would likely help bring credibility to someone giving medical advice, but probably would seem strange for someone to wear while selling tractors. Writing an essay in Comic Sans while using slang and emojis probably will not earn a college scholorship, but that might be fun and enjoyable connect while texting your nephew.

Coding

Writing software is, in large part, the art of communicating technical processes. It is no coicidence that software is written with programming languages. Often times, how you write your code can arguably be more important than the resulting instructions the computer actually performs.

It has been said that software development is mostly reading, not writing, code. Trying to figure out a bug or how the new feature will fit into the existing code base starts by reading the existing code. The easier that code is to understand, the quicker these tasks can be completed. Because of this, organizations and languages build up style guidelines to follow. These guidelines create consistent patterns that aid in creating a cohesive codebase.

Like the clothes or grooming of a person, a codebase’s style can be a big indicator for the quality of the code and the ability of its creator. If you were a manager or a hiring agent looking at someone’s work, who would you trust more:

Person A

let Thing1 = p(1, 2, 3, 4, "Lego");
let thing2 = p(1, 2, 3, 4, "connect");
console.log(Thing1 + " as compared to " + thing2);

or Person B

const houseSides = [1, 2, 3, 4]; //length of house to build in inches
let legoBricksNeeded = perimeterLego(houseSides);
let connectPiecesNeeded = perimeterConnect(houseSides);
printComparison(legoBricksNeeded, connectPiecesNeeded);

Person B has put much more effort and thought into thinking up useful names for their variables and functions, keeping the capitilization consitent, and using data structures. Taking time to simply give things consistent and understandable names goes a long way in connecting the reader to what problem is being solved. It also drasticly improves other people's perception of not only the codebase, but its author.

Maybe you, reader, at this point are thinking, “I am only writing these small personal projects for myself, no one else is even going to see my code.” It is easy to see something as private and let that quality falter, but the small personal victories build up to the large public ones. When you do write code that others will use, your style will have matured from the private changes you implemented.

Even if it was true that you would only ever write something for themselves to read, you still need to understand it. The p() function in the Person A example might make sense to the creator in that moment, but will it imediately a year later? Sure, it is easy enough to go to the p() definition and read what it does, but that adds time, if even just a little. If that process needs to be done for every function written, hours have been added to making the change. Up-front time of crafting a clear and concise style would have saved hours later.

Improving

“On matters of style, swim with the current, on matters of principle, stand like a rock.” -Thomas Jefferson

When starting a new language, it can be difficult to know what good style looks like. There are some general rules that always apply, like consistent capitolization or well named functions. Languages like Python enforce white space styling while others will let you write just about how ever you please. Google has a repositoy of style guides for a wide variety of languages. Many of them even come with linters. Think of these as your personal stylist. They work as a set of rules that code editors use to autocorrect any styling issues.

There are also many excellent books that focus on style. Clean Code is a great resource, especially for object-oriented languages.

If you already are working on a project that maybe is… less than great in code style, it is never to late to fix that. Refactoring is the optimal time to do large fixes of code style; however, the very next line of code you write can begin putting that codebase on track. It might be the smallest bug, but every little change can be a victory.

Since this topic of style is such an vastly important one, there will certainly be more posts from Imago Dev on this matter. Stay tuned!