ICL
Search…
Week 10
Mobile and Chrome

Bye Bye Preload() , Hello Call back

1
var town;
2
var url;
3
var name;
4
5
6
function setup() {
7
createCanvas(400, 400);
8
background(200,200,100);
9
10
11
town = createInput("london");
12
13
name = town.value();
14
url = "https://api.openweathermap.org/data/2.5/forecast?q=" + name + "&APPID=e4d37ccc2c4f3977c2e466fa78b38fcb&units=metric"
15
16
loadJSON(url,gotData);
17
18
}
19
20
21
function gotData(data){
22
console.log(data.list[0].main.temp);
23
text(data.list[0].main.temp,100,30);
24
}
25
26
27
function draw() {
28
}
29
30
Copied!

Download

10_mobile.zip
3MB
Binary
MOBILE

Use Chrome

Click Sensors

Click Orientation

deviceMoved()

1
var value = 0;
2
function draw() {
3
fill(value);
4
rect(25, 25, 50, 50);
5
}
6
function deviceMoved() {
7
value = value + 5;
8
if (value > 255) {
9
value = 0;
10
}
11
}
Copied!

deviceTurned()

1
var value = 0;
2
function draw() {
3
fill(value);
4
rect(25, 25, 50, 50);
5
}
6
function deviceTurned() {
7
if (turnAxis === 'X') {
8
if (value === 0) {
9
value = 255;
10
} else if (value === 255) {
11
value = 0;
12
}
13
}
14
}
Copied!

deviceShaken()

1
var value = 0;
2
function draw() {
3
fill(value);
4
rect(25, 25, 50, 50);
5
}
6
function deviceShaken() {
7
value = value + 5;
8
if (value > 255) {
9
value = 0;
10
}
11
}
Copied!

deviceShaken()

1
Copied!
1
// Jiashan Wu
2
// https://github.com/OhJia/p5MobileWebExamples
3
// Revised Daniel Shiffman
4
5
var balls = [];
6
7
function setup() {
8
createCanvas(windowWidth, windowHeight);
9
for (var i = 0; i < 15; i++) {
10
balls.push(new Ball());
11
}
12
setShakeThreshold(50);
13
}
14
15
function draw() {
16
background(0);
17
18
for (var i = 0; i < balls.length; i++) {
19
balls[i].move();
20
balls[i].turn();
21
balls[i].display();
22
}
23
}
24
25
26
function deviceShaken() {
27
for (var i = 0; i < balls.length; i++) {
28
balls[i].shake();
29
}
30
}
Copied!

Geo-location

1
// must be in HTTPS
2
function setup() {
3
createCanvas(windowWidth, windowHeight);
4
console.log('starting');
5
noStroke();
6
// get position once
7
if (!navigator.geolocation) {
8
alert("navigator.geolocation is not available");
9
}
10
navigator.geolocation.getCurrentPosition(setPos);
11
}
12
13
function setPos(position) {
14
var lat = position.coords.latitude;
15
var lng = position.coords.longitude;
16
background(0);
17
fill(255);
18
textSize(32);
19
text("Current position: " + nf(lat,2,2) + " " + nf(lng,2,2), 10, height/2);
20
}
21
Copied!

Mobile phone - USB debugging

Server.js - HTML - Editor - Terminal

Web Development

MEAN Stack

Assignment

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

Last modified 3yr ago