elout
elout01
p5files e2024
the p5files e2024 001

the p5files e2024 001

written by Elout de Kok

20 Jan 202464 EDITIONS
0.15 TEZ

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


project name project name project name

stay ahead with our newsletter

receive news on exclusive drops, releases, product updates, and more

feedback