How does bounceBubbles() work?

A post was split to a new topic: You insufferable twits!

2 posts were split to a new topic: Go ■■■■ yourself for deleting my post, you ■■■■■■ little Codecademy moderator

hi im new in coding how can i make my own up using these methods

Welcome to the forums!

Can you clarify your question? Are you asking how you can write your own methods to do something similar to what this program does? If so (and you want to use JavaScript), you can find the Learn JavaScript course here.

1 Like

One would suggest curb one’s ambitions, for now, and concentrate on learning. This time next year you might find this a worthy challenge. Now is not that time.

1 Like

I was wondering the same thing, got any answers?

1 Like

Welcome to the forums!

Could you provide the link to the exercise? What’s likely is that there are other files in this program that affect the colour of letters.

I also tried to understand this an did not find anything.

1 Like

Got the answer

red = [0, 100, 63];

orange = [40, 100, 60];

green = [75, 100, 40];

blue = [196, 77, 55];

purple = [280, 50, 60];

message = ‘Change the color!’;

drawName(message, red);

bounceBubbles();

In the code editor, drawName() now has two items between the parentheses, message , and red . The text in the browser panel has also turned red!

drawName() is a set of repeatable code that we’ve defined elsewhere called a function . We can call the function, or ask the program to run that code, and pass in different values to see different responses. You already did this when you changed the value of the variables that you used to call drawName() . When you call drawName with two different values, you can set the message and the display color.

In addition to red , we’ve defined variables that represent some other colors for you to use.

1 Like

// a language i hope to become familiar with…

I tried this code, it didn’t work for me.

This is not working the say way as in the course
How can we get the same effect ?

Hi, I am completely new to coding and I had a 2 questions about bounceBubbles(). Is there any possible way you could mabye not make it bounce but mabye spin or another animation/something like that? Also what can you put in the brackets? ()

You could, but the animation requires more complex JavaScript that you don’t quite know at this point yet. Maybe come back to this later and experiment once you’ve gotten more comfortable coding! For now, if you want to take a look at the code that actually makes the bubbles bounce, you can click the folder icon in the top left of the code editor and check out the other files in this project.

bounceBubbles() is what we call a function. You’ll learn more about functions if you study any programming language. To oversimply functions, they are essentially reusable chunks of code that you write once but can run throughout your program when you indicate you want to do so. We can pass arguments to functions (i.e. put things inside the brackets), but the way that the code is written right now, nothing should be put inside the brackets. You’ll also learn about arguments when you learn about functions.

1 Like

Yeah what do I write in the bounceBubbles() work?

Welcome to the forums!

Can you clarify your question?

1 Like

there is a difference in the code. Go to the folder symbol on the left and find the map bubbles. Here is the code for the bubbles. If you want the rainbow bubbles, you could figure out how to make them rainbow, but as I am lazy, I went back to the previous assignment and copied the rainbow bubble code and pasted it!

Select all the boring grey bubble code with ctrl + a and delete. then paste the code below with ctrl + v.

function Vector(x, y, z) {
this.x = x;
this.y = y;
this.z = z;

this.set = function(x, y) {
this.x = x;
this.y = y;
};
}

function PointCollection() {
this.mousePos = new Vector(0, 0);
this.pointCollectionX = 0;
this.pointCollectionY = 0;
this.points = ;

this.update = function() {
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];

  var dx = this.mousePos.x - point.curPos.x;
  var dy = this.mousePos.y - point.curPos.y;
  var dd = (dx * dx) + (dy * dy);
  var d = Math.sqrt(dd);

  point.targetPos.x = d < document.mouseResponseThreshold ? point.curPos.x - dx : point.originalPos.x;
  point.targetPos.y = d < document.mouseResponseThreshold ? point.curPos.y - dy : point.originalPos.y;

  point.update();
}

};

