So, this is an attempt to feed a p5js canvas (or buffer in my case)

to A-Frame and then put it on a plane.

​

At the moment I call toDataURL() and then pass that as

data....which can't be the best way, but it does seem snappy.

​

Not worked out if you can handle mouseEvents yet. Not likely. 

I mean, how would you even work out mouseX (on an angled sketch a-entity)?

​

Tom Smith.

​

*/

​

let x = 0

let buffer

let w = 512

let h = 512

​

​

function preload(){

  buffer = createGraphics(w, h)  

}

​

function setup() {

  canvas = createCanvas(w, h)//If you noCanvas() it doesn't work.

  canvas.hide()

  frameRate(20)//slow it down a bit

  // Set up the buffer...

  buffer.background("yellow")

  buffer.textSize(40)

  buffer.noStroke()

  //print(buffer)

  buffer.background("yellow")

  buffer.fill("red")

  buffer.circle(50, 50, 200)

  buffer.fill("cyan")

  buffer.text("Hello!", 50, 50)

  createBubbles() //Add some random objects.

}

​

​

function draw(){

  buffer.background("yellow")

  buffer.fill(255,0, 255, 100)

  buffer.circle(random(width), random(height), x, 40)

  buffer.fill(color(250, 0, 250, 50))  

  buffer.rect(mouseX, mouseY, 100, 100)

  buffer.fill(random(100,200), random(100, 200), random(255) )

  buffer.text("Hello p5!", x, 50)

  buffer.text("x:" + x, 100, 100)

  buffer.text("mouseX:" + mouseX, 100, 150)

  buffer.text("See how mouseX is global?", 100, 200, 400, 300)

  //img = buffer.get()

  x += 1

  if (x > width)x = 0

​

  let data =  buffer.drawingContext.canvas.toDataURL()

  let myPlane = document.getElementById('myPlane')

  myPlane.setAttribute("material", "src", `url(${data});`);

   myPlane.setAttribute("material", "side", "double");

  let r = map(x, 0, width,0, 360)

  myPlane.setAttribute("rotation", "0 "+ r + " 0")

​

  //myPlane.setAttribute('position', { x: 0, y: 1, z: 2 });

​

}

​

function mouseDragged(){

  fill("red")

  ellipse(mouseX, mouseY, x)

}

​

function mousePressed(){

  print("clicked")

}

​

​

​

​

​

​

​

//Adds a lots of rando objects to the scene via the DOM

function createBubbles(){

  const bubbles = createElement('a-entity').parent('scene').attribute('position', '0 5 0');

  for (let i = 0; i < 50; i++) {

    const x = 15;

    const y = 4;

    createElement('a-sphere').parent(bubbles)

      .attribute('position', `${Math.random() * x - x / 2} ${Math.random() * y - y / 2} ${Math.random() * x - x / 2}`)

      .attribute('radius', Math.random() * 1 + .1)

      .attribute('color', '#dfbe99')

      .attribute('opacity', 0.5);

  }

​

  const houses = createElement('a-entity').parent('scene').attribute('position', '0 0 0');

  for (let i = 0; i < 6; i++) {

    const X = 10;

    const x = Math.random() * X - X / 2;

    const z = Math.random() * X - X / 2;

​

    const house = createElement('a-entity').parent(houses)

      .attribute('position', `${x} 0 ${z}`);

​

    createElement('a-cone').parent(house)

      .attribute('position', '0 0 0')

      .attribute('radius-bottom', .85)

      .attribute('radius-top', .1)

      .attribute('height', 2)

      .attribute('color', '#db5375')

      .attribute('shadow');

​

  }

}

​

// UTILITY

​

const getMethods = (obj) => {

  let properties = new Set()

  let currentObj = obj

  do {

    Object.getOwnPropertyNames(currentObj).map(item => properties.add(item))

  } while ((currentObj = Object.getPrototypeOf(currentObj)))

  return [...properties.keys()].filter(item => typeof obj[item] === 'function')

}