NMD 105 Creative Coding I

JavaScript helpers

"Green Brain99099" by Luis Ruiz

The three horsemen of the modern web

Where does the name p5js come from? OpenProcessing v. p5js editor: adding files and libraries via sidebar versus in index.html Difference between Open Processing and p5js editor.

HTML

Also called "tags," "elements," "DOM" (Document Object Model)

Consists of branches and nodes

<window>
    ∟ <document>
         ∟ <head>
  	     ∟ <script>
         ∟ <body>
  	     ∟ <div>
  	         ∟ <form>
	         ∟ <image>

Can be nested as "parents" and "children"
Elements are always the same, just used in different combinations
You can view the tag tree with browser tools
You can modify the tag tree using JavaScript

HTML

🎗 Close tags twice

1. Close every tag with an angle bracket ("End angle")


	<div>

2. Close start tags with a bookend tag with a slash ("End tag")


	<div>Welcome to my page!</div>

Plagiarism

Using code

Using media (images and sound)

Fair Use and the teach act

CSS

World Wide Web (W3) Consortium, 1996

HTML + CSS = Web design

JavaScript

Brendan Eich, 1995

HTML + CSS + JavaScript = Web development

JavaScript

Programming languages as Harry Potter characters

JavaScript beyond the web page

Web

Bookmarklets
GreaseMonkey
Extensions
Server scripts (Node.js)

Design and publication

Photoshop, Illustrator, InDesign actions
Scriptable PDFs
e-books (iBook, EPUB)

Productivity

Apps (via electron, eg Slack)
Google Drive (Docs and Sheets)
OS X Scripts

Mobile apps

iPhone/iPad/Android apps (via React Native)

Gaming

3D game engines (Unity, DX Studio, Minecraft)
2D games (HTML5, RPG Maker, Flash)
Vintage computers (via JSMESS)

Art and music

Logic Pro
Animation (via p5.js or Processing.js)

p5js

Dialects require a specialized environment

← →

/