this.shake = function() {
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];
var dx = this.mousePos.x - point.curPos.x;
var dy = this.mousePos.y - point.curPos.y;
var dd = (dx * dx) + (dy * dy);
var d = Math.sqrt(dd);
if (d < 50) {
this.pointCollectionX = Math.floor(Math.random() * 5) - 2;
this.pointCollectionY = Math.floor(Math.random() * 5) - 2;
}
point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY);
}
};

this.draw = function(bubbleShape, reset) {
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];

  if (point === null) {
    continue;
  }
  if (window.reset) {
    this.pointCollectionX = 0;
    this.pointCollectionY = 0;
    this.mousePos = new Vector(0, 0);
  }

  point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY, reset);
}

};

this.reset = function(bubbleShape) {};
}

function Point(x, y, z, size, color) {
this.curPos = new Vector(x, y, z);
this.color = color;

this.friction = document.Friction;
this.rotationForce = document.rotationForce;
this.springStrength = 0.05;

this.originalPos = new Vector(x, y, z);
this.radius = size;
this.size = size;
this.targetPos = new Vector(x, y, z);
this.velocity = new Vector(0.0, 0.0, 0.0);

this.update = function() {
var dx = this.targetPos.x - this.curPos.x;
var dy = this.targetPos.y - this.curPos.y;
// Orthogonal vector is [-dy,dx]
var ax = dx * this.springStrength - this.rotationForce * dy;
var ay = dy * this.springStrength + this.rotationForce * dx;

this.velocity.x += ax;
this.velocity.x *= this.friction;
this.curPos.x += this.velocity.x;

this.velocity.y += ay;
this.velocity.y *= this.friction;
this.curPos.y += this.velocity.y;

var dox = this.originalPos.x - this.curPos.x;
var doy = this.originalPos.y - this.curPos.y;
var dd = (dox * dox) + (doy * doy);
var d = Math.sqrt(dd);

this.targetPos.z = d / 100 + 1;
var dz = this.targetPos.z - this.curPos.z;
var az = dz * this.springStrength;
this.velocity.z += az;
this.velocity.z *= this.friction;
this.curPos.z += this.velocity.z;

this.radius = this.size * this.curPos.z;
if (this.radius < 1) this.radius = 1;

};

this.draw = function(bubbleShape, dx, dy) {
ctx.fillStyle = this.color;
if (bubbleShape == ‘square’) {
ctx.beginPath();
ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5);
} else {
ctx.beginPath();
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
ctx.fill();
}
};
}

function makeColor(hslList, fade) {
var hue = hslList[0]; /- 17.0 * fade / 1000.0/
var sat = hslList[1]; /+ 81.0 * fade / 1000.0/
var lgt = hslList[2]; /+ 58.0 * fade / 1000.0/
return ‘hsl(’ + hue + ‘,’ + sat + ‘%,’ + lgt + ‘%)’;
}

function phraseToHex(phrase) {
var hexphrase = ‘’;
for (var i = 0; i < phrase.length; i++) {
hexphrase += phrase.charCodeAt(i).toString(16);
}
return hexphrase;
}

function initEventListeners() {
$(window).bind(‘resize’, updateCanvasDimensions).bind(‘mousemove’, onMove);

canvas.ontouchmove = function(e) {
e.preventDefault();
onTouchMove(e);
};

canvas.ontouchstart = function(e) {
e.preventDefault();
};
}

function updateCanvasDimensions() {
canvas.attr({
height: window.innerHeight - 100,
width: window.innerWidth
});
canvasWidth = canvas.width();
canvasHeight = canvas.height();
draw();
}

function onMove(e) {
if (pointCollection) {
pointCollection.mousePos.set(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top);
}
}

function onTouchMove(e) {
if (pointCollection) {
pointCollection.mousePos.set(e.targetTouches[0].pageX - canvas.offset().left, e.targetTouches[0].pageY - canvas.offset().top);
}
}

function bounceName() {
shake();
setTimeout(bounceName, 30);
}

function bounceBubbles() {
draw();
update();
setTimeout(bounceBubbles, 30);
}

