Why there exists a kinda blinking at some current?

p5.js Coding Questions
1

Hey, every 1, I just wanna make a copy of what’s this site displays in android browswer after entering, but the imitation is not as exact as I expect. At some time, the frame elements, for ballons objects, they blink, why is that happening?

%E6%97%A0%E6%A0%87%E9%A2%98
无标题.png526×578 17.5 KB

1 Like
2

Those little smart bllns, they blink, but not all of them

3

well, code lists as below:

4 
const boundThreshold = 80;
const maxBallons = 20;
const alphaSet = [35, 45, 55, 65, 75];
const alphaDiff = 5;
let Ballons = [];

class BallonVect{
	constructor(xPos,yPos,color,radius){
		this.center=createVector(xPos,yPos);
		this.color=color;
		this.r=radius;
		this.or=radius;
		this.dirLastTime=0;
		this.dirTotalTime=floor(random(12,22));
		this.dirVect=this.applySpeed();
		this.BACount=this.color.alpha/alphaDiff;
		this.BACurCount=0;
		this.maxLifeTime=floor(random(50,150));
		this.curLifeTime=0;
		this.DACount=radius/2;
		this.DACurCount=0;
	}
	bornAnimate(){
		const curEnteringAlpha=(this.BACurCount*alphaDiff)/100;
		const colorExp='rgba('+this.color.r+'%,'+this.color.g+'%,'+this.color.b+'%,'+curEnteringAlpha+')';
		this.update();
		this.paint(colorExp);
		this.BACurCount++;
	}
	deadAnimate(){
		this.update();
		this.r-=2;
		this.paint();
		this.DACurCount++;
	}
	resetDir(){
		this.dirLastTime=0;
		this.dirTotalTime=floor(random(12,22));
		this.dirVect=this.applySpeed();
	}
	applySpeed(){
		let xOffset=this.setOffsetPer();
		let yOffset=this.setOffsetPer();
		return createVector(xOffset,yOffset);
	}
	setDir(){
		return random(0,1)<0.5?-1:1;
	}
	setOffsetPer(){
		return this.setDir()*floor(random(1,3));
	}
	outScreen(){
		return (this.center.x-this.r>width||this.center.x+this.r<0
			||this.center.y-this.r>height||this.center.y+this.r<0);
	}
	update(){
		this.center.add(this.dirVect);
	}
	paint(r){
		if (r) 	
			stroke(r);
		else 
			stroke(this.color.colorExp);
		strokeWeight(this.r);
		point(this.center.x,this.center.y);
		stroke(0);
		const centerWeight=map(this.r,0,this.or,0,5);
		strokeWeight(centerWeight);
		point(this.center.x,this.center.y);
		if (this.curLifeTime<=this.maxLifeTime){
			this.dirLastTime++;
			this.curLifeTime++;
		} 
	}
}

function setup() {
	createCanvas(600, 600);
	frameRate(30);
	for (let i = 0; i < maxBallons; i++) {
		const objColor = makeColorExp();
		Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));
	}
}

function draw() {
	background(255);

	function killBallon(i) {
		Ballons.splice(i, 1);
		const objColor = makeColorExp();
		Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));
	}

	for (let i = 0; i < Ballons.length; i++) {

		if (Ballons[i].outScreen()) {
			killBallon(i);
		}
		if (Ballons[i].curLifeTime >= Ballons[i].maxLifeTime) {
			if (Ballons[i].DACurCount <= Ballons[i].DACount) {
				Ballons[i].deadAnimate();
			} else {
				killBallon(i);
			}
		} else {
			if (Ballons[i].dirLastTime === Ballons[i].dirTotalTime) {
				Ballons[i].resetDir();
			}
			if (Ballons[i].BACurCount <= Ballons[i].BACount) {
				Ballons[i].bornAnimate();
			} else {
				Ballons[i].update();
				Ballons[i].paint();
			}
		}
	}

	for (let i = 0; i < Ballons.length - 1; i++) {
		for (let j = i + 1; j < Ballons.length; j++) {
			if (dist(Ballons[i].center.x, Ballons[i].center.y, Ballons[j].center.x, Ballons[j].center.y) < boundThreshold) {
				strokeWeight(1);
				line(Ballons[i].center.x, Ballons[i].center.y, Ballons[j].center.x, Ballons[j].center.y);
			}
		}
	}
}

function makeColorExp() {
	let r = floor(random(0, 30));
	let b = floor(random(30, 50));
	let g = floor(random(50, 70));
	let alpha = random(alphaSet);
	return {
		colorExp: 'rgba(' + r + '%,' + g + '%,' + b + '%,' + (alpha / 100) + ')',
		alpha: alpha,
		r: r,
		g: g,
		b: b
	};
}
1 Like
5

you put the .paint
inside own function borne…
and inside a logic where all together it was just not executed in every draw loop
little clean up:

