Display 1 character (from a choice of 4) in an animation

p5.js Coding Questions
1

Hello,

I am trying to create an animation with :

  1. TV (fixed)
  2. clouds (mobile)
  3. a character (not moving)

I would like the character to be random at each load (a witch, a mage, an angel and an astronaut).

Unfortunately, by doing the code below, I manage to have the character random but at each frame.

I tried to put <random(persos)();/> in setup but it doesn’t display and the animation freezes.
I tried changing function to class with the same problems in the end.
I tried to put xspeed = 0 for the characters.
If I want to display only one character, it works very well.

If you have a clue how to fix this problem, it would be very nice.

var xspeed = 2;
let n, n2, n3;
let coul3 = [
  "#313131", // noir
  "#CECECE", // gris clair
  "#6F6D6B", // gris foncé
  "#A0D2F7", // bleu clair
  "#3B98F2", //bleu
  "#F5A3EB", // rose
  "#88DE2F", // vert clair
  "#8C3CDE", // violet
];
let randCoul3;
let randPersos;

let persos = [mage, sorciere, astro, ange];


function setup() {
  createCanvas(1000, 400);
  background(245, 247, 247);
  randCoul3 = random(coul3.length);
  randCoul3 = floor(randCoul3);

  n = new Nuage();
  n2 = new Nuage2 ();
  n3 = new Nuage3 ();
}


function draw() {

  TV1();

  // animation écran
  n.move();
  n.show();
  n2.move();
  n2.show();
  resetMatrix();
  // personnage

  random(persos)();

  resetMatrix();
  // animation écran 2
  n3.move();
  n3.show();

  TV2();
}

///////////////////////////////////////////////////////////////  CLASSE NUAGES

class Nuage {

  constructor () {
    this.x = 700;
    this.y = 100;
  }

  move() {
    this.x = this.x - xspeed/2;
    if (this.x < 265) {
      this.x = 700;
      this.y = 100;
    }
  }
  show() {
    noStroke();
    fill(coul3[randCoul3]);
    ellipse(this.x, this.y, 40, 30);
    ellipse(this.x, this.y+10, 30, 40);
    ellipse(this.x+20, this.y+10, 40, 30);
    ellipse(this.x-20, this.y+10, 30, 30);
  }
}


class Nuage2 {

  constructor () {
    this.x2 = 700
      this.y2= 100;
  }

  move() {
    this.x2 = this.x2 - xspeed/2;
    resetMatrix();
    if (this.x2 < 160) {
      this.x2 = 700
        this.y2= 100;
    }
  }

  show () {
    scale(0.8);
    translate(200, 100);
    noStroke();
    fill(coul3[randCoul3]);
    ellipse(this.x2, this.y2, 40, 30);
    ellipse(this.x2, this.y2+10, 30, 40);
    ellipse(this.x2+20, this.y2+10, 40, 30);
    ellipse(this.x2-20, this.y2+10, 30, 30);
  }
}


class Nuage3 {

  constructor() {
    this.x3 = 690;
    this.y3 = 235;
  }

  show() {
    noStroke();
    fill(coul3[randCoul3]);
    ellipse(this.x3, this.y3, 40, 40);
    ellipse(this.x3+5, this.y3+10, 60, 30);
    ellipse(this.x3-20, this.y3+10, 30, 30);
  }
  move() {
    this.x3 += -1.2;
    if (this.x3 < 300) {
      this.x3 = 690;
      this.y3 = 235;
    }
  }
}

/////////////////////////////////////////////////////////

function sorciere() {
  // balai

  noStroke();
  fill(232, 211, 14);
  rect(450, 182, 110, 5, 2);
  stroke(232, 211, 14);
  strokeWeight(5);
  quad(450, 180, 450, 190, 420, 200, 420, 170);
  //sociere
  strokeCap(SQUARE);
  fill(0);
  ellipse(500, 150, 30, 30);
  triangle(485, 150, 513, 142, 490, 115);
  stroke(0);
  strokeWeight(3);
  line(470, 150, 525, 140); //bord du chapeau
  strokeWeight(20);
  line(505, 160, 480, 190);
  push();
  translate(5, 25);
  line(505, 160, 480, 190);
  pop();
  noStroke();
  rect(500, 165, 30, 5, 2);
  ellipse(530, 168, 8, 8);
}

