← Back to articles

the p5files e2024 001

· by @Elout de Kok · View on fxhash · IPFS · 64 editions

eloutelout01p5files e2024

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
p5files_e2024_001 #3
p5files_e2024_001 #3 · objkt.com