Using Javascript for Animations and interactions

I would like the user to manipulate an animation and/or the storyline with the use of just scrolling. Going back and Forward.

Using WebGL and Javascript might be the easiest way to create interactive graphics. Rather than using video files that have an action of click and to play.

As I had played around with ActionScript in adobe animate, and started to look at basic javascript Code in processing as they seem to be similar and thought it would be easier to transition. I had a simple understand if how things should be. I found a Video Tutorial to Create a moving StarField By Daniel Shiffman. I thought to watch the video and type the code out to try to understand the code, rather than copy all the code from his Github repository.

After completing the example, I wanted to try to make two changes to achieve what I was after. Currently, the sketch draws the canvas in the specified pixel size using this code: void setup() { size (800, 800); }

i want the canvas to be full screen. Searching in the references for Processing, i found a a reference called full-screen, i replaced the following code:

size ()

with

fullScreen();

Another option I wanted to change is the speed of the movement of the stars as in the original example it was mapped to the mouse horizontal location:

speed = map(mouseX, 0, width, 0, 20);

the mouseX give a number as large as the screen pixel, such as 0 and canvas width. This number is too large to be used as the speed variable, therefore it is mapped between 0 and 20.

Also, I wanted to change the method of using the mouseX position as the variable to change the speed to me the Mouse wheel scrooling usuing the mouseWheel event:

I created the code to replace the speed variable:

void mouseWheel(MouseEvent event) { float e = event.getCount(); println(e); speed = map(e, -2, 30, 0, 20); }

I used print line of the variable e to see the range that is given from the mouseWheel event. and I noticed it ranges depending on the string the mouse wheel is scrolled. and then mapped it to the appropriate ranges to not be to large to the speed variable is not to large. This gave me the desired effect.

6 - creating a interactive animaation with code - javasript with processing. usuing danial shiffman example of stairflight page. From other classes i know how to create interactive coding with processing as it uses the language process.

how ever he has started with only a small window canvas - and the speed was connect to the mouse movement.

researching how can i place a javascript canvas into a webpage, i found p5.js , build for making web interactive javascript canvas.

I researched reference if there was an option to connect the speed of the stars moving with scroll. as i wanted the animation as a background.

The mouseWheel option gave values for how fast and hard the scrool is used. either with a mouse wheel or scrolling with a touch pad.

i map the the code contrained the criables btween two managable variables i did not use all of the code was the speed was be too large of a number. and it worked.

after - i wanted this to a full size backgounf, doing research for p5.js there was an option in createCavan to say the window height and width, so the back ground can be the same size as the visitors browsers window size.

the next problem i wanted to solve, when changing the szie f the browser after the website had loaded the canvas size would stay the same.

there was a event that listened for broswer resised and redraw te canvas anytime the page was resized. this solved the issue.

that next issue was placing the canvas in a different layer, because when addint html elements to the webate that would not be visbale, they where drawn either below or over the canvas.

I found a video stating, the layer html 5 and ccs is called Z-index, this was learning from this video coding traing but a p5.js canvas as a back ground of website. Changin teh style z-index of the elemnt in the wbesite changed is positon with int he wbesite and i was able to put html elements infront of the canvas that user can interact with can interact with.

in HTMl i search fro an option to but a search box. because i had turnnif othe option to scroll the pagebecause i did not want te user to scrool below the backgorud canvas. there for i had to place text with in a text put to can scrool with in the oage.

and this scroll aided in making the animation work softly in th background.