Creative Programming Notes

Will Luers

Creative Programming Project 20%

This project is intended to loosen you up with programming. Don’t worry about a polished project or user practicality. The idea is to work with your knowledge of JavaScript and jQuery to build interesting/creative objects. This could be the template or start of your final project, or it could just be some crazy idea you come up with as you play around. In fact, the crazier, the better. You will be graded on your effort and your process of discovery.

AUDIO/VIDEO

Audio/Video and JavaScript

jQuery and the DOM

video-audio-javascript
video-audio-javascript zip

miro converter
freesound

 

Objects

 

Using Math.random

GENERATIVE/RANDOM – Math.random

random pizza


function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

var x = getRandomInt(0, 20);

 

Interactive Tools

 

HTML5 Geolocation

 HTML5 Audio/Video

 

Skrollr + JavaScript

Skrollr resource page

Tell-Tale Heart – skrollr triggering audio

 

Data Visualization

d3js.org

 

JavaScript 2D and 3D Animation

three.js – library works with WebGL, a Javascript API for 3D animation 

anime-js : javascript animation engine

sketch.js : finger drawing on canvas

p5js.org/ : processing > javascript for fun and art, creative programming

 

HTML5 Games:

Student Projects:

Ideas:

Resources:

 

 

Final Project

Will Luers

Project 3- Final Project 25%

Build a responsive skrollr web app that uses some JavaScript and some  jQuery  on a subject of your choice.  While the project is open, think how you can develop an idea with a segmented narrative. Use the scroll/swipe template I provided as a starting point, but  please take the project in your own direction.  It should look like your own project, not the template with some styles!   Also, include a designed web app icon for your project so that mobile users can save your projects to the home screen.

Multimedia means using text, images, video, audio, maps in an integrated way. Javascript and jQuery can be used to add animation, create galleries, video/audio play buttons, interactive bits -anything you want. You may use jQuery/JavaScript for pagination and controlling swipes in multiple directions, as shown in the template.

Project Landing Page/Statement:
To provide good documentation for your portfolio, please include a project statement (on an about page or jQuery pop-up) describing the purpose and features of your web app and some of the challenges you experienced in the design/building process. Include information about the class (dtc477) as well as the coding languages and APIs that you used.

Design Process:
research
play/invent
prototype
iterate

Map Story

Will Luers

Project #1 Map Story –  (10%)

Build a site using the Mapbox API .  Create a map with at least 5 markers that tells a story about a place you visited, lived in, would like to visit or make fictional journey across different locations. Include images and text, video/audio (if needed) and a Mapbox map with javascript and interactive features with jQuery.

———————————–

GET STARTED:

Sign-in to Mapbox. You will need an API access token to configure maps. Just follow instructions.

Mapbox GL JS API 

Mapbox GL JS examples

Mapbox blog

Mapbox Examples

CUSTOM STYLES:

Mapbox Styles reference

Mapbox Styles Gallery

Mapbox Studio to access map style

EXAMPLE MAP (with jQuery):

mapbox-markers-example

mapbox-markers-example.zip

How to get latitude and longitude for your map locations?

  1. Go to Google Maps.
  2. Search for a place.
  3. Control click any place on the map.
  4. In the pop-up, you will see “What’s Here?”. Click that and at the bottom of the page you will see that lat/long coordinates.
  5. Click this and the map will zoom to that location and at the top of the left sidebar you will be able to copy the lat/long

 

JavaScript Object Notation:

intro to JSON-javascript object notation, used for storing and exchanging data.

 

*This class had previously used Google Maps API, but they now require a credit card. So I switched to the more elegant Mapbox API. It does not have the very cool Streetview capability.

Innovative Map Projects  (for inspiration)

Student Examples

 

 

Javascript

Will Luers

Computational Thinking

Stonehenge, an analog computer?
      • decomposition – break down problem into small pieces
      • pattern recognition – find similarities and patterns
      • abstraction – with patterns, remove the inessential (differences)
      • algorithmic design – based on abstractions, come up with a list of steps to solve problem / do task

1-200 sum
Robot triangles exercise
triangles script

Programming Concepts

statements
variables
data types: strings, numbers, booleans, arrays
basic operators and “shortcut” operators 
comparison operators 
arrays
objects / methods / properties
functions 
loops (for loops)
conditional statements
scope

Chrome Development Tools overview

