如何在Google Colab中将python变量传递到HTML小部件对象

Question

我用的是谷歌Colab笔记本。我有一个p5html对象，它是一个小部件，它接受一个调色板和一个引号，然后生成一个动画。如果我将调色板和引号硬编码到HTML对象中，它就工作得很好，但是一旦我尝试通过变量传递它，它就不再工作了。我想知道是否有一种特定的方法可以将它们传递到HTML小部件中？任何帮助或指导都将不胜感激！以下是我的代码：

def CreateAnimation(p,q):
  
  animation = widgets.HTML('''
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
  <script>
  new p5();
  let numBalls = 40;
  let spring = 0.1;
  let gravity = 0.0001;
  let friction = -0.9;
  let balls = [];

  let paletteList = p;
  let phrase = q;

  function setup() {
    createCanvas(600, 500);
    for (let i = 0; i < numBalls; i++) {
      balls[i] = new Ball(
        random(width),
        random(height),
        random(30, 110),
        i,
        balls,
        color(random(paletteList))
      );
    }
    noStroke();
    fill(255, 204);
  }

  function draw() {
    let x = map(mouseX, 0, width, 0, 255, true)
    background(x);
    balls.forEach(ball => {
      ball.collide();
      ball.move();
      ball.display();
    });
    push();
      fill(map(mouseX, 0, width, 255, 0, true));
      textSize(40);
      text(phrase, (width/2 - width/2.5),(height/2 - height/4.5), height, width);
    pop();
  }

  class Ball {
    constructor(xin, yin, din, idin, oin, hexin) {
      this.x = xin;
      this.y = yin;
      this.vx = 0;
      this.vy = 0;
      this.diameter = din;
      this.id = idin;
      this.others = oin;
      this.hex= hexin;
    }

    collide() {
      for (let i = this.id + 1; i < numBalls; i++) {
        let dx = this.others[i].x - this.x;
        let dy = this.others[i].y - this.y;
        let distance = sqrt(dx * dx + dy * dy);
        let minDist = this.others[i].diameter / 2 + this.diameter / 2;
        if (distance < minDist) {
          //console.log("2");
          let angle = atan2(dy, dx);
          let targetX = this.x + cos(angle) * minDist;
          let targetY = this.y + sin(angle) * minDist;
          let ax = (targetX - this.others[i].x) * spring;
          let ay = (targetY - this.others[i].y) * spring;
          this.vx -= ax;
          this.vy -= ay;
          this.others[i].vx += ax;
          this.others[i].vy += ay;
        }
      }
    }

    move() {
      this.vy += gravity;
      this.x += this.vx;
      this.y += this.vy;
      if (this.x + this.diameter / 2 > width) {
        this.x = width - this.diameter / 2;
        this.vx *= friction;
      } else if (this.x - this.diameter / 2 < 0) {
        this.x = this.diameter / 2;
        this.vx *= friction;
      }
      if (this.y + this.diameter / 2 > height) {
        this.y = height - this.diameter / 2;
        this.vy *= friction;
      } else if (this.y - this.diameter / 2 < 0) {
        this.y = this.diameter / 2;
        this.vy *= friction;
      }
    }

    display() {
      fill(this.hex);
      ellipse(this.x, this.y, this.diameter, this.diameter);
    }
  }     
  </script>
  ''')
  return animation

#Then call it with something like this:
a=CreateAnimation(['#381A38','#DD9B80','#E6937A','#B18079','#8B636C'],'It is a good day to have a good day')