Week 02 Notes - rybotron/wnm498genart_f14 GitHub Wiki

Workflow with JS libraries:

Mozilla Developer Network

Shared Knowledge for the open web

The Mozilla Developer Network (MDN) is an evolving learning platform for Web technologies and the software that powers the Web, including:

Web standards such as CSS, HTML, and JavaScript Open Web app development Firefox add-on development Firefox OS development

  • The MDN is the definitive source for HTML5, CSS, APIs, and Javascript and will become your best friend!

A few Javascript Basics from the MDN:

What is p5.js?

p5.js Overview

p5.js is a JavaScript library that starts with the original goal of Processing—to make coding accessible for artists, designers, educators, and beginners—and reinterprets this for today's web.

Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

p5.js is a new interpretation, not an emulation or port, and it is in active development. You can also read how this differs from processing.js, or about how this relates to Processing.

A disclaimer / invitation: p5.js, like a lot of things on the web, is in active development and flux. This means: (1) If something isn’t working as expected you have to determine whether it’s a problem with your code or a bug in the library.

(2) Not everything is documented. At times this can be frustrating, but ultimately, the lesson is a good one: question everything, never assume. Keep track of what you’re doing and practice systematic ways of breaking down problems to find solutions. Google is your friend, don’t be afraid of what you don’t know.

Demo

HTML Setup

<!DOCTYPE html> 
<head>
    <script type="text/javascript" src="js/p5.js"></script>
    <script type="text/javascript" src="js/sketch.js"></script>
</head>
<body>
</body>

sketch.js Setup

function setup() {
    // Setup the our drawing canvas size
    // Give variables values
}

function draw() {
    // This is our drawing loop that runs at 60fps
    // 60 times per second the background will overwrite itself and then draw an ellipse
    background(255);
    ellipse(50, 50, 80, 80);
}

Terminal & setting up a Python SimpleHTTPServer

Tutorial: MacOS Python SimpleHTTPServer steps

Commonly used terminal commands:

  • ~ is your home directory
  • pwd - page working directory shows the current directory you are in
  • ls - lists the directory contents
  • cd - change directory
  • cd ~ will take you back to your home directory wherever you are in the filesystem
  • cd .. will take you up one directory
  • cd / will take you to the root directory
  • A great OSX short cut is to type cd with one space, then drag the folder into the terminal you want hit return, Voila!

Python SimpleHTTPServer

  • You can turn any directory on your system into a web directory
  • At the command prompt type “python -m SimpleHTTPServer” will start a simple web server on your system at port 8000 at the current working directory.
  • Also you can set the port you want the server to run on by adding the port number to the end of the command ““python -m SimpleHTTPServer 8080”
  • You can access the server
  • 127.0.0.1:8000
  • localhost:8000
  • Your IP address plus the port number for example 192.168.1.100:8000

HTML Canvas

  • The canvas element is used to draw graphics with JavaScript. It can be used to create things like graphs, photo collages, and simple and complex animations.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

  • The default Canvas size for p5.js is 100 x 100

  • In your setup function use createCanvas( windowWidth, windowHeight ) to fit the browser screen

    function setup() { createCanvas(500, 500); // createCanvas(windowWidth, windowHeight); // System Variable built in with p5 // window.innerWidth, window.innerHeight } function draw() { // ellipse(50, 50, 80, 80); ellipse(width / 2, height / 2, width, height); }

Inserting the Canvas into a Div

In your body of index.html:

<div id="c"></div>

In your setup function of sketch.js

var myCanvas = createCanvas(500,500); //storing the canvas in a variable
myCanvas.parent(“container”);

See the p5.js reference for mouse, keyboard, and touch inputs

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️