# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://icl.doyoki.com/week-10.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.