› ›

Event in canvas triggers html heading style changes question/problem.

AtheistApeAtheistApe
edited September 2016 in p5.js Library Questions

Hello,

I've been playing with p5js by coming up with ideas and trying to implement them in p5js. I've had some success but have an issue with one of my examples that I'm hoping someone can help with.

My example is creating a ball with a random color in the canvas with a mousePressed event which bounces off the edges of the canvas. When the ball hits an edge, it changes the color of the h1 heading on the page to the balls color. Multiple mouse clicks create multiple balls.

Everything seems to work fine except when I click the mouse outside the canvas onto the page. When I do this the heading color no longer changes color when the different colored balls strike the edges of the canvas.

I'm hoping someone can help me trouble-shoot my code as well as offering advice on other ways to improve it.

Also, I tried including my code into code-blocks using ``` but it doesn't seem to work too well. I ended up indenting every line four spaces to get it to render correctly. Any hints here?

sketch.js:

var balls = [];
var heading;
var blip;

function preload() {
  blip = loadSound('blip.wav');
}

function setup() {
  createCanvas(600, 400);
  heading = select('#color_txt');
}

function draw() {
  background(220);
  for (i = 0; i < balls.length; i++) {
   balls[i].move();
   balls[i].display();
 }
}

function mousePressed() {
  ball = new Ball();
  balls.push(ball);
}

function hex_color(r, g, b) {
  var hx = "#" + hex(r,2) + hex(g,2) + hex(b,2);
  return hx;
}

function Ball() {
  this.position = createVector(mouseX, mouseY);
  this.velocity = createVector(random(-4,4), random(-4,4));
  this.col = hex_color(random(255), random(255), random(255));
  this.diam = random(15,50);
  this.rad = 0.5 * this.diam;

  this.move = function() {
    this.position.add(this.velocity);

    if (this.position.x + this.rad > width || this.position.x - this.rad < 0) {
      this.velocity.x *= -1;
      blip.play();
      heading.style('color', this.col);
    }

    if (this.position.y + this.rad > height || this.position.y - this.rad < 0) {
      this.velocity.y *= -1;
      blip.play();
      heading.style('color', this.col);
    }
  }

  this.display = function() {
    fill(this.col);
    ellipse(this.position.x, this.position.y, this.diam, this.diam);
  }
}

index.html:

<html>
  <head>
    <meta charset="UTF-8">
    <title>Vectors</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>

  <body>
    <h1 id='color_txt'>Random balls bouncing around the canvas</h1>
    <p>Click on the canvas to generate a ball or random radius, color
      and velocity</p>
  </body>
</html>
Tagged:

Answers

Sign In or Register to comment.