const boundThreshold = 80;
const maxBallons = 10;
const alphaSet = [35, 45, 55, 65, 75];
const alphaDiff = 5;
let Ballons = [];

class BallonVect {
  constructor(xPos, yPos, color, radius) {
    this.center = createVector(xPos, yPos);
    this.color = color;
    this.r = radius;
    this.or = radius;
    this.dirLastTime = 0;
    this.dirTotalTime = floor(random(12, 22));
    this.dirVect = this.applySpeed();
    this.BACount = this.color.alpha / alphaDiff;
    this.BACurCount = 0;
    this.maxLifeTime = floor(random(50, 150));
    this.curLifeTime = 0;
    this.DACount = radius / 2;
    this.DACurCount = 0;
  }
  bornAnimate() {
    const curEnteringAlpha = (this.BACurCount * alphaDiff) / 100;
    const colorExp = 'rgba(' + this.color.r + '%,' + this.color.g + '%,' + this.color.b + '%,' + curEnteringAlpha + ')';
    this.update();
    //this.paint(colorExp);
    this.BACurCount++;
  }
  deadAnimate() {
    this.update();
    this.r -= 2;
    //this.paint();
    this.DACurCount++;
  }
  resetDir() {
    this.dirLastTime = 0;
    this.dirTotalTime = floor(random(12, 22));
    this.dirVect = this.applySpeed();
  }
  applySpeed() {
    let xOffset = this.setOffsetPer();
    let yOffset = this.setOffsetPer();
    return createVector(xOffset, yOffset);
  }
  setDir() {
    return random(0, 1) < 0.5 ? -1 : 1;
  }
  setOffsetPer() {
    return this.setDir() * floor(random(1, 3));
  }
  outScreen() {
    return (this.center.x - this.r > width  || this.center.x + this.r < 0 ||
            this.center.y - this.r > height || this.center.y + this.r < 0);
  }
  update() {
    this.center.add(this.dirVect);
  }
  paint(r) {
    if (r)      stroke(r);
    else        stroke(this.color.colorExp);
    strokeWeight(this.r);
    point(this.center.x, this.center.y);
    stroke(0);
    const centerWeight = map(this.r, 0, this.or, 0, 5);
    strokeWeight(centerWeight);
    point(this.center.x, this.center.y);
    if (this.curLifeTime <= this.maxLifeTime) {
      this.dirLastTime++;
      this.curLifeTime++;
    }
  }
}

function setup() {
  createCanvas(600, 600);
  frameRate(30);
  for (let i = 0; i < maxBallons; i++) {
    const objColor = makeColorExp();
    Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));
  }
}

function draw() {
  background(255);

  function killBallon(i) {
    Ballons.splice(i, 1);
    const objColor = makeColorExp();
    Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));
  }

  for (let i = 0; i < Ballons.length; i++) {

    if (Ballons[i].outScreen()) killBallon(i);

    if (Ballons[i].curLifeTime >= Ballons[i].maxLifeTime) {
      if (Ballons[i].DACurCount <= Ballons[i].DACount)         Ballons[i].deadAnimate();
      else                                                     killBallon(i);
    } else {
      if (Ballons[i].dirLastTime === Ballons[i].dirTotalTime) Ballons[i].resetDir();
      if (Ballons[i].BACurCount <= Ballons[i].BACount) Ballons[i].bornAnimate();
    }
    Ballons[i].update();
    Ballons[i].paint();
  }

  for (let i = 0; i < Ballons.length - 1; i++) {
    for (let j = i + 1; j < Ballons.length; j++) {
      if (dist(Ballons[i].center.x, Ballons[i].center.y, Ballons[j].center.x, Ballons[j].center.y) < boundThreshold) {
        strokeWeight(1);
        line(Ballons[i].center.x, Ballons[i].center.y, Ballons[j].center.x, Ballons[j].center.y);
      }
    }
  }
}

function makeColorExp() {
  let r = floor(random(0, 30));
  let b = floor(random(30, 50));
  let g = floor(random(50, 70));
  let alpha = random(alphaSet);
  return {
    colorExp: 'rgba(' + r + '%,' + g + '%,' + b + '%,' + (alpha / 100) + ')',
    alpha: alpha,
    r: r,
    g: g,
    b: b
  }

}
2 Likes
6

It works, thank u so much, you genius guy, here stands the final results, exactlly accurate!

1 Like
7 
const boundThreshold = 80;
const maxBallons = 20;
const alphaSet = [35, 45, 55, 65, 75];
const alphaDiff = 5;
let Ballons = [];

