0

I created an animation with p5js and i want to export it as an SVG, so i can upload it. But i don't know how to do that. Can u help me please? I would like to get something like this: https://ipfs.io/ipfs/QmZWQRpnJ3yZeSTQWrJvqYPUHE4G82KttaDqbk44YtnrHi. That's is not a gif or a video. How is this possible? That's the code of the javascript file:

new p5();
var msEndMvm=0;
var delayMvm=10;
var x=0;
var flag=true //true is right false left
// Create a new canvas to the browser size
function setup () {
  createCanvas(400, 400, SVG);
  background('#FFFFFF');
  strokeJoin(MITER);
  strokeWeight(random(1, 5));
  rectMode(CENTER);
}

// On window resize, update the canvas size
function windowResized () {
  resizeCanvas(400, 400);
}
// Render loop that draws shapes with p5
function draw(){
  if(millis()>=msEndMvm){
    background('#FFFFFF');
    rect(x, 200, 20, 10);
    msEndMvm=millis()+delayMvm;
    if(flag){
        x++;
        if(x>=400){
            flag=false;
        }
    }
    else{
        x--;
        if(x<=0){
            flag=true;
        }
    }
        
  }
}

and that's of the HTML:

<!DOCTYPE html>
<html>
<head>
  <title>P5 System</title>
  <script src="libraries/p5.min.js"></script>
  <script src="libraries/p5.svg.js"></script>
  <script src="sketch.js"></script>
  
  <script src="https://unpkg.com/p5.js-svg@1.1.1"></script>
</head>
<body>
  <style>
    canvas {
      padding: 0;
      margin: auto;
      display: block;
      width: 800px;
      height: 600px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</body>
</html>
1
  • The EIP-721 specifically has an "image" field. So most wallet that support that EIP will expect that field to points to an image. You could use that to show a preview and include a the original file with a custom field.
    – Ismael
    Sep 5 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.