Encontré este pequeño ejercicio de codificación en el sitio web de Processing ( https://processing.org/examples/storinginput.html ) y decidí hacer una versión p5.js.
La parte que no entiendo de este algoritmo es cómo las elipses dibujadas (en el rastro) se reducen cuando la variable i, que se usa como la escala de la elipse, aumenta. Sospecho que tiene algo que ver con el valor del índice variable, pero no puedo reconstruirlo.
¿Alguien sabe cómo funciona este algoritmo? Cualquier ayuda sería apreciada.
Aquí está la versión Javascript del código:
var num = 60; var mx = []; var my = []; function setup() { createCanvas(windowHeight, windowHeight); noStroke(); fill('rgba(0,0,0, 0.5)'); noCursor(); } function draw() { background(255); var array_pos = (frameCount) % num; mx[array_pos] = mouseX; my[array_pos] = mouseY; for (var i = 0; i < num; i++) { var index = (array_pos + 1 + i) % num; ellipse(mx[index], my[index], i, i); } }La posición actual del mouse se almacena en una matriz en cada cuadro. Cuando la matriz esté llena, se volverá a llenar desde el principio. Esto se logra utilizando el operador módulo ( % ) ( % calcula el resto de una división).
var array_pos = frameCount % num; mx[array_pos] = mouseX; my[array_pos] = mouseY; El diámetro del círculo depende de la variable de control del bucle ( i ). El círculo más pequeño es el círculo con índice array_pos + 1 . Por lo tanto con i == 0 se dibuja el círculo con el índice array_pos + 1 . Los siguientes círculos se hacen más grandes a medida que aumenta i . Nuevamente, el operador de módulo ( % ) se usa para evitar que se acceda a la matriz fuera de los límites.
var index = (array_pos + 1 + i) % num; var num = 60; var mx = []; var my = []; function setup() { createCanvas(windowWidth, windowHeight); noCursor(); } function draw() { var array_pos = frameCount % num; mx[array_pos] = mouseX; my[array_pos] = mouseY; background(255); noStroke(); fill(255, 0, 0, 127); for (var i = 0; i < num; i++) { var index = (array_pos + 1 + i) % num; ellipse(mx[index], my[index], i, i); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>