class BallonVect{
	constructor(xPos,yPos,color,radius){
		this.center=createVector(xPos,yPos);
		this.color=color;
		this.r=radius;
		this.dirLastTime=0;
		this.dirTotalTime=floor(random(12,22));
		this.dirVect=this.applySpeed();
		this.BACount=this.color.alpha/alphaDiff;
		this.BACurCount=0;
		this.maxLifeTime=floor(random(50,150));
		this.curLifeTime=0;
		this.DACount=this.color.alpha/alphaDiff;
		this.DACurCount=0;
		this.colorExp = null;
	}
	bornAnimate(){
		const curEnteringAlpha=(this.BACurCount*alphaDiff)/100;
		const colorExp='rgba('+this.color.r+'%,'+this.color.g+'%,'+this.color.b+'%,'+curEnteringAlpha+')';
		this.colorExp=colorExp;
		this.BACurCount++;
	}
	deadAnimate(){
		const curFadingAlpha=(this.color.alpha-this.DACurCount*alphaDiff)/100;
		const colorExp='rgba('+this.color.r+'%,'+this.color.g+'%,'+this.color.b+'%,'+curFadingAlpha+')';
		this.colorExp=colorExp;
		this.DACurCount++;
	}
	resetDir(){
		this.dirLastTime=0;
		this.dirTotalTime=floor(random(12,22));
		this.dirVect=this.applySpeed();
	}
	applySpeed(){
		let xOffset=this.setOffsetPer();
		let yOffset=this.setOffsetPer();
		return createVector(xOffset,yOffset);
	}
	setDir(){
		return random(0,1)<0.5?-1:1;
	}
	setOffsetPer(){
		return this.setDir()*floor(random(1,3));
	}
	outScreen(){
		return (this.center.x-this.r>width||this.center.x+this.r<0
			||this.center.y-this.r>height||this.center.y+this.r<0);
	}
	update(){
		this.center.add(this.dirVect);
	}
	paint(){
		if (this.colorExp!=null) 	
			stroke(this.colorExp);
		else 
			stroke(this.color.colorExp);
		strokeWeight(this.r);
		point(this.center.x,this.center.y);
		stroke(0);
		strokeWeight(5);
		point(this.center.x,this.center.y);
		this.dirLastTime++;
		if (this.curLifeTime<=this.maxLifeTime) this.curLifeTime++;
	}
}

function setup() {
	createCanvas(600, 600);
	frameRate(14);
	for (let i = 0; i < maxBallons; i++) {
		const objColor = makeColorExp();
		Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));
	}
}

function draw() {
	background(255);

	function killBallon(i) {
		Ballons.splice(i, 1);
		const objColor = makeColorExp();
		Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));
	}

	for (let i = 0; i < Ballons.length; i++) {

		if (Ballons[i].outScreen())
			killBallon(i);
		if (Ballons[i].curLifeTime >= Ballons[i].maxLifeTime) {
			if (Ballons[i].DACurCount <= Ballons[i].DACount)
				Ballons[i].deadAnimate();
			else
				killBallon(i);
		} else {
			if (Ballons[i].dirLastTime === Ballons[i].dirTotalTime)
				Ballons[i].resetDir();
			if (Ballons[i].BACurCount <= Ballons[i].BACount)
				Ballons[i].bornAnimate();
			else{
				if (Ballons[i].colorExp!=null) Ballons[i].colorExp=null;
			}
		}
		Ballons[i].update();
		Ballons[i].paint();
	}

	for (let i = 0; i < Ballons.length - 1; i++) {
		for (let j = i + 1; j < Ballons.length; j++) {
			if (dist(Ballons[i].center.x, Ballons[i].center.y, Ballons[j].center.x, Ballons[j].center.y) < boundThreshold) {
				strokeWeight(1);
				line(Ballons[i].center.x, Ballons[i].center.y, Ballons[j].center.x, Ballons[j].center.y);
			}
		}
	}
}

function makeColorExp() {
	let r = floor(random(0, 30));
	let b = floor(random(30, 50));
	let g = floor(random(50, 70));
	let alpha = random(alphaSet);
	return {
		colorExp: 'rgba(' + r + '%,' + g + '%,' + b + '%,' + (alpha / 100) + ')',
		alpha: alpha,
		r: r,
		g: g,
		b: b
	};
}
8

Just from the scratch, it justs doesn’t matter whether put .draw func at the last line of the for-loop scope or inside the nested if statement. Maybe, in the iteration, some objects suits this occassion, but some not, which may result in nonconcurrency. Am I right???

9

two more points:

class correct big letter
variables small
so i renamed Ballons[] to ballons[] ( of class BallonVect )

all what can be done inside a class should be done there.

so the new draw() loop:


function draw() {
  background(255);
  renew_Ballon();                                              // check if dead and make new
  for (let i = 0; i < ballons.length; i++) ballons[i].paint(); // draw all
  lineBallons();                                               // make lines if close
}

i hope i moved all correctly,
https://editor.p5js.org/kll/sketches/L88_U53n-

1 Like
10

So as it should be, nice!