the p5files e2024 001
written by Elout de Kok
here we go again..
the p5files e2024 001
minimalistic fxhash and p5.js template
rgb pixel drawing and mixing engine - the sketch.js code is 156+ lines
opensource. free source, learning source. on my part. get your engines runnin =_______= in p5js
be respectful to the creators p5.js and ppl that helped you out
some nice juicy coding parts . to enjoy. xxx amsterdam - `don't worry I do the marketing`
all about the pixel rgb buffer this weekend// under- heavy construction =_____= elout 2.xxx
w.i.p - more updates soon. need to add some more code blocks
still tuning, and checkn
check the latest hopeful running version on p5js - enjoy.
https://editor.p5js.org/elout/sketches/4VZHZnysf
latest fullscreen 'stand-alone' version runs at. still updates and lil fixes.
https://elout.home.xs4all.nl/2024/jan/p5files_e2024_001/
//Latest update
//.--------------.
//13:56 jan30_2024
//!!!!
// fxhash changed the fxhash.js
// they will using now fxhash.min.js
// get it here
// https://github.com/fxhash/fxhash-package/blob/main/packages/project-sdk/dist/fxhash.min.js
//
// love y'all (inc. those degens. for the entertainment value) =_______=
// .--------------.
// .fix/speed upgrade - jan26.2024
// speed upgrade you can draw/update things at different fps speeds, to gain speed
// you could draw different things at different fps speeds or slows
// 0__. =______________________=
//.--------------.
//10:17 jan20_2024
//worked till the early morning light
//and dropped it on today on fxhash. started to enjoy the weekend agaim. just now
//https://www.fxhash.xyz/generative/30097
//I put it onchain, it showed/costed me about 0.75 gas?! cost? to mint,
// and directly running source from the chain, so pretty nice if you can do that, and not so expensive to do
// so total mint cost, to mint this project; was like less 1tez? pretty cool and ok
//[got some warnings about the fxhash.js not being latest.. when uploading to fxhash this morning
//it can show red sometimes, then go green after a few minute. peace out]
// local backup should include these files:
// index.html
// fxhash.js
// p5.min.js
// style.css
// sketch.js
//.--------------.
//13:56 jan30_2024 update
// !!!!
// fxhash changed the fxhash.js
// they will using now fxhash.min.js
// get it here:
// https://github.com/fxhash/fxhash-package/blob/main/packages/project-sdk/dist/fxhash.min.js
// local backup should include these files:
// index.html
// fxhash.js
// p5.min.js
// style.css
// sketch.min.js
// jan 20 2024
// https://www.fxhash.xyz/generative/30097
// put it onchain;
// first I got some warnings about the fxhash.js not being latest, showed flashin red
// but it went green after a few minutes
// things I forgot to mention and include in the release text/sketch this time =____=
// s - save image.png
// sketch.js
// - when doing: fx.preview() part - when you want to mint it on fxhash
// - use the name: canvas#defaultCanvas0
//
// forgot to mention: s or S key: saves the image
//
// some info in info.js
// elout =_____= e2024
//.fix jan26.2024 speed upgrade, update drawing at lower fps
//
var im_w=2048; // image width and height,
var im_h=2048;
var my_name='p5files_e2024_001';
var my_init=true;
var my_x1=0; // x
var my_y1=0; // y
var my_xstep=1;
var my_ystep=1;
var my_c=0; // grey
var my_counter=0;
// my r,g,b buffers
var pix_r = new Uint8ClampedArray();
var pix_g = new Uint8ClampedArray();
var pix_b = new Uint8ClampedArray();
var save_image = false;
function setup()
{
var my_ratio=get_ran_int(3);
if(my_ratio==0)
{
im_w=2048;
im_h=2048;
}
else if(my_ratio==1)
{
im_w=2048;
im_h=4096;
}
else if(my_ratio==2)
{
im_w=4096;
im_h=2048;
}
pix_r = new Uint8ClampedArray(im_w*im_h);
pix_g = new Uint8ClampedArray(im_w*im_h);
pix_b = new Uint8ClampedArray(im_w*im_h);
document.title =my_name;
pixelDensity(1);
createCanvas(im_w, im_h); // width-height
my_c=get_ran_int(256);
background(my_c,my_c,my_c); // clear canvas
// init-reset buffers
for (var i = 0; i < im_w*im_h; i++)
{
pix_r[i]=my_c;
pix_g[i]=my_c;
pix_b[i]=my_c;
}
}// end setup()
// draw() gets called at 60fps
function draw()
{
//reset
if(get_ran_int(156)==0){my_init=true;}
if(my_init==true)
{
var steppa=4 +get_ran_float(11);
my_xstep= get_ran_float(steppa*2)-steppa;
my_ystep= get_ran_float(steppa*2)-steppa;
my_c = get_ran_float(255);
my_init=false;
}// end init
for (var i = 0; i < 1024*2; i++) // draw faster
{
draw_pixel(my_x1,my_y1, my_c,my_c,my_c, im_w,im_h, pix_r,pix_g,pix_b);
my_x1 += get_ran_float(my_xstep*2) - my_xstep; // new position
my_y1 += get_ran_float(my_ystep*2) - my_ystep;
while (my_x1<0){my_x1+=im_w;} // seamless fun and magic
while (my_y1<0){my_y1+=im_h;}
while (my_x1>=im_w){my_x1 -= im_w;} // always have an exit when using while =____=
while (my_y1>=im_h){my_y1 -= im_h;} // I can also use if() but that can cause errors
}// end draw faster
// dump my r,g,b buffer-array onto the canvas/screen - best at 60fps
// draw only every 20 frames
if( (my_counter%30)==0 ) // speed upgrade faster drawing- lower fps
{
loadPixels();
for (var p=0, i = 0; i < im_w*im_h; i++)
{
pixels[p] = pix_r[i]; // Red
pixels[p+1] = pix_g[i]; // Green
pixels[p+2] = pix_b[i]; // Blue
pixels[p+3] = 255; // canvas Alpha - not used at atm
p+=4;
}
updatePixels();
}
if (save_image==true)
{
save( my_name+' '+$fx.hash+'.png');
save_image=false;
}
my_counter++;
if (my_counter<0) {my_counter=0;} // overflow check
if (my_counter==4096 )
{
$fx.preview();
console.log('fxhash thumbnail');
// save( my_name+' '+$fx.hash+'.png'); // yo! testin here babe
}
if( (my_counter%64)==0 ){console.log(my_counter);}
}// end draw()
function keyTyped()
{
if (key === 's' || key === 'S' ){ save_image = true;}
}
// get random
function get_ran_int(num)
{
return ( ($fx.rand()*num)<<0 ); // <<0 converts float to int
}
function get_ran_float(num)
{
return ( $fx.rand()*num ); // Math.random()
}
function draw_pixel(x,y, r,g,b, w,h, p_r,p_g,p_b)
{
x=x<<0; y=y<<0; w=w<<0; h=h<<0; // extra error check now: <<0 convert to int
var datapos= (y*w)+x;
if(datapos<0 || datapos>=w*h){ } // extra error check now: dont'write outside the buffer!
else
{
p_r[datapos]= r <<0;
p_g[datapos]= g <<0;
p_b[datapos]= b <<0;
}
}
//0__.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./fxhash.js"></script>
<script src="./p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css">
<!--love me.favicon a 16x16 .png uploaded -done at www.base64-image.de lieb-love-->
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH6AEUAjkxiAaD2QAAAJpJREFUOMu1krENxCAMRR+naxgga6RkCWo2YKyMQY1SU6ZmA1pEy1VIJEqUO4X7nS3L/+nbwntf6aSU4he9eKj3lXMIgW/InhNcbd62DQBr7Z8zWJZl17hznKYJgJTSGAKRc6596i2TVt9lMe4PSimnA835SDiMQDjnKkCMEYB5nk8Hj9mMI5BS1v6u67oCYIzZ3bs5a63H/sEHcGs+4ylAnZgAAAAASUVORK5CYII=" />
<meta charset="utf-8" />
</head>
<body>
<div id="backgroundblock" class="css_background"></div>
<script src="./sketch.js"></script>
</body>
</html>
style.css
<style type="text/css">
body
{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
/*overflow: hidden; */ /* don't show scrollbars !*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.p5Canvas
{
z-index:20;
position: absolute;
max-height: 100%;
max-width: 100%;
object-fit: contain;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.css_background
{
top: 0px;left: 0px; width:100%; height:100%;
z-index:11; border-width:0px; position: fixed;
background-color: #111;
}
</style>
// getting you p5 ready for fxhash and running local in a browser +fullscreen
// local backup should include these files:
// index.html
// fxhash.js
// p5.min.js
// style.css
// sketch.js
// check if it runs local /offline
// sketch.js does the drawing and painting
// ----------about index.html---------------
// links to the libraries, sketches and parts. etc!!
// don't use external links (url's) to libraries that can change, store the root and running local
// and try to use latest 'n og' downloaded versions from legit libraries
// best using and waving with the latest released legit libs and versions
// although things will sure change in the future..
// i just try to get it running on ok and current and new versions, make them a bit flexible
//the p5files e2024 001
//e jan 20 2024 3:04
// download latest version p5.min.js
// at https://p5js.org/download/
//<!--get latest fxhash.js version
// at https://github.com/fxhash/fxhash-package/blob/main/packages/project-sdk/dist/fxhash.js -->
//.------------------------------------------------------------------------------------------------.
//13:56 jan30_2024 !!!!!!!!!!!!!!!!!!!!!!!! update -- break
// !!!!
// fxhash changed the fxhash.js
// they will using now fxhash.min.js
// get it here:
// https://github.com/fxhash/fxhash-package/blob/main/packages/project-sdk/dist/fxhash.min.js
// local backup should include these files:
// index.html
// fxhash.js
// p5.min.js
// style.css
// sketch.min.js
//the p5files e2024 001.a
//e jan 20 2024 3:12 flex some muscles . lol