Creative Coding Journal

ES8 provides a new syntax for handling asynchronous action.

The command await means “just wait for the promise to resolve”.

Await is only valid in async function.

It will return a promise asynchronously after however many calls of await. Meaning, one can set async once and within that function as many awaits as one wants, thus avoiding to write then for every time.

One makes the function asynchronous by adding the modifier async before declaring the function, like:

“JavaScript is single threaded, meaning that two bits of script cannot run at the same time; they have to run one after another.“*

This rule I learned hands-on while working on the API Lab and trying to assign two different functions to be called at the same time through DOM and Annyang voice recognition API. I intended to activate to function calls simultaneously: a string of text to appear on the screen and a div with graphics as its background - it didn’t work. Then, I was googling what was wrong and I found out that was not possible, so I just combined those two functions into one.

“JavaScript is in the same queue as painting, updating styles, and handling user actions. Activity in one of these things delays the others. Events are great for things that can happen multiple times on the same object. But when it comes to async success/failure, you want to use a promise instead

At their most basic, promises are a bit like event listeners except:

A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.

If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.

Promises Terminology

A promise can be:

fulfilled - The action relating to the promise succeeded

rejected - The action relating to the promise failed

pending - Hasn't fulfilled or rejected yet

settled - Has fulfilled or rejected

Here's how you create a promise:

