Robyn Overstreet robynitp

Networked Media Week 1 Assignment

Spring 2015

The focus of this assignment is process over product. Each example script builds on the previous one. We're starting small and working iteratively. Download this gist and work off of my examples to build your own scripts. You should run the code on your local machine using Node and Servi. See below for how to submit the completed exercise.

TASK: Create a server in Servi to manage a barebones, text-based website. The site will have the following elements:

A home page
Two or more additional static pages, such as "About", "Jokes", "Cat Photos", "Resume", etc. etc.
A set of dynamically generated pages that all have the same basic structure, but change content based on information provided by the user in the URL. For example, on Facebook, each person's profile page looks basically the same, it just has their particular name, posts, photos, etc. Of course, your task is much more simple. For example you might have a page that says "Hello Jack" vs. "H

Publish some JSON data of your own by forking this gist. Delete my example data and add your own. It can be anything: a list of your favorite songs, statistics on global warming, the number of steps you took in a day. It should be in valid JSON. Use JSON Editor Online to check if your JSON is valid.

For an additional JSON example see this gist with weather data as well as the example files in the JSON folder for week 2.


	// A simple Particle class, renders the particle as an image

	class Particle {
	PVector loc;
	PVector vel;
	PVector acc;
	float lifespan;
	PImage img;

	<!DOCTYPE HTML>
	<html>
	<head>
	<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.js"></script>
	<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/addons/p5.dom.js"></script>
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
	</head>

	<body>
	<h1>Hello JSON</h1>

	var img;

	function preload(){
	img = loadImage("lisa.png");
	}

	function setup(){
	createCanvas(500,382);
	image(img,0,0);
	loadPixels();

	var title = "What I'm Drinking Now";
	//var cocktails = [];
	var marioB;
	var crocs;
	var clickCounter = -1;
	var cocktails;
	var value = 0;

	function preload() {
	cocktails = loadStrings("cocktails.txt"); // this is an array