Build Circle Pattern

Student Pairings

Git & GitHub:

Git Terms from Github Glossary:

  • Repository
  • Branch
  • Merge
  • Clone
  • Pull
  • Pull request
  • Fork
  • Fetch
  • Push
  • Commit
  • Markdown

 

Skrollr

Will Luers

Overview of   Responsive Skrollr Template  | download zip file

Adding scroll count:
HTML:

<div id="scrollCount">0</div>

CSS:

#scrollCount {
position: fixed;
top:100px;
right: 10px;
width: 2em;
padding: 1px;
color: black;
background: white;
z-index: 11;
}

jQuery ($document.ready() at bottom of page):

 $(window).scroll(function() {
var scrollTop = $(window,'html, body').scrollTop();
$('#scrollCount').html(scrollTop);
});

CSS3 Generator
Explore/Read these sites:
The Walking Dead “Zombiefied” An interactive look at zombie makeup in the AMC hit show.
Creating game-style parallax scrolling: Zombie Edition – Dev.Opera

photoshop-sprite-sheet
html5-animation-sprite-sheet-photoshop

Dustin Speer
Ben Steele

 

Responsive Design

Will Luers

javascript-tutorial-learn-the-basics-udemy

Why Responsive Design?

Responsive Template
html flow
cascade principle
inheritance (only change styles that need to change)
percentages! (do the math)
max-width and min-width (limit max or min width)
height values are tricky
responsive images (100% of container parent)
modular design
breakpoints based on design not device
mobile first!

Media Queries Overview
workflow – sketches, create boxes of content
Approximate Breakpoints:
1200px
960px
768px
600px
480px
320px

Examples:
http://anderssonwise.com/
http://www.designweekportland.com/
http://westspacejournal.org.au/
http://mappeditions.com/
http://www.evolveartistic.com/
http://colly.com/

Student Project (ipsi)

Define hierarchy
Sketch
Define breakpoints and changes

Previous dtc477 skroller project

More projects

 

Net Neutrality (dtc student site)

WORKSHOP: How To Project

Introduction

Will Luers

Why JavaScript?

JavasScript and future jobs

Computers are deterministic machines. They do exactly what they are told. Programming  is the process of problem solving with a computer, on its terms. Not exactly a language.

The Challenges of this Class:

    • detail-work + testing + lots of frustrations! = learning
    • logical/sequential/ordered thinking (step-by-step)
    • creative problem solving (big picture > small unit)
    • interaction design

Eloquent JavaScript– this is a good book for understanding. its online and free.

Review HTML/CSS, introduce Forms…

Types of Projects:

Websites and Digital Books
Pagination – scroll/swipe
Arrays – storing , structuring and retrieving data
Animation – graphic devices, sprites,  dynamic infographics and imagery,
Audio/Video – players, interactivity
Interaction (tap, click, type, drag, drop, draw )

Web Apps
APIs  (Application Programming Interface)
mash-up: geolocation, databases, social media.

Creative Programming
Art, Creative Writing, Drawing
Text/Media manipulation – dynamic, generative, networked

HTML5 Games
Computation – keyboard games, adventure, inventory

Student 477 Projects:

HTML5 Development:

Development Tools & Resources:

  • Sublime Text
  • Chrome console:
    -Mac: cmd + option+j or inspect element
    -PC: control+shift+j or inspect element

 

Cyberduck: uploading files using an FTP (file transfer protocol) client

Steps to upload to remote server:

  1. “Open Connection”
  2. Enter the following info:
    servername: dtc-wsuv.org
    username: first initial + last name +year started + @dtc-wsuv.org , all in lowercase, no spaces or symbols (so, “Sam Jones” who started DTC355 in 2017 would be “sjones17@dtc-wsuv.org”)
    password: random password sent to you by Greg
  3. If successful, you should be in your personal server directory that has the same name as your username. Now you can either drag the folder and files in that directory or use the “action” menu to “upload”
  4. Please upload folders with the following names in all lowercase: “placestory” for the place story project, for example. You can always change the folder and file names on the remote server, as you would on your desktop.
  5. Make sure that your default page for the project is “index.html”
  6. Check how everything looks on the live absolute URL:
    http://dtc-wsuv.org/sjones/placestory/
  7. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!
  8. When you are ready to hand in your project, email me the URL (wluers@gmail.com)

—————————