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() {
}

 

https://editor.p5js.org/kdoodoo/sketches/B17AhWwa7

Download

3MB

10_mobile.zip

archive

Open

MOBILE

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