Trying to leave a trail

oydis

Hello, im very new to programming and i'm trying to leave a trail on these ellipses that i have. I've watched a few videos but i can't seem to get it down.

koogs

Pictures of code are unreadable and useless for testing. Paste the actual code.

oydis

oops sorry.

    var numofDots = 1000; // number of points on the screen
    let wavePhase = 0;
    var vertices = [];

    function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL); // WEBGL used to make it 3D
        for (let counter = 0; counter < numofDots; counter ++) {
            vertices[counter] = createVector (random(-3,3),0,random(-3,3));
        }
    }
    function draw() {
        background(0);
        push();
        ambientLight (0,100,100);
        for (let counter = 0; counter < numofDots; counter ++) {
            var vertex = vertices[counter];
            vertex.y = sin(vertex.z + wavePhase) + sin(vertex.z + wavePhase) * 0.04; // calculations to make the wave the way it is
    // 
            var vert = createVector(vertex.x, vertex.y, vertex.z);
            push(); 
            translate( vert.x * 150, vert.y * 150, vert.z * 150);
            noStroke();
        ellipse (1,2, 5, 5);

            pop();
        }
        wavePhase = frameCount *0.01;
    }

jeremydouglass

Got it. I'm assuming that you have already watched the Coding Train video on p5.js trails:

• 

Did you check out the pMouseX reference demo sketch?

• https://p5js.org/reference/#/p5/pmouseX

Did you try the drawing example?

• https://p5js.org/examples/hello-p5-drawing.html

...more:

https://www.google.com/search?q=p5.js+trail

oydis

Yep i tried watching it.. but i seriously dont get it. Like the push function (this.history.push) . I thought that had to be used with pop

jeremydouglass

push() / pop() are functions for Processing settings.

• https://p5js.org/reference/#/p5/push
• https://p5js.org/reference/#/p5/pop

history.push() is different -- it is a method of the history object; particles.push() is a method of the particles object, paths.push() et cetera -- in these cases those objects are arrays; when you push onto an array you add something to the end of it and you aren't required to pop after.

• https://www.w3schools.com/jsref/jsref_push.asp

oydis

I tried again. this is what i came up with. Nothing really changed LOL :( can you show me where i went wrong? i really appreciate the help

`var numofDots = 2000; // number of points on the screen
let wavePhase = 0;
var vertices = [];

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL); // WEBGL used to make it 3D
    for (let counter = 0; counter < numofDots; counter ++) {
        vertices[counter] = createVector (random(-3,3),0,random(-3,3));
    }
}

function draw() {
    this.history = [];
    background(0);
    push();
    ambientLight (0,100,100);
    for (let counter = 0; counter < numofDots; counter ++) {
        var vertex = vertices[counter];
        vertex.y = sin(vertex.z + wavePhase) + sin(vertex.z + wavePhase) * 0.04; // calculations to make the wave the way it is
        var vert = createVector(vertex.x, vertex.y, vertex.z);

        var v = createVector (this.x ,this.y ,this.z)
        this.history.push = (v);

        for (var i; i < this.history.length; i ++)
        {
            var pos = this.history[i];

        box(pos.x, pos.y, pos.z, 2,2); 

                        }
        push(); 
        translate( vert.x * 150, vert.y * 150, vert.z * 150);
        noStroke();
    sphere (1,2, 5, 5);
        pop();

    }
    wavePhase = frameCount *0.01;
}`

kfrajer

Notice you have two push and only one pop.

Ok, now we need to work in your problem... or the wording of it. You post is about leaving a trail. However, your post contains some wave function which makes me thing this is not a tail challenge, or is a tail challenge plus something else that you haven't described. So you need to provide more details. You said:

Nothing really changed LOL

What does your code suppose to do and what is your code doing right now?

One thing you need to remember is that the canvas is updated at the end of draw, after executing both for loops. I am not totally sure if you really need two for loops. The first loop is of size 2000 while the second one grows as fast as you add elements from the first loop. This is unnecessary as the wavePhase value gets updated only at the end of draw. In other words, you should revise your code and remove your second loop, line 25.

Kf

oydis

My code works fine. Im trying to add something on, but this thing that im adding on isnt working. Im trying to add a trail the points that make up the wave. Line 25 is meant to be for the trail. I watched the coding trains video on object trails and tried replicating it onto my own code, which is my previous comment, however the code ran as it did before... without a trail.

kfrajer

Parameters for you to adjust:
1. Length of the trail
2. refLength defines the distribution of the dots in space
3. Phase defines the distance between dots of the same trail
4. Number of dots. NOTE: More dots => super slow

Kf

   //Frontal wave demo: Trailing effect, history, p5.js
    //
    //REFERENCE: https:// forum.processing.org/two/discussion/27639/trying-to-leave-a-trail#latest

var numofDots = 20; // number of points on the screen
var wavePhase = 0;
var vertices = [];
var historyy = [];
var refLength;

function setup() {
    createCanvas(400,400, WEBGL); // WEBGL used to make it 3D
    noStroke();
    refLength=width*0.70;

    for (var counter = 0; counter < numofDots; counter++) {

        vertices.push( createVector (random(-1,1),0,random(-1,1)) );
    }
}

function draw() {

    background(0);
    ambientLight (0,100,100);

    for (var counter = 0; counter < numofDots; counter++) {
        var vertex = vertices[counter];
        vertex.y = sin(vertex.z + wavePhase) + sin(vertex.z + wavePhase) * 0.04; // calculations to make the wave the way it is

        historyy.push(createVector(vertex.x, vertex.y, vertex.z));        

    }
    wavePhase = frameCount *0.01;
    //console.log("Size is "+historyy.length+ " ... " +vertices.length);


    for (var i=0; i < historyy.length; i++){
        var gr=map(i,0,historyy.length,0,255);
        fill(color(150,gr,0));
        var pos = historyy[i];         
        push(); 
        translate( pos.x * refLength, pos.y * refLength, pos.z * refLength/2);        
        sphere (3,5, 5, 5);
        pop(); 
    }

    //Conyrols the length of the tail
    if(historyy.length>numofDots*10){
      historyy=subset(historyy,numofDots,numofDots*9);
      }
}

kfrajer

@oydis I forgot to mentioned in my last post you should avoid using history as that is a reserve variable in some browsers. I was using firefox and the history content from your prev code was being overwritten by the browser, hence the change of name to historyy.

Kf

oydis

Thank you so much!