> For the complete documentation index, see [llms.txt](https://icl.doyoki.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://icl.doyoki.com/week-10.md).

# 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="/files/-LR7OoOnJakAomhJap\_W" %}
MOBILE
{% endfile %}

## Use Chrome

![](/files/-LR7P6f0t5HyzrT3ZjzH)

![](/files/-LR7PHxqOm5fqpKH7hNv)

![](/files/-LR7PKUyHcKtWMiy8dt_)

## Click Sensors

![](/files/-LR7P_iGvwve74srA0j1)

## Click Orientation

![](/files/-LR7PsqZi1XXCicVaZNL)

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

![](/files/-LR9fzo76UV_vFDGBwWX)

![](/files/-LR9g34V1JuhlPoYmiD4)

## Web Development

![](/files/-LR9iLa2f5pvxO9aq5nf)

## MEAN Stack

![](/files/-LR9iTnEXiCTO-Z4erGC)

## Assignment&#x20;

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