# Week 10

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

 
```

#### &#x20;<https://editor.p5js.org/kdoodoo/sketches/B17AhWwa7>

####

## Download&#x20;

{% file src="<https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR7OgJ-rVD2c_bDc0V7%2F-LR7OoOnJakAomhJap_W%2F10_mobile.zip?alt=media&token=e7376533-45af-4018-9122-e08b5b2b6b09>" %}
MOBILE
{% endfile %}

## Use Chrome

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR7OgJ-rVD2c_bDc0V7%2F-LR7P6f0t5HyzrT3ZjzH%2FScreen%20Shot%202018-11-12%20at%2011.51.25%20PM.png?alt=media\&token=2ebd40e8-52b8-4450-8060-e31a3b76f96c)

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR7OgJ-rVD2c_bDc0V7%2F-LR7PHxqOm5fqpKH7hNv%2FScreen%20Shot%202018-11-12%20at%2011.52.39%20PM.png?alt=media\&token=55164087-b1f1-4cdd-bdfb-b4c7079d1311)

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR7OgJ-rVD2c_bDc0V7%2F-LR7PKUyHcKtWMiy8dt_%2FScreen%20Shot%202018-11-12%20at%2011.52.31%20PM.png?alt=media\&token=ebb4c585-09a1-4f9d-87e9-6cb3108e3cce)

## Click Sensors

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR7OgJ-rVD2c_bDc0V7%2F-LR7P_iGvwve74srA0j1%2FScreen%20Shot%202018-11-12%20at%2011.53.55%20PM.png?alt=media\&token=e135975a-d213-497d-b585-e85314a9a5b7)

## Click Orientation

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR7OgJ-rVD2c_bDc0V7%2F-LR7PsqZi1XXCicVaZNL%2FScreen%20Shot%202018-11-12%20at%2011.54.57%20PM.png?alt=media\&token=ea9bdc31-9825-4d22-b343-e798aa920ca5)

## 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

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR9fm_NQCRUqGCrWsL7%2F-LR9fzo76UV_vFDGBwWX%2FScreen%20Shot%202018-11-13%20at%2010.26.30.png?alt=media\&token=4780edd6-311a-45e9-a260-cf5a24686c48)

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR9fm_NQCRUqGCrWsL7%2F-LR9g34V1JuhlPoYmiD4%2FScreen%20Shot%202018-11-13%20at%2010.26.08.png?alt=media\&token=eb1a744f-cd55-417b-973e-a16f221c3dca)

## Web Development

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR9iFSbAUdqvVKedhYY%2F-LR9iLa2f5pvxO9aq5nf%2Fimage33-3uneg3lque.png?alt=media\&token=205c6b0e-6bdb-4d04-8cda-a71971b51df5)

## MEAN Stack

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LR9iFSbAUdqvVKedhYY%2F-LR9iTnEXiCTO-Z4erGC%2Fkickstarting-nodejs-projects-with-yeoman-35-638.jpg?alt=media\&token=0f35a146-5ae9-4998-880e-785518fcb280)

## Assignment&#x20;

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