observable.qmd

---
title: ""
---

```{r}
#| label: load-packages
#| include: false

library(tidyverse)
library(palmerpenguins)
```

```{ojs}
d3 = require("d3@7")
```



```{ojs}
P5 = require("p5")

function* createSketch(sketch) {
  const element = DOM.element('div');
  yield element;
  const instance = new P5(sketch, element, true);
  try {
    while (true) {
      yield element;
    }
  } finally {
    instance.remove();
  }
}

createSketch(s => {

  s.setup = function() {
    s.createCanvas(500, 500, s.WEBGL);
    s.noStroke();
  }

  s.draw = function() {

    s.background(0);

    let locX = s.mouseX - s.height / 2;
    let locY = s.mouseY - s.width / 2;  
    
    s.ambientLight(60, 60, 60);
    s.pointLight(190, 80, 190, locX, locY, 100);
    s.pointLight(80, 80, 190, 0, 0, 100);
  
    s.specularMaterial(255);
    s.rotateX(s.frameCount * 0.01);
    s.rotateY(s.frameCount * 0.01);
    s.torus(150, 80, 64, 64);
  }

})
```

***

```{ojs}
createSketch(s => {
  
    s.setup = function() {
      s.createCanvas(500, 500);
      s.background(0);
      s.noStroke();
    };
    
    s.draw = function() {
      s.translate(
        100 * s.cos(s.millis() * .001 * s.PI),
        100 * s.sin(s.millis() * .001 * s.PI),
      );
      if (s.random(0, 1) < .1) {
        s.fill(s.random(0, 255));
      }
      s.circle(250, 250, 100);
    };
    
  }
)
```

***

```{css}
@import url(https://fonts.googleapis.com/css?family=Avenir);
```

```{ojs}
createSketch(s => {
  
    s.setup = function() {
      s.createCanvas(746, 300);
      s.textFont('Avenir');
      s.textStyle(s.BOLD);
      s.textAlign(s.CENTER, s.CENTER)
    };
    
    s.draw = function() {
      s.translate(
        s.millis() * (-0.1) % (s.width + 1000), 
        s.height / 2
      );
      s.background('#62259D');
      s.fill('#fff').textSize(50);
      s.text('VM303 Studies in Digital Media & Culture', s.width + 500, 0);
    };
    
  }
)
```

***

```{ojs}
createSketch(s => {

  let n = 100;
  let dot;
  let dotList = [];
  let palette = [
    s.color("#6B1B00"),
    s.color("#AE8B70"),
    s.color("#F9FEFB"),
    s.color("#56382D") 
  ];

  s.setup = function() {
    s.createCanvas(746, 746);
    for(let i = 0; i < n; i++) {
      let angle = s.random(0, s.TWO_PI);
      let radius = s.width * s.random(.12, .33);
      dotList.push(dot = new Dot(
        s,
        s.width/2 + s.cos(angle) * radius,
        s.height/2 + s.sin(angle) * radius,
        s.random(palette),
        s.random(1, 5)
      ));
    }
  };
    
  s.draw = function() {
    dotList.map(dot => {
      dot.on();
      dot.move();
      dot.bounce(s.width * .35, true);
      dot.bounce(s.width * .1, false);
    });
  };
})

class Dot {
  constructor(sketch, x, y, colour, size) {
    this.s = sketch;
    this.x = x | 0;
    this.y = y | 0;
    this.colour = colour;
    this.size = size;
    this.velX = this.s.random(-2, 2);
    this.velY = this.s.random(-2, 2);
  }

  on() {
    this.s.noStroke();
    this.s.fill(this.colour);
    this.s.circle(this.x, this.y, this.size);
  }

  move() {
    this.x += this.velX;
    this.y += this.velY;
  }
  
  bounce(radius, inside) {
    let x = this.x - this.s.width/2;
    let y = this.y - this.s.height/2;
    if (
      inside && x*x + y*y > radius * radius ||
      !inside && x*x + y*y < radius * radius
    ) {
    
      // https://math.stackexchange.com/a/611836
      let nx = x / this.s.sqrt(x*x + y*y);
      let ny = y / this.s.sqrt(x*x + y*y);
      let vx = this.velX;
      let vy = this.velY;
      this.velX = (ny*ny - nx*nx)*vx - 2*nx*ny*vy;
      this.velY = (nx*nx - ny*ny)*vy - 2*nx*ny*vx;
    
    }
  }
  
}
```

***

```{ojs}
createSketch(s => {
    s.setup = function() {
      s.createCanvas(500, 500);
      s.background("black");
      s.fill("red").circle(250, 250, 100);
      s.fill("black").circle(250, 250, 30);
    };
  }
)
```