function draw(reset) {
var tmpCanvas = canvas.get(0);

if (tmpCanvas.getContext === null) {
return;
}

ctx = tmpCanvas.getContext(‘2d’);
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

bubbleShape = typeof bubbleShape !== ‘undefined’ ? bubbleShape : ‘circle’;

if (pointCollection) {
pointCollection.draw(bubbleShape, reset);
}
}

function shake() {
var tmpCanvas = canvas.get(0);

if (tmpCanvas.getContext === null) {
return;
}

ctx = tmpCanvas.getContext(‘2d’);
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

bubbleShape = typeof bubbleShape !== ‘undefined’ ? bubbleShape : ‘circle’;

if (pointCollection) {
pointCollection.shake(bubbleShape);
}
}

function update() {
if (pointCollection) {
pointCollection.update();
}
}

function drawName(name, letterColors) {
if (!letterColors) {
letterColors = document.letterColors;
}
updateCanvasDimensions();
var g = ;
var offset = 0;

function addLetter(ccHex, colorIdx, letterCols) {
if (typeof letterCols !== ‘undefined’) {
if (Object.prototype.toString.call(letterCols) === ‘[object Array]’ && Object.prototype.toString.call(letterCols[0]) === ‘[object Array]’) {
letterColors = letterCols;
}
if (Object.prototype.toString.call(letterCols) === ‘[object Array]’ && typeof letterCols[0] === ‘number’) {
letterColors = [letterCols];
}
} else {
// if undefined set black
letterColors = [[0, 0, 27]];
}

if (document.alphabet.hasOwnProperty(ccHex)) {
  var charData = document.alphabet[ccHex].P;
  var bc = letterColors[colorIdx % letterColors.length];

  for (var i = 0; i < charData.length; ++i) {
    point = charData[i];

    g.push(new Point(point[0] * document.sizeRatio + offset,
      point[1] * document.sizeRatio,
      0.0,
      point[2] * document.sizeRatio,
      makeColor(bc, point[3] * document.sizeRatio)));
  }
  offset += document.alphabet[ccHex].W * document.sizeRatio;
}

}

var hexphrase = phraseToHex(name);

var colorIndex = -1;
for (var i = 0; i < hexphrase.length; i += 2) {
var cc_hex = ‘A’ + hexphrase.charAt(i) + hexphrase.charAt(i + 1);
if (cc_hex != ‘A20’) {
colorIndex++;
}
addLetter(cc_hex, colorIndex, letterColors);
}

for (var j = 0; j < g.length; j++) {
g[j].curPos.x = (canvasWidth / 2 - offset / 2) + g[j].curPos.x;
g[j].curPos.y = (canvasHeight / 2 - 105) + g[j].curPos.y;
g[j].originalPos.x = (canvasWidth / 2 - offset / 2) + g[j].originalPos.x;
g[j].originalPos.y = (canvasHeight / 2 - 105) + g[j].originalPos.y;
}

pointCollection = new PointCollection();
pointCollection.points = g;
initEventListeners();
}

window.reset = false;

$(window).mouseleave(function() {
window.reset = true;
});

$(window).mouseenter(function() {
window.reset = false;
});

var canvas = $(’#myCanvas’);
var canvasHeight;
var canvasWidth;
var ctx;
var pointCollection;

document.rotationForce = 0.0;
document.Friction = 0.95;
// Size the text
document.sizeRatio = window.innerWidth / 1500;
// Global mouse-to-point interaction threshold (px)
document.mouseResponseThreshold = 50;

var white = [0, 0, 100];
var black = [0, 0, 27];
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var letterColors = [red, orange, green, blue, purple];
document.letterColors = letterColors;

// Bootstrap canvas size
setTimeout(updateCanvasDimensions, 30);

4 Likes

wow that is rellly long
:o

1 Like

Do you know how to make a game?

1 Like

i just want to say that i am on the path to becoming a programer, and i found your comment useful.
thank you

2 Likes