var promise = new Promise(function(resolve, reject) {  // do a thing, possibly async, then…  if (/* everything turned out fine */) {    resolve("Stuff worked!");  }  else {    reject(Error("It broke"));  } });

Here's how you use that promise:

promise.then(function(result) {  console.log(result); // "Stuff worked!" }, function(err) {  console.log(err); // Error: "It broke" });

”*

howler.js

ifttt.com

greensock.com

https://earthquake.usgs.gov/earthquakes/

Take the code, and try changing data, see how it works.

Assignment: put new data and change graphics, try building interactions.

https://www.youtube.com/watch?v=rJaXOFfwGVw&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r

How to manifest data through GUI.

Data can come in a variety of formats:

CSV - tabular data (data in a table), raw format for tabular data

XML - 

JSON

CSV, XML and JSON are standardised formats fro data.

Text file

PDF

Webpage

API - making two applications talk to each other to send and receive data

What is JSON?

Basically, if you have a huge amount of data, you don’t want that in your code, but rather stored somewhere else in a separate file, so you could call upon it whenever you need it.

So, .js is JavaScript file and it’s code file whereas .json is DATA file, there is no code there, nothing to execute, only information that can be loaded. In JSON there are no variable names, it’s just an object that starts with curly brackets and ends with curly brackets. In JSON, you want that property names would also be strings in quotes (those objects consist of key-value pairs, like “name” : “sunflower”). 

Check if the syntax is correct for your JSON file: JSON Formatter and Validator.

Take data from the JSON file in your JS file with the loadJSON(); function.

Source: https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

Web storage is data stored locally in a user’s browser. There are two types of web storage:

Local storage – data with no expiration date that will persist after the browser window is closed.

Session storage – data that gets cleared after the browser window is closed.

This is useful for saving data such as user preferences (light or dark color theme on a website), remembering shopping cart items, or remembering a user is logged into a website.

JSON, short for JavaScript Object Notation, is a format for sharing data. This format is easy to transmit between web server and client or browser.

Some general uses of JSON:

Storing data

Generating data structures from user input

Transferring data from server to client, client to server, and server to server

Configuring and verifying data

JSON’s format is derived from JavaScript object syntax, but it is entirely text-based. It is a key-value data format that is typically rendered in curly braces.

You may expect to see JSON both as a .json file, OR within JavaScript as an object or a string.

How to work with JSON:

https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript

More > Introduction to JSON:

GitHub Markdown Format

Learning md format for README.md – that’s how you are handing in documentation.

Contains information about:

What the project does

Why the project is useful

How users can get started with the project

Who maintains and contributes to the project

Where users can get help with your project

Makers of Node.js took JavaScript that is confined to a browser and they allowed to run it on your computer.

What you do with node.js:

utilities on your machine

a web server

The introductory video to node.js didn’t explain much to me at this point, I still feel confused about what it is.

Node tutorials: nodeschool.io/#workshoppers

The purpose of node is to be able to run JavaScript on local server and for development of communication that is not meant for a browser.

_________________________________________

What is npm?

In Eloquent JavaScript:

A computer can use Internet to shoot bits at another computer and the computers on both ends must know what the bits are supposed to represent.

A network protocol describes a style of communication over a network. There are protocols for sending email, for fetching email, for sharing files etc.

The Hypertext Transfer Protocol (HTTP) is a protocol for retrieving named resources (chunks of information, such as web pages or pictures). It specifies that the side making the request should start with a line like this, naming the resource and the version of the protocol that it is trying to use:

GET /index.html HTTP/1.1

HTTP treats the network as a streamlike device into which you can put bits and have them arrive at the correct destination in the correct order.

To be able to listen for different kinds of communication at the same time on a single machine, each listener has a number (called a port) associated with it. Another computer can then establish a connection by connecting to the target machine using the correct port number. If the target machine can be reached and is listening on that port, the connection is successfully created. The listening computer is called the server, and the connecting computer is called the client.

The World Wide Web (not to be confused with the Internet as a whole) is a set of protocols and formats that allow us to visit web pages in a browser.

Each document on the Web is named by a Uniform Resource Locator (URL), which looks something like this:

 http://eloquentjavascript.net/13_browser.html |      |                      |               | protocol       server               path

(encrypted HTTP, which would be https://)

Machines connected to the Internet get an IP address, which is a number that can be used to send messages to that machine, and looks something like 149.210.142.219 or 2001:4860:4860::8888. A domain name replaces the IP address.

HTML, which stands for Hypertext Markup Language, is the document format used for web pages.

Weiser in his 1999 article about the future of computer writes about how computing is still war away from being approachable by the general public as opposed to the written word. He argues that computers are stil not an integral part of peoples lives and there is a need to integrate computers in such a way so that they would “vanish into the background”and we would “use them without thinking”. 

The article does present many accurate prophesies on how the computer world will look like in 20 years. Weiser complains that VR simulation still takes up an enormous apparatus instead of invisibly expanding the world that already exists, but in the future, he says, the text we see on various surfaces will be replaced by “hardware of embodied virtuality: hundreds of computers per room.” as well as “these hundreds of computers will come to be invisible to common awareness”. He then names many of the devices that we now actually use everyday and compares those future perspectives with the current usability of computer technology.

wGit is a software that allows you to keep track of changes made to a project over time. Git works by recording the changes you make to a project, storing those changes, then allowing you to reference them as needed.

.txt file

git init

init means initialize. The command sets up all the tools Git needs to begin tracking changes made to the project.

Git Workflow

A Working Directory: where you'll be doing all the work: creating, editing, deleting and organizing files

A Staging Area: where you'll list changes you make to the working directory

A Repository: where Git permanently stores those changes as different versions of the project

git status

Check status of the changes on the working directory.

git add

In order for Git to start tracking the document, the file needs to be added to the staging area.

git add filename

git diff

Since the file is tracked, we can check the differences between the working directory and the staging area with get diff.

get diff changes.txt

The staging area is indicated in white. Changes in the file are indicated in green and marked with a +.

Add the changes to the staging area in Git:

git add scene-1.txt

So the changes are saved.

git commit

A commit is the last step in our Git workflow. A commit permanently stores changes from the staging area inside the repository.

However, one more bit of code is needed for a commit: the option -m followed by a message:

git commit -m "Complete first line of dialogue"

git log

Often with Git, you'll need to refer back to an earlier version of a project. Commits are stored chronologically in the repository and can be viewed with git log.

In the output, notice:

A 40-character code, called a SHA, that uniquely identifies the commit. This appears in orange text.

The commit author (you!)

The date and time of the commit

The commit message

WRAP-UP: Git is the industry-standard version control system for web developers. Use Git commands to help keep track of changes made to a project:

git init creates a new Git repository.

git status inspects the contents of the working directory and staging area.

git add adds files from the working directory to the staging area.

git diff shows the difference between the working directory and the staging area.

git commit permanently stores file changes from the staging area in the repository.

The first task for the Programming II course is to create a simple sketch using P5 libraries combining code from a few examples on the P5js.org page. At the first glance it looks fairly easy, but many of the examples sets up a canvas on the JavaScript file, thus making it difficult to layer different functions as the code overlaps. I will watch some introductions to creating with p5 on YouTube to get an understanding what is possible with p5. Maybe I could manage to create a video and graphics application? This is something that I found out about processing and p5.js:

Processing is a project from 2001 bringing the idea of creative coding (creative applications/expression through programming). Processing was first built on Java, though today browsers listen to JavaScript. p5.js is a processing project and it is a simple environment to help learn JavaScript and make interesting creative applications to run on a browser. It is a library of functions and an online editor to code in.

Created by Lauren McCarthy, her projects can be found here: http://lauren-mccarthy.com/

I got caught by one tutorial on how to make the browser take a video of you and paint the pixels in real time on the web browser screen. It uses the idea similar to the Video Capture and Video Pixels example on p5js.org, but instead of a local video, it broadcasts live video from computer camera.

The sketch uses a live video and a single particle that moves randomly and draws a trail of itself. The video is shown on the browser via a video dom element from p5.js library. The particle grabs color from the video and then the particle is multiplied to create the full image. In the HTML doc I used CDN links for dom and sound libraries.

(insert screenshot)