function mage() {

  // dragon
  let couldrag = color(88, 169, 100);
  //  strokeWeight(5);
  //line(450, 190, 560, 190); //balais
  //line(503, 168, 515, 190); //bras 1
  //line(500, 168, 530, 168); //bras2
  stroke(88, 169, 100);
  strokeWeight(5);
  fill(couldrag);
  quad(450, 180, 450, 190, 420, 200, 420, 170); // queue

  quad(450, 185, 480, 220, 550, 180, 450, 175); // ailes et corps
  triangle(660, 185, 455, 173, 390, 155);


  translate(-8, -8);
  noStroke();
  rect(550, 185, 40, 30, 5); // tête dragon
  stroke(255);
  strokeWeight(6);
  ellipse(560, 195, 19, 19); // oeil
  noStroke();
  rect(580, 195, 30, 20, 2); // museau
  ellipse(605, 198, 13, 13); // narines
  ellipse(605, 213, 13, 13); // narines
  fill(255);
  rect(550, 190, -10, -5);  // oreilles
  ellipse(540, 185, 10, 10);

  rect(590, 203, 20, 5); // dents
  resetMatrix();

  // mage
  translate(0, -10);

  strokeCap(SQUARE);
  fill(0);
  ellipse(500, 150, 30, 30);
  triangle(485, 150, 513, 142, 490, 115);
  stroke(0);
  strokeWeight(3);
  line(470, 150, 525, 140); //bord du chapeau
  strokeWeight(20);
  line(505, 160, 480, 190);
  push();
  translate(5, 25);
  line(505, 160, 480, 190);
  pop();
  noStroke();
  rect(500, 165, 30, 5, 2);
  ellipse(530, 168, 8, 8);
}

function ange () {
  // cochon


  noStroke();
  fill(255, 131, 253);
  ellipse(495, 215, 110, 70); // corps
  ellipse(550, 200, 50, 50); // tête
  rect(550, 200, 30, 20, 3); // groin
  rect(510, 230, 30, 30, 3); // patte droite
  rect(450, 230, 30, 30, 3); // patte gauche

  stroke(255);
  strokeWeight(6);
  ellipse(560, 195, 19, 19); // oeil

  noFill();
  stroke(255, 131, 253);
  ellipse (450, 200, 20, 20); // queue
  ellipse (440, 190, 20, 20);
  ellipse (430, 185, 20, 20);

  //ange
  push();
  ellipseMode(CENTER);

  strokeWeight(5);
  noFill();
  translate(490, 130);
  rotate(-35);
  ellipse(0, 0, 35, 15);
  pop();

  strokeCap(SQUARE);
  stroke(0);
  fill(0);
  ellipse(500, 150, 30, 30);

  strokeWeight(20);
  line(505, 160, 480, 190);
  push();
  fill(0);
  translate(5, 25);
  line(505, 160, 480, 190);
  pop();
  noStroke();
  fill(0);
  rect(500, 165, 30, 5, 2);
  ellipse(530, 168, 8, 8);
}

function astro() {
  // fusee
  fill(255, 0, 0);

  noStroke();
  rect(450, 182, 110, 5, 2);
  ellipse(490, 185, 110, 25);


  stroke(255, 0, 0);
  strokeWeight(5);

  quad(450, 180, 450, 190, 420, 200, 420, 170);

  //astronaute

  translate(0, -10);
  stroke(0);
  strokeCap(SQUARE);
  fill(0);
  ellipse(500, 150, 30, 30);
  noFill();
  strokeWeight(3);
  ellipse(500, 150, 45, 45);
  fill(0);
  line(495, 128, 475, 120);
  strokeWeight(20);
  line(505, 160, 480, 190);
  push();
  translate(5, 25);
  line(505, 160, 480, 190);
  pop();
  noStroke();
  rect(500, 165, 30, 5, 2);
  ellipse(530, 168, 8, 8);

  ellipse(475, 120, 8, 8);
}

function TV1 () {
  // TV
  smooth();
  stroke(0);
  strokeWeight(4);
  fill(180);
  quad(200, 50, 800, 50, 790, 0, 210, 0); // profondeur TV
  quad(200, 50, 800, 50, 735, 320, 265, 320); // largeur TV


  //ECRAN
  stroke(0);
  strokeWeight(7);
  fill(230);
  quad(300, 67, 700, 67, 665, 280, 335, 280);
}

function TV2 () {

  // Ligne TV
  stroke(150);
  strokeWeight(2);
  line(200, 50, 800, 50);

  // Cache mouvements
  strokeCap(ROUND);
  noStroke();
  fill(180);
  quad(300, 67, 335, 280, 260, 280, 265, 67);
  stroke(0);
  strokeWeight(7);
  line(300, 67, 335, 280);


  // haut-parleurs
  noStroke();
  fill(200);
  quad(220, 60, 270, 60, 318, 310, 277, 310); // gauche
  push();
  translate(1000, 0);
  scale(-1, 1);

  noStroke();
  fill(180);
  quad(300, 67, 335, 280, 260, 280, 265, 67);
  stroke(0);
  strokeWeight(7);
  line(300, 67, 335, 280);
  noStroke();
  fill(200);
  quad(220, 60, 270, 60, 318, 310, 277, 310); // droite
  pop();

  //matière haut-parleurs
  for (var i = 70; i < 200; i = i +10) {
    stroke(180);
    point(260, i);
  }

  translate(20, 110);
  for (var j = 70; j < 200; j = j +10) {
    stroke(180);
    point(260, j);
  }
  resetMatrix();

  translate(1000, 0);
  scale(-1, 1);
  for (var k = 70; k < 200; k = k +10) {
    stroke(180);
    point(260, k);
  }

  translate(20, 110);
  for (var l = 70; l < 200; l = l +10) {
    stroke(180);
    point(260, l);
  }
  resetMatrix();

  // bouton on/off
  noStroke();
  ellipse(650, 300, 26, 18);
  stroke(180);
  strokeWeight(3);
  line(650, 295, 649, 305);
}
2

Hi @E-maniak,

Please edit your post an format-your-code

Cheers
— mnse

1 Like
3
  1. Add a persos_select, eg, let person_select;
  2. In setup() persos_select = random(persos);
  3. In draw call that function, eg, persos_select();
var xspeed = 2;
let n, n2, n3;
let coul3 = ["#313131", // noir
"#CECECE", // gris clair
"#6F6D6B", // gris foncé
"#A0D2F7", // bleu clair
"#3B98F2", //bleu
"#F5A3EB", // rose
"#88DE2F", // vert clair
"#8C3CDE", // violet
];
let randCoul3;
let persos_select;

let persos = [mage, sorciere, astro, ange];

function setup() {
createCanvas(1000, 400);
background(245, 247, 247);
randCoul3 = random(coul3.length);
randCoul3 = floor(randCoul3);

n = new Nuage();
n2 = new Nuage2 ();
n3 = new Nuage3 ();
  
persos_select =  random(persos);
  // console.log(persos_select);
}

function draw() {

TV1();

// animation écran
n.move();
n.show();
n2.move();
n2.show();
resetMatrix();
// personnage

persos_select();
  
resetMatrix();
// animation écran 2
n3.move();
n3.show();

TV2();
}

/////////////////////////////////////////////////////////////// CLASSE NUAGES

class Nuage {

constructor () {
this.x = 700;
this.y = 100;
}

move() {
this.x = this.x - xspeed/2;
if (this.x < 265) {
this.x = 700;
this.y = 100;
}
}
show() {
noStroke();
fill(coul3[randCoul3]);
ellipse(this.x, this.y, 40, 30);
ellipse(this.x, this.y+10, 30, 40);
ellipse(this.x+20, this.y+10, 40, 30);
ellipse(this.x-20, this.y+10, 30, 30);
this.x2 = 700
}
}

class Nuage2 {

constructor () {
this.y2= 100;
}

move() {
this.x2 = this.x2 - xspeed/2;
resetMatrix();
if (this.x2 < 160) {
this.x2 = 700
this.y2= 100;
}
}

show () {
scale(0.8);
translate(200, 100);
noStroke();
fill(coul3[randCoul3]);
ellipse(this.x2, this.y2, 40, 30);
ellipse(this.x2, this.y2+10, 30, 40);
ellipse(this.x2+20, this.y2+10, 40, 30);
ellipse(this.x2-20, this.y2+10, 30, 30);
}
}

class Nuage3 {

constructor() {
this.x3 = 690;
this.y3 = 235;
}

show() {
noStroke();
fill(coul3[randCoul3]);
ellipse(this.x3, this.y3, 40, 40);
ellipse(this.x3+5, this.y3+10, 60, 30);
ellipse(this.x3-20, this.y3+10, 30, 30);
}
move() {
this.x3 += -1.2;
if (this.x3 < 300) {
this.x3 = 690;
this.y3 = 235;
}
}
}

/////////////////////////////////////////////////////////

function sorciere() {
// balai

noStroke();
fill(232, 211, 14);
rect(450, 182, 110, 5, 2);
stroke(232, 211, 14);
strokeWeight(5);
quad(450, 180, 450, 190, 420, 200, 420, 170);
//sociere
strokeCap(SQUARE);
fill(0);
ellipse(500, 150, 30, 30);
triangle(485, 150, 513, 142, 490, 115);
stroke(0);
strokeWeight(3);
line(470, 150, 525, 140); //bord du chapeau
strokeWeight(20);
line(505, 160, 480, 190);
push();
translate(5, 25);
line(505, 160, 480, 190);
pop();
noStroke();
rect(500, 165, 30, 5, 2);
ellipse(530, 168, 8, 8);
}

function mage() {

// dragon
let couldrag = color(88, 169, 100);
// strokeWeight(5);
//line(450, 190, 560, 190); //balais
//line(503, 168, 515, 190); //bras 1
//line(500, 168, 530, 168); //bras2
stroke(88, 169, 100);
strokeWeight(5);
fill(couldrag);
quad(450, 180, 450, 190, 420, 200, 420, 170); // queue

quad(450, 185, 480, 220, 550, 180, 450, 175); // ailes et corps
triangle(660, 185, 455, 173, 390, 155);

translate(-8, -8);
noStroke();
rect(550, 185, 40, 30, 5); // tête dragon
stroke(255);
strokeWeight(6);
ellipse(560, 195, 19, 19); // oeil
noStroke();
rect(580, 195, 30, 20, 2); // museau
ellipse(605, 198, 13, 13); // narines
ellipse(605, 213, 13, 13); // narines
fill(255);
rect(550, 190, -10, -5); // oreilles
ellipse(540, 185, 10, 10);

rect(590, 203, 20, 5); // dents
resetMatrix();

// mage
translate(0, -10);

strokeCap(SQUARE);
fill(0);
ellipse(500, 150, 30, 30);
triangle(485, 150, 513, 142, 490, 115);
stroke(0);
strokeWeight(3);
line(470, 150, 525, 140); //bord du chapeau
strokeWeight(20);
line(505, 160, 480, 190);
push();
translate(5, 25);
line(505, 160, 480, 190);
pop();
noStroke();
rect(500, 165, 30, 5, 2);
ellipse(530, 168, 8, 8);
}

function ange () {
// cochon

noStroke();
fill(255, 131, 253);
ellipse(495, 215, 110, 70); // corps
ellipse(550, 200, 50, 50); // tête
rect(550, 200, 30, 20, 3); // groin
rect(510, 230, 30, 30, 3); // patte droite
rect(450, 230, 30, 30, 3); // patte gauche

stroke(255);
strokeWeight(6);
ellipse(560, 195, 19, 19); // oeil

noFill();
stroke(255, 131, 253);
ellipse (450, 200, 20, 20); // queue
ellipse (440, 190, 20, 20);
ellipse (430, 185, 20, 20);

//ange
push();
ellipseMode(CENTER);

strokeWeight(5);
noFill();
translate(490, 130);
rotate(-35);
ellipse(0, 0, 35, 15);
pop();

strokeCap(SQUARE);
stroke(0);
fill(0);
ellipse(500, 150, 30, 30);

strokeWeight(20);
line(505, 160, 480, 190);
push();
fill(0);
translate(5, 25);
line(505, 160, 480, 190);
pop();
noStroke();
fill(0);
rect(500, 165, 30, 5, 2);
ellipse(530, 168, 8, 8);
}

function astro() {
// fusee
fill(255, 0, 0);

noStroke();
rect(450, 182, 110, 5, 2);
ellipse(490, 185, 110, 25);

stroke(255, 0, 0);
strokeWeight(5);

quad(450, 180, 450, 190, 420, 200, 420, 170);

//astronaute

translate(0, -10);
stroke(0);
strokeCap(SQUARE);
fill(0);
ellipse(500, 150, 30, 30);
noFill();
strokeWeight(3);
ellipse(500, 150, 45, 45);
fill(0);
line(495, 128, 475, 120);
strokeWeight(20);
line(505, 160, 480, 190);
push();
translate(5, 25);
line(505, 160, 480, 190);
pop();
noStroke();
rect(500, 165, 30, 5, 2);
ellipse(530, 168, 8, 8);

ellipse(475, 120, 8, 8);
}

function TV1 () {
// TV
smooth();
stroke(0);
strokeWeight(4);
fill(180);
quad(200, 50, 800, 50, 790, 0, 210, 0); // profondeur TV
quad(200, 50, 800, 50, 735, 320, 265, 320); // largeur TV

//ECRAN
stroke(0);
strokeWeight(7);
fill(230);
quad(300, 67, 700, 67, 665, 280, 335, 280);
}

function TV2 () {

// Ligne TV
stroke(150);
strokeWeight(2);
line(200, 50, 800, 50);

// Cache mouvements
strokeCap(ROUND);
noStroke();
fill(180);
quad(300, 67, 335, 280, 260, 280, 265, 67);
stroke(0);
strokeWeight(7);
line(300, 67, 335, 280);

// haut-parleurs
noStroke();
fill(200);
quad(220, 60, 270, 60, 318, 310, 277, 310); // gauche
push();
translate(1000, 0);
scale(-1, 1);

noStroke();
fill(180);
quad(300, 67, 335, 280, 260, 280, 265, 67);
stroke(0);
strokeWeight(7);
line(300, 67, 335, 280);
noStroke();
fill(200);
quad(220, 60, 270, 60, 318, 310, 277, 310); // droite
pop();

//matière haut-parleurs
for (var i = 70; i < 200; i = i +10) {
stroke(180);
point(260, i);
}

translate(20, 110);
for (var j = 70; j < 200; j = j +10) {
stroke(180);
point(260, j);
}
resetMatrix();

translate(1000, 0);
scale(-1, 1);
for (var k = 70; k < 200; k = k +10) {
stroke(180);
point(260, k);
}

translate(20, 110);
for (var l = 70; l < 200; l = l +10) {
stroke(180);
point(260, l);
}
resetMatrix();

// bouton on/off
noStroke();
ellipse(650, 300, 26, 18);
stroke(180);
strokeWeight(3);
line(650, 295, 649, 305);
}
1 Like
4

Thank you very much! It works very well. It’s only been 3 weeks since I started coding in javascript and it was way above my level.

2 Likes
5

Welcome to the forum and keep up the creative work. Thanks for posting.

2 Likes