Exploring P5.JS JavaScript library.
View the pieces of code on the P5.JS website 'My Sketches'
The javascript code of a sketch can also be executed locally in a browser by combining it with an HTML file such as this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.2/lib/p5.min.js"></script>
<!--<script src="../lib/p5.js"></script>-->
<script src="sketch.js"></script>
<title>Title</title>
</head>
<body></body>
</html>
This HTML file, saved as index.html for example, opened in a browser will execute javascript code contained in file sketch.js because of the line
<script src="sketch.js"></script>
The javascript code can be enhanced with the functions from the library P5.JS because of the line
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.2/lib/p5.min.js"></script>
Note the version 2.3.2 of the library is used in this example, this can be modified. This library itself is also javascript code.
Ported from my original QB64 version.
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
Animated GIF file created using the saveGif() function:
One of the classic Iterated Function Systems.
Using information from https://larryriddle.agnesscott.org/ifs/heighway/goldenDragon.htm
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
Animated GIF file created using the saveGif() function:
A 'creature" with long tentacles that seems to float in circles. All made from math functions
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
Animated GIF file created using the saveGif() function:
A animated image based on the iteration after choosing a random starting point x,y:
x = x + sin(y)
y = y + sin(x)
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
The algoritm is found on many places on the web.
The example used as reference, in Sinclair Basic on a PC by BigEd: https://stardot.org.uk/forums/viewtopic.php?t=25833
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A still from the animation:
Exploring Vectors and UI sliders in P5.JS
A toy which bounces points inside a circle, influenced by gravity and friction
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A still from the animation:
Interference, a visual effect based on the general idea of two point wave sources with an interference pattern.
The point sources travel in circular paths changing their distance from each other continuously.
This idea was first implemented using QB64
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A still from the animation:
Making figures by rotating a series of vectors and plotting the sum.
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
Some examples of figures:
The application in a browser:
It is based on the function
sin(PI.x) + sin(x)
which is not periodic because the ratio of their periods is not a rational number.
This code is made to fit in a post on X.com which is limited to 280 characters.
a=0
dt=.03
f=(x)=>150+70*(sin(PI*x)+sin(4.5*x))
draw=_=>{
a++||(createCanvas(W=300,W),stroke(255))
background(0,30)
beginShape(POINTS)
for(t=0,tt=.0015*a+1;t<75;t+=dt,tt+=dt){
vertex(f(tt),f(t))}
endShape()
}
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A GIF made from screen recording the animation:
Adding some feedback by adding previous value x to the function argument
a=0;x=0//non-periodic-with-feedback #p5js
f=(x)=>sin(PI*x)+sin(4.5*x);m=(x)=>175+85*x
draw=_=>{
a++||(createCanvas(W=350,W),stroke(W))
background(0,35)
beginShape(POINTS)
for(t=2000;t--;){
y=f(p=t/30+x);x=f(a/500+p)
vertex(m(x),m(y))}
endShape()}
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A GIF made from screen recording the animation:
Trying the 3D functionality in P5.JS.
t=0;b=255;W=382;s=8//xor-sphere #p5js
d=_=>{T.noStroke();for(x=0;x<W;x+=s)for(y=0;y<W;y+=s){T.fill(r=((x^y)+t)&b,2*r%b,4*r%b);
T.rect(x,y,s)}}
draw=_=>{t++||(createCanvas(W,W,WEBGL),noStroke(),T=createGraphics(W,W))
d();background(0);rotateY(t/200);texture(T);sphere(160)}
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A GIF made from screen recording the animation:
Using a simple bitwise XOR function to determine a y coordinate for each x coordinate. t is a parameter which increases with each frame.
y = x XOR t
Or in javascript notation:
y = x^t
The code:
t=0//Dropping squares #p5js
draw=_=>{t++||createCanvas(W=784,H=512)
for(x=0;x<W;x+=16){y=x^t;fill(c=x&255,(x&127)*2,255-c);rect(x%W,y%H,16)}}
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A GIF made from screen recording the animation; the real output is smoother:
Adding some text to the animation
The code:
t=0//Falling squares w text #p5js
s='falling•squares•'
draw=_=>{t++||createCanvas(W=784,H=512)+textAlign(CENTER,CENTER)+textSize(14)
for(x=0;x<W;x+=16){y=x^t;fill(r=x&255,(x&127)*2,255-r);rect(x,v=y%H,16)
fill(0);text(s[(x/16+floor(y/16))%16],x+8,v+8)}}
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A still from the animation:
A strange attractor defined by a system of equations which calculate new x,y values from the previous set. See reference page Peter de Jong Attractors
xn+1 = sin(a yn) - cos(b xn)
yn+1 = sin(c xn) - cos(d yn)
a,b,c,d are the four parameters, tend to be sensitive to changes.
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
The created image:
An animation which draws Sierpinki's triangles using only a OR function
//Sierpiński's dream #p5js
t=0;d=255
draw=_=>{t++||createCanvas(W=2*(w=256),W)+background(0)
for(k=W;k--;){y=k|t%W;x=(t-k)%W;stroke((y>w)*d,t&d,k&d);point(x,W-y);point(x,y)}}
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A still from the animation:
For this animation the code uses nested loops to visit each x,y position of one quarter of the image. The color of this position is determined by the basic form:
x AND y XOR t
where t is a ever increasing time value The other 3 quarters of the image are mirrored copies of the first.
t=0;d=4,w=256//andxor vibes #p5js
r=(x,y)=>rect(x,y,d)
draw=_=>{t++||createCanvas(W=2*w-d,W)+noStroke()
for(y=0;y<w;y+=d)for(x=0;x<w;x+=d){q=(x<<1)&(y<<1)^(t>>2)
fill(q%257,(q%129)*2,(q%65)*4);r(x,y);r(x,v=W-y);r(u=W-x,y);r(u,v)}}
The code on Github:
-
Javascript code file sketch.js
-
HTML file to run javascript in browser: index.html
A still from the animation:
For this version the code also uses nested loops to visit each x,y position of one quarter of the image, but the colors are determined by:
(x-t) AND (y-t)
The other 3 quarters are coppied and flipped accordingly. It gives munching squares like patterns which move away from the center.
t=0;d=4,w=256//shifting madness #p5js
f=(k,l)=>{scale(k,l);image(c,-w,-w)}
draw=_=>{t++||createCanvas(W=2*w,W)+noStroke()
for(y=0;y<w;y+=d)for(x=0;x<w;x+=d){q=(x+t)&(y+t)
fill(q&255,(q<<1)&255,(q<<2)&255);rect(x,y,d)}
c=get(0,0,w,w);translate(w,w);f(1,-1);f(-1,1);f(1,-1)}
The code on Github:
-
Javascript code file sketch2.js
-
HTML file to run javascript in browser: index2.html
A still from the animation:
