Week 14 – HTML and P5JS – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    <script src="ex1.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

<html>

<head>

<title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>

</head>

<body>

</body>

</html>

// ex1.js - put canvas in a variable and move it around (load ex1.html)

var myCanvas; 

function setup() {
    myCanvas = createCanvas(80, 80);
}

function draw() {
    background(255);
    myCanvas.position(noise(millis() / 2000) * 200,
                      noise(10 + millis() / 2000) * 200);
    fill("red");
    rect(0, 0, 50, 50);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// ex1.js - put canvas in a variable and move it around (load ex1.html)

var myCanvas;

function setup() {

myCanvas = createCanvas(80, 80);

}

function draw() {

background(255);

myCanvas.position(noise(millis() / 2000) * 200,

noise(10 + millis() / 2000) * 200);

fill("red");

rect(0, 0, 50, 50);

}

<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    <script src="ex2.js" type="text/javascript"></script>
  </head>
  <body>
Mankind has always been fascinated by mechanical simulations of human
  activity. A characteristic of Western thought is to understand our
  minds, bodies, and our world in mechanistic terms. Music especially
  has been viewed as a mathematical and mechanical process. As a
  result, musicians, scientists, and engineers have devised all sorts
  of mechanisms and systems for composing and performing music. I will
  review some or these activities their evolution over the last 2000
  years, ending with some recent findings on how a human audience
  relates to humanoid robot performers and how music can be composed
  by computers.
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

<head>

<title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>

</head>

<body>

Mankind has always been fascinated by mechanical simulations of human

activity. A characteristic of Western thought is to understand our

minds, bodies, and our world in mechanistic terms. Music especially

has been viewed as a mathematical and mechanical process. As a

result, musicians, scientists, and engineers have devised all sorts

of mechanisms and systems for composing and performing music. I will

review some or these activities their evolution over the last 2000

years, ending with some recent findings on how a human audience

relates to humanoid robot performers and how music can be composed

by computers.

</body>

</html>

// ex2.js - rotating box in a canvas over HTML text (load ex2.html)

var myCanvas; 

function setup() {
    myCanvas = createCanvas(80, 80);
}

function draw() {
    background(255);
    myCanvas.position(noise(millis() / 2000) * 200,
                      noise(10 + millis() / 2000) * 200);
    fill("red");
    translate(40, 40);
    rotate(millis() / 1000);
    rect(-25, -25, 50, 50);
    pop();
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// ex2.js - rotating box in a canvas over HTML text (load ex2.html)

var myCanvas;

function setup() {

myCanvas = createCanvas(80, 80);

}

function draw() {

background(255);

myCanvas.position(noise(millis() / 2000) * 200,

noise(10 + millis() / 2000) * 200);

fill("red");

translate(40, 40);

rotate(millis() / 1000);

rect(-25, -25, 50, 50);

pop();

}

<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    <script src="ex3.js" type="text/javascript"></script>
  </head>
  <body>
Mankind has always been fascinated by mechanical simulations of human
activity. A characteristic of Western thought is to understand our
minds, bodies, and our world in mechanistic terms. Music especially
has been viewed as a mathematical and mechanical process. As a result,
musicians, scientists, and engineers have devised all sorts of
mechanisms and systems for composing and performing music. I will
review some or these activities their evolution over the last 2000
years, ending with some recent findings on how a human audience
relates to humanoid robot performers and how music can be composed by
computers.
    <br><br>
    <div align="center" id="aPlaceForCanvas"></div>
    <ol>
      <li>Music was considered by Pythagoras to be a branch of mathematics
      closely related to Arithmetic</li>
      <li>Described by Plato in The Republic as the four arts: Arithmetic,
      Music, Geometry, Astronomy</li>
      <li>Later formalized as the Quadrivium</li>
      <li>Music theory has always had a musical aspect</li>
      <li>Today, music composing, printing, recording, synthesizers … all
      based on digital information processing</li>
    </ol>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<html>

<head>

<title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>

</head>

<body>

Mankind has always been fascinated by mechanical simulations of human

activity. A characteristic of Western thought is to understand our

minds, bodies, and our world in mechanistic terms. Music especially

has been viewed as a mathematical and mechanical process. As a result,

musicians, scientists, and engineers have devised all sorts of

mechanisms and systems for composing and performing music. I will

review some or these activities their evolution over the last 2000

years, ending with some recent findings on how a human audience

relates to humanoid robot performers and how music can be composed by

computers.

<ol>

<li>Music was considered by Pythagoras to be a branch of mathematics

closely related to Arithmetic</li>

<li>Described by Plato in The Republic as the four arts: Arithmetic,

Music, Geometry, Astronomy</li>

<li>Later formalized as the Quadrivium</li>

<li>Music theory has always had a musical aspect</li>

<li>Today, music composing, printing, recording, synthesizers … all

based on digital information processing</li>

</ol>

</body>

</html>

// ex3.js - a little animated banner (load ex3.html)
// Note: a little animated gif would have much less baggage

var myCanvas; 

function setup() {
    myCanvas = createCanvas(400, 10);
    myCanvas.parent('aPlaceForCanvas');
}

function draw() {
    background(255);
    stroke("red");
    strokeWeight(2);
    var offset = int(millis() / 100) % 15;
    for (var i = -15; i < width; i = i + 15) {
        line(i + offset, 0, i + height + offset, height);
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// ex3.js - a little animated banner (load ex3.html)

// Note: a little animated gif would have much less baggage

var myCanvas;

function setup() {

myCanvas = createCanvas(400, 10);

myCanvas.parent('aPlaceForCanvas');

}

function draw() {

background(255);

stroke("red");

strokeWeight(2);

var offset = int(millis() / 100) % 15;

for (var i = -15; i < width; i = i + 15) {

line(i + offset, 0, i + height + offset, height);

}

<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    <script src="ex4.js" type="text/javascript"></script>
  </head>
  <body>
Mankind has always been fascinated by mechanical simulations of human
activity. A characteristic of Western thought is to understand our
minds, bodies, and our world in mechanistic terms. Music especially
has been viewed as a mathematical and mechanical process. As a result,
musicians, scientists, and engineers have devised all sorts of
mechanisms and systems for composing and performing music. I will
review some or these activities their evolution over the last 2000
years, ending with some recent findings on how a human audience
relates to humanoid robot performers and how music can be composed by
computers.
    <br><br>
    <div align="center" id="aPlaceForCanvas"></div>
    <ol>
      <li>Music was considered by Pythagoras to be a branch of mathematics
      closely related to Arithmetic</li>
      <li>Described by Plato in The Republic as the four arts: Arithmetic,
      Music, Geometry, Astronomy</li>
      <li>Later formalized as the Quadrivium</li>
      <li>Music theory has always had a musical aspect</li>
      <li>Today, music composing, printing, recording, synthesizers … all
      based on digital information processing</li>
    </ol>
  </body>
</html>