Skip to content

Ellipses

Animation

animation

Code in open processing

Code (p5.js)

Text Only
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//número de ellipses
var nEllipses=1;
//númerod de elementos en cada ellipse
var nelementos=120;



function setup() {
  frameRate(24);
  this.animation=createVector(nEllipses);

  createCanvas(800, 600);
  for(var i=0; i<nEllipses;i++){
    animation[i]=new elliAnimation(width/2, height/2-i*10, 300, 40, nelementos )
  }

}

function draw() {
  // put drawing code here
  background(13, 135, 204);

   for(var i=0; i<nEllipses;i++){
     animation[i].update();
     animation[i].display(i);
   }

}

//Parameters

function elliAnimation(xpos, ypos, param_a, param_b, n){

  //variables
  this.elementos=n;
  this.contador=0;

  //posición
  this.xpos=xpos;
  this.ypos=ypos;

  //parámetros de la ellipse
  this.param_a=param_a;
  this.param_b=param_b;

  //parámetros de los rectángulos
  this.alto=90;
  this.ancho=6;

  this.x_coord=createVector(this.elementos)
  this.y_coord=createVector(this.elementos)

  //controla la animación del parámetro b de la ellipse
  this.sentidoA=1;
  //controla la animación del parámetro b de la ellipse
  this.sentidoB=1;




  this.update=function(){
    fill(255)
    stroke(255);
    strokeWeight(0);

    if(this.param_b>=100 && this.sentidoB>0 || this.sentidoB<0 && this.param_b==0) this.sentidoB*=-1;

    this.param_b+=this.sentidoB;

    if(this.param_a>=340 && this.sentidoA>0 || this.sentidoA<0 && this.param_a==0) this.sentidoA*=-1;

    this.param_a+=this.sentidoA;

  }


  this.display=function(id){
    fill(255);
    stroke(255);
    var alto=0;
    var ancho=0;
    var medioE=this.elementos/2;
    var cuartoE=this.elementos/4;
    colorE = color(0);


    // if(this.contador==this.elementos && this.sentidoB>0 || this.sentidoB<0 && this.contador==this.elementos-10) this.sentidoB*=-1;
    //this.contador=this.contador+this.sentidoB;
    if(this.contador