Lay Theme Forum

hesuhpark

Hi, I finally figured out how to implement my P5.js code, but have run into the problem of it now breaking my site when viewed on mobile—nothing will scroll on mobile.

I followed the tutorial here made by @debutdebut but not sure if their trick doesn't work anymore with new updates.

Referring to this section:

if (jQuery(window).width() > 600) {
  jQuery.getScript( "https://yoururl/wordpress/wp-content/assets/sketch.js", function( data, textStatus, jqxhr ) {
    console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.log( "Load was performed." );
  }); 
}

And my code in reference here:

CSS

#defaultCanvas {
  margin: 0;
  padding: 0;
  width: 100%;
}

#defaultCanvas canvas {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
}

<head>

<script src="https://hesuhpark.com/wp-content/uploads/2021/11/p5.js"></script>
<script src="https://hesuhpark.com/wp-content/uploads/2021/11/sketch-rb.js"></script>

<script>
    if (jQuery(window).width() > 600) {
  jQuery.getScript( "https://hesuhpark.com/wp-content/uploads/2021/11/sketch-rb.js", function( data, textStatus, jqxhr ) {
    console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.log( "Load was performed." );
  }); 
}
</script>

<script>
function setup() {
	var cnv = createCanvas(1998, 1080); 
	cnv.parent('defaultCanvas'); // this is the id of the div
	cnv.position(0, 0); // this gives the sketch an absolute position in the top left corner
}


window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  if(obj.slug == "portfolio-2021"){
    jQuery('#defaultCanvas').show();
    } else {
     jQuery('#defaultCanvas').hide();
  }
});
</script>

If anyone could help me that would be super appreciative! It's been a difficult journey.

hesuhpark

I forgot to mention, I also have this above my code (as provided in the Superhi link)

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

hesuhpark

Hi!

I'm trying to add in some styling where you can "draw" on the page. I sourced some code but am having a hard time adding it to the specific Intro/header section of the page (when I simply paste the code in without the 'newpageshown' code, it automatically loads on the bottom of every page)

Here's my code so far:

<script>
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        if(type == "page" && obj.id == 930){

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#fbf8f3");
 document.getElementById("time-block");
}

function draw() {
  if (mouseIsPressed) {
    pen();
  }
}

function pen() {
  // set the color and weight of the stroke
  stroke(0, 0, 0, 255);
  strokeWeight(2);

  // draw a line from current mouse point to previous mouse point
  line(mouseX, mouseY, pmouseX, pmouseY);
}
</script>

And I have the section on my page as

<div id="time-block"></div>

And as reference, this is the code I'm trying to have featured: https://library.superhi.com/posts/how-to-paint-with-code-creating-paintbrushes <- Under the first section "Drawing a simple line"

Thank you so much if anyone responds! I truly appreciate it. I've been trying to figure it out myself for about 2 hours and can't seem to navigate Java.

TYTY! Going strong with Lay theme <3

Lay Theme Forum

hesuhpark

Posts