Week 10

Mobile and Chrome

Bye Bye Preload() , Hello Call back

var town;
var url;
var name;
function setup() {
createCanvas(400, 400);
background(200,200,100);
town = createInput("london");
name = town.value();
url = "https://api.openweathermap.org/data/2.5/forecast?q=" + name + "&APPID=e4d37ccc2c4f3977c2e466fa78b38fcb&units=metric"
loadJSON(url,gotData);
}
function gotData(data){
console.log(data.list[0].main.temp);
text(data.list[0].main.temp,100,30);
}
function draw() {
}

Download

Use Chrome

Click Sensors

Click Orientation

deviceMoved()

var value = 0;
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function deviceMoved() {
value = value + 5;
if (value > 255) {
value = 0;
}
}

deviceTurned()

var value = 0;
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function deviceTurned() {
if (turnAxis === 'X') {
if (value === 0) {
value = 255;
} else if (value === 255) {
value = 0;
}
}
}

deviceShaken()

var value = 0;
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function deviceShaken() {
value = value + 5;
if (value > 255) {
value = 0;
}
}

deviceShaken()

// Jiashan Wu
// https://github.com/OhJia/p5MobileWebExamples
// Revised Daniel Shiffman
var balls = [];
function setup() {
createCanvas(windowWidth, windowHeight);
for (var i = 0; i < 15; i++) {
balls.push(new Ball());
}
setShakeThreshold(50);
}
function draw() {
background(0);
for (var i = 0; i < balls.length; i++) {
balls[i].move();
balls[i].turn();
balls[i].display();
}
}
function deviceShaken() {
for (var i = 0; i < balls.length; i++) {
balls[i].shake();
}
}

Geo-location

// must be in HTTPS
function setup() {
createCanvas(windowWidth, windowHeight);
console.log('starting');
noStroke();
// get position once
if (!navigator.geolocation) {
alert("navigator.geolocation is not available");
}
navigator.geolocation.getCurrentPosition(setPos);
}
function setPos(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
background(0);
fill(255);
textSize(32);
text("Current position: " + nf(lat,2,2) + " " + nf(lng,2,2), 10, height/2);
}

Mobile phone - USB debugging

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=en

Server.js - HTML - Editor - Terminal

Web Development

MEAN Stack

Assignment

10 Minute talk on your final project: can be either formal or informal