Develop Reference

Replace On Screen Text

I am writing a code for this game where you get a point every time you click on a ball. Your total score should be reflected at the top where the points variable is keeping your score. However the score is being printed on top of itself each time. Meaning that when you go from 0 points to 1 point, the 1 is printed over the 0 and so on. I know I have to remove or replace the previous score before printing the new one but I am new to JavaScript and I am not sure how to go about this.
My code:
var x = Math.floor(Math.random() * 550);
var y = Math.floor(Math.random() * 350);
var r = 40;
var points = 0;
function setup() {
createCanvas(550,350);
background(0);
}
function draw() {
fill (255)
ellipse (x, y, r, r)
text(("Score:" + points), width/2, 40)
}
function inside(mx, my){
let d = dist(mx, my, x, y);
return d < r - 10;
}
function mousePressed() {
if(inside(mouseX, mouseY)){
points++;
}
}

You could try like this by creating div.
var x = Math.floor(Math.random() * 550);
var y = Math.floor(Math.random() * 350);
var r = 40;
var points = 0;
let scoreDiv = null;
function setup() {
createCanvas(550,350);
background(0);
scoreDiv = createDiv('');
scoreDiv.position(width / 2, 40)
scoreDiv.style('color', '#FFFFFF');
}
function draw() {
fill (255)
ellipse (x, y, r, r)
scoreDiv.elt.innerText = `Score: ${points}`;
}
function inside(mx, my){
let d = dist(mx, my, x, y);
return d < r - 10;
}
function mousePressed() {
if(inside(mouseX, mouseY)){
points++;
}
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.3.1/lib/p5.js"></script>

hmm you can simply use innerText to display your score
<p id="score"></p>
function mousePressed() {
var hhi = dist (hballx, hbally, mouseX, mouseY)
ellipse (hballx, hbally, hballsize, hballsize)
if (hhi < hballsize/2) {
hballx = (getRandomInt(550))
hbally = (getRandomInt(350))
score = score + 1;
document.getElementById("score").innerText = score; // it will replace the previous score if the score changes
}
}

How do you make a circle shaped button in p5.js?

I am making a p5.js project. In it I am generating a list (with 8 elements) and setting them to 1/0. Each one represents a bit (1,2,4,8,16,32,64,128) and if the element is 1, I add the index of the bit array.
For example i = 3, states[i] = 1, bit[i] = 8 so I add 8 to a number because the current state of that bit is 1.
Another thing is that it draws a circle that is red/green based on bit state.
Now that you know the basic idea, I want to add the ability for the user to press a circle to change its state (from 1 to 0 and from 0 to 1). I know how to change the state, but how do i test if the user has actually pressed the button (notice that the button is a circle)?
Here is my code so far:
var array = [0,1,0,1,1,1,1,1];
var values = [128,64,32,16,8,4,2,1];
function setup(){
//console.log(array);
createCanvas(600,600);
textStyle(BOLDITALIC);
textSize(50);
}
function draw(){
clear();
var a = calculate(array);
background(51);
fill(255);
text(a,250,500);
let crcl = 50;
let d = 20;
let r = d/2;
for (let i = 0; i < 8; i++){
}
for (let i = 0; i < 8; i++){
if (array[i] === 1){
fill(0,255,0);
circle(crcl, 50, d);
} else {
fill(255,0,0);
circle(crcl, 50, d);
}
crcl += 50;
}
}
function calculate(array){
let a = 0;
for (let i = 0; i < 8; i++){
if (array[i] === 1){
a += values[i];
}
}
return a;
}
My finished code for everyone who just wants to see the code!:
var array = [0,1,0,1,1,1,1,1];
var values = [128,64,32,16,8,4,2,1];
var positonsX = [50,100,150,200,250,300,350,400];
var crcl = 50;
var d = 20;
var r = d/2;
function setup(){
//console.log(array);
createCanvas(600,600);
textStyle(BOLDITALIC);
textSize(50);
}
function draw(){
clear();
let crcl = 50;
d = 20;
r = d/2;
a = calculate(array);
background(51);
fill(255);
text(a,250,500);
for (let i = 0; i < 8; i++){
if (array[i] === 1){
fill(0,255,0);
circle(crcl, 50, d);
} else {
fill(255,0,0);
circle(crcl, 50, d);
}
crcl += 50;
}
}
function calculate(array){
let a = 0;
for (let i = 0; i < 8; i++){
if (array[i] === 1){
a += values[i];
}
}
return a;
}
function mouseClicked(){
for (let i = 0; i < 8; i++){
if (dist(mouseX,mouseY,positonsX[i],50) <= d){
array[i] = 1 - array[i];
}
}
}

You can detect whether a point (in your case, mouseX, mouseY) is in a circle by comparing the distance between the point and the center of the circle, and comparing it to the radius of the circle. If the distance is less than the radius, then the point is inside the circle.
You can google "detect if point is inside circle" for a ton of results. Shameless self-promotion: this tutorials explains collision detection, including point-circle collision detection.

I'd check for mouseClicked (https://p5js.org/reference/#/p5/mouseClicked), and then mouseX, mouseY to see if a circle got clicked.

I had created this class to add circular buttons for one of my projects. Sharing a link to the sketch, might save others some time: p5.js web editor sketch
To check if the mouse pointer is within a circle:
Get the distance between the center of the circle and the mouse pointer
const distance = dist(circleX, circleY, mouseX, mouseY)
Mouse is within the circle if that distance is less that the circle's radius
const isInside = (distance < circleRadius)

How to avoid repeated?

Good day,
I am generating some circles with colors, sizes and positions. All of this things randomly.
But, my problem is that I do not want them to collide, so that no circle is inside another, not even a little bit.
The logic explained in detail within the code, I would like to know why the failure and why the infinite loop.
The important functions are:
checkSeparation and setPositions
window.addEventListener("load", draw);
function draw() {
var canvas = document.getElementById("balls"), // Get canvas
ctx = canvas.getContext("2d"); // Context
canvas.width = document.body.clientWidth; // Set canvas width
canvas.height = document.documentElement.scrollHeight; // Height
var cW = canvas.width, cH = canvas.height; // Save in vars
ctx.fillStyle = "#fff022"; // Paint background
ctx.fillRect(0, 0, cW, cH); // Coordinates to paint
var arrayOfBalls = createBalls(); // create all balls
setPositions(arrayOfBalls, cW, cH);
arrayOfBalls.forEach(ball => { // iterate balls to draw
ctx.beginPath(); // start the paint
ctx.fillStyle = ball.color;
ctx.arc(ball.x, ball.y, ball.radius, 0, (Math.PI/180) * 360, false); // draw the circle
ctx.fill(); // fill
ctx.closePath(); // end the paint
});
}
function Ball() {
this.x = 0; // x position of Ball
this.y = 0; // y position of Ball
this.radius = Math.floor(Math.random() * ( 30 - 10 + 1) + 10);
this.color = "";
}
Ball.prototype.setColor = function(){
for(var j = 0, hex = "0123456789ABCDEF", max = hex.length,
random, str = ""; j <= 6; j++, random = Math.floor(Math.random() * max), str += hex[random])
this.color = "#" + str;
};
function random(val, min) {
return Math.floor(Math.random() * val + min); // Random number
}
function checkSeparation(value, radius, toCompare) {
var min = value - radius, // Min border of circle
max = value + radius; // Max border of circle
// Why ? e.g => x position of circle + this radius it will be its right edge
for(; min <= max; min++) {
if(toCompare.includes(min)) return false;
/*
Since all the positions previously obtained, I add them to the array, in order to have a reference when verifying the other positions and that they do NOT collide.
Here I check if they collide.
In the range of:
[pos x - its radius, pos x + its radius]
*/
}
return true; // If they never collided, it returns true
}
function createBalls() {
var maxBalls = 50, // number of balls
balls = []; // array of balls
for(var j = 0; j < maxBalls; j++) { // create 50 balls
var newBall = new Ball(); // create ball
newBall.setColor(); // set the ball color
balls.push(newBall); //push the ball to the array of balls
}
return balls; // return all balls to draw later
}
function setPositions(balls, canvasW, canvasH) {
var savedPosX = [], // to save x pos of balls
savedPosY = []; // to save y pos of balls
for(var start = 0, max = balls.length; start < max; start++) {
var current = balls[start], // current ball
randomX = random(canvasW, current.radius), // get random value for x pos
randomY = random(canvasH, current.radius); // get random value for y pos
if(checkSeparation(randomX, current.radius, savedPosX)) {
current.x = randomX; // If it position, along with your radio does not touch another circle, I add the position
} else {
// start--; continue;
console.log("X: The above code causes an infinite loop");
}
if(checkSeparation(randomY, current.radius, savedPosY)) {
current.y = randomY;
} else {
// start--; continue;
console.log("Y: The above code causes an infinite loop");
}
}
}
body,html {
margin: 0; border: 0; padding: 0; overflow: hidden;
}
<canvas id="balls"></canvas>

In your code, you test possible collisions by means of arrays of already used x and y positions, but you never add new positions to these arrays. You also check the x and y coordinates separately, which means you are really testing a collision of a bounding box.
Two circles collide when the distance between their centres is smaller than the sum of their radii, so you could use:
function collides(balls, n, x, y, r) {
for (let i = 0; i < n; i++) {
let ball = balls[i];
let dx = ball.x - x;
let dy = ball.y - y;
let dd = dx*dx + dy*dy;
let rr = r + ball.radius;
if (dd < rr * rr) return true;
}
return false;
}
function setPositions(balls, canvasW, canvasH) {
for (let i = 0, max = balls.length; i < max; i++) {
let ball = balls[i],
r = ball.radius,
maxTries = 20;
ball.x = -canvasW;
ball.y = -canvasH;
for (let tries = 0; tries = maxTries; tries++) {
let x = random(canvasW - 2*r, r),
y = random(canvasH - 2*r, r);
if (!collides(balls, i, x, y, r)) {
ball.x = x;
ball.y = y;
break;
}
}
}
}
This is reasonably fast for 50 balls, but will be slow if you have more balls. In that case, some spatial data structures can speed up the collision search.
You must also guard against the case that no good place can be found. The code above gives up after 20 tries and moves the ball outside the visible canvas. You can improve the chances of placing balls by sorting the balls by radius and plaing the large balls first.
Finally, you add one hex digit too many to your random colour. (That for loop, where everything happens in the loop control is horrible, by the way.)

Can't make balls bounce back

I can't make the balls move in the opposite direction. Here is my code:
var xPositions = [random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400)];
var yPositions = [random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400),random(0,400)];
draw = function() {
background(250,250, 250);
var velocidad=5;
for (var i = 0; i < 10; i++) {
fill(230, 156, 156);
ellipse(xPositions[i], yPositions[i], 10, 10);
var d=1;
if(yPositions[i]>=400){
d= -1;
} else if(yPositions[i]<=0){
d = 1;
}
yPositions[i] = yPositions[i] + velocidad*d ;
}
};

You are setting d=1 in every iteration before you check the bounds.
Move
var d=1
out of the function or out of the loop.

Your problem is that you're not saving the direction d each ball is traveling. In your code, once a ball reaches the edge, it will go in the opposite direction. Until it's inside the bounds again, in that loop it'll change direction again.
Which leads to the main problem with your code, having two separate arrays of x and y coordinates instead of one array of ball objects. Something like
function Ball() {
this.x = random(0,400);
this.y = random(0,400);
this.direction = 1; // Or if you want to randomize: random(0,99)<50 ? -1 : 1;
this.velocity = 5; // Or if you want to randomize: random(1, 5)
}
Ball.prototype = {
draw:function() {
fill(230, 156, 156);
ellipse(this.x, this.y, 10, 10);
},
update:function() {
var newposition = this.y+this.direction*this.velocity;
if (newposition < 0 || newposition > 400) {
this.direction*=-1; // If outside of bounds, reverse position
}
this.y = this.y+this.direction*this.velocity;
}
};
Then you initiate your balls as such
var balls = [];
for (var i = 0; i < 10 ; i++){
balls.push(new Ball());
}
And in your main loop you just need to call balls[i].update() and balls[i].draw().
draw = function() {
for (var i = 0; i < balls.length; i++) {
balls[i].update();
balls[i].draw();
}
};
There are still lots of things to be improved, but here's the gist of OOP to get you started.

How to ease between two y-coordinates?

For a school assignment we have to make a graph in Javascript.
The teacher would like to see some animated graphs. So I build a graph about my Tweets in one week, but cannot find how to ease between two y-coordinates.
You can find my project here on jsfiddle, or on this website.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var form = document.getElementById("form");
var data = [];
var huidigeYpos = [];
var nieuweYpos = [];
var count = [];
var snelheid = 0;
function init(){
ctx.fillStyle="rgb(255,255,255)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.translate(0, 445);
for(var i = 0; i < 7; i++){
data[i] = form[i].value*30;
}
draw();
}
function draw(){
ctx.fillStyle="rgb(255,255,255)";
ctx.fillRect(0,0,canvas.width,-canvas.height);
ctx.beginPath();
ctx.moveTo(0,0);
for(var i = 0; i <= 750; i += 125){
ctx.lineTo(i,-data[i/125]);
huidigeYpos.push((data[i/125]));
}
if(huidigeYpos.length > 7){
huidigeYpos.splice(0, 7);
}
ctx.lineTo(750,0);
ctx.closePath();
ctx.fillStyle="#0084FF";
ctx.fill();
}
function invullen(){
for(var i = 0; i < 7; i++){
data[i] = form[i].value*30;
}
draw();
}
function drawRandomGraph(){
for(var i = 0; i < 7; i++){
form[i].value = Math.round(Math.random()*10);
nieuweYpos.push(form[i].value*30);
}
if(nieuweYpos.length > 7){
nieuweYpos.splice(0, 7);
}
invullen();
}
init();
Thanks in advance!

You can use interpolation in combination with a easing-function. Standard interpolation between two points, aka lerping, is simple enough:
p = p1 + (p2 - p1) * t
where t is in the range [0, 1]
By injecting a easing-function for t, which also is in the [0, 1] range, you can ease the transition:
...
y = y1 + (y2 - y1) * easeInOut(t);
...
function easeInOut(t) {return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1}
There are several variations of easing functions, the above is cubic. You can find more here as well as the popular Penner versions.
For your case you would just update y2 with the new target value as use the old y2 as y1, then lerp/ease between them for each x point using the same t value.
The demo below shows how to use these, integrate as you want.
Example
var ctx = document.querySelector("canvas").getContext("2d"),
y1 = 10, y2 = 140, // source and destination positions
current = 0, max = 50, delta = 1; // counters for calculating/animating t
(function loop() {
// calc t
current += delta;
var t = current / max; // normalize so we get [0, 1]
if (t <= 0 || t >= 1) delta = -delta; // to ping-pong the animation for demo
// calc lerp linear
var yl = lerp(y1, y2, t), // linear
ye = lerp(y1, y2, easeInOut(t)); // with easing
// draw some graphics to show (linear : easing)
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(20, yl - 10, 20, 20);
ctx.fillRect(50, ye - 10, 20, 20);
requestAnimationFrame(loop);
})();
function lerp(p1, p2, t) {
return p1 + (p2 - p1) * t
}
function easeInOut(t) {
return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1
}
<canvas></canvas>