very simple creative coding that requires some book knowledge to accomplish

this code below presents a circle going east across the screen at openprocessing.org from processing.org

function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
let x = 0;
function draw() {
background(0);
circle( x, 50, 20);
x = x + 1;
}

function setup() serves the purpose of defining the static elements of the website like createCanvas which identifies just how wide and tall the size of the ouput screen is going to be background(100) gives you a standard background color here 100 on a scale of 255 from white to black I believe then you have LET X which sets up your variable and instantiates it and sets it equal to zero outside of the forthcoming loop that is started by function draw() which gives you a space where information is looped through such as the background the first thing that happens in the DRAW FUNCTION is that the background is set to black this happens every loop and ostensibly clears the board now this is important here because circle shows up with an X variable the same one that was instantiated and the path that changes in the circle the x y variables x being x and 50 being static and the size being static 20 leads you to the next line x = x + 1 which increased the value of x in the LET X = outside the loop and that kicks the new value down to circle after the background has cleared the slate so you end up with an animation of a circle going straight across the screen that could just as easily be an animation of a circle leaving a path behind it twerent for the background clearing the screen which makes it look like a single circle is just moving across the screen when really it’s a work around there is no way to get a circle to move across the screen you have to refresh or else you get trail

function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
let x = 1;
let y = 1;
let phase = 1;
function draw() {
background(200);
rect(x,y,100,100);
 x = x + .3;
 y = y+5 * phase;
 
if (y > windowHeight) {
    phase = -1;
} else if (y < 0) {
    phase = 1;
}
}

This code starts off with Three Variables, the X position, the y position and the phase … the x and y have to do with what you might think but the phase is unique in that it dictates which way the cube is going to be moving … every time it hits an edge it triggers the phase and the phase is multiplied by the y height and when it’s positive it’s going down and when it’s negative it’s going up but as the block encounters the edges the phase is triggered that determines which direction this block is going to move