› ›

Button that changes pictures so user can pick image and share on social media

1rulesupersedes1rulesupersedes
edited June 2017 in p5.js Programming Questions

1) Button that changes image - (got it)

2) add a button with multi selector several choices of social media - (need it)

3) user selects images and selects social media and post it - (need it)

4) post has link back to original site - (need it)

Tagged:

Best Answers

Answers

  • TfGuy44TfGuy44

    So what do you have so far?

  • 1rulesupersedes1rulesupersedes
    edited June 2017

    Starting from scratch. I have this.

  • 1rulesupersedes1rulesupersedes
    edited June 2017

    var fet = [];

    function preload() { for(var i =0; i< 7; i++){ fet[i] = loadImage('notes/notes_' + i + '_white.png'); }

    }

    function setup(){ createCanvas(400, 400); }

    function draw(){ background(0); imageMode(CENTER); image(fet[i], 10, 10); }

    function mousePressed(){ for(var i =0; i< 7; i++){ fet[i] = 'notes/notes_' + i + '_white.png'; imageMode(CENTER); image(fet[i], 10, 10); } }

  • TfGuy44TfGuy44
    Answer ✓

    Okay. So you have an array with your images in it, and you've loaded them. Which one from that array are you then displaying?

    What are you trying to do in mousePressed()?!?

    Here's some changes:

    var fet = [];
var current_image = 0;

function preload() { 
  for (var i =0; i< 7; i++) { 
    fet[i] = loadImage('notes/notes_' + i + '_white.png');
  }
}

function setup() { 
  createCanvas(400, 400);
  imageMode(CENTER);
}

function draw() { 
  background(0); 
  image(fet[curren_image], 10, 10);
}

function mousePressed() { 
  current_image = current_image + 1;
}

    Now there is a current_image counter that is the index into the array. It determines which image to show. When the mouse is clicked, this index increases.

    If you're going to add buttons, WHERE you click might matter - use mouseX and mouseY to determine where the click was. What happens when you click in different places?

  • 1rulesupersedes1rulesupersedes
    edited June 2017 
    var fet = [];
var current_image = 0;
var but;

function preload() { 
  for (var i =0; i< 6; i++) { 
    fet[i] = loadImage('fet_pictures/' + i + '.jpg');
  }
}

function setup() { 
  createCanvas(400, 400);
  imageMode(CORNER);
  but = createButton("change");
  but.mousePressed(change_image);
}

function draw() { 
  background(0); 
  image(fet[current_image], 0, 0, width, height);
}

function change_image(){
    current_image = current_image + 1;
     if(current_image > 5){
         current_image =0;

     }
}

    how do you get the images to fit the canvas without distortion?

  • 1rulesupersedes1rulesupersedes

    How are you getting your post on this site looking like real code?

  • kfrajerkfrajer
    Answer ✓

    Edit your post (gear icon in the top right corner of your post), select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code.

    Kf

  • 1rulesupersedes1rulesupersedes
    edited June 2017

    add a button so user can share selected image on several choices of social media with link back to original site?

  • 1rulesupersedes1rulesupersedes
    edited June 2017

    I have no idea how to attach checkbox option to social media or even if this is a way to approach it. Suggestions anyone?

     <html>
 <head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="libraries/p5.js">
  </script>
  <!-- uncomment lines below to include extra p5 libraries -->
  <script language="javascript" src="libraries/p5.dom.js"></script>
  <script language="javascript" src="libraries/p5.sound.js"></script>
  <script language="javascript" type="text/javascript" src="image_test.js">
  </script>
  <style> 
  </style>
  </head>
  <body>
    <h1>Pick Social Media</h1>
    <form>
    <input type="checkbox" id="facebook" name="social_media" 
     value="">Facebook<br/><br/>
    <input type="checkbox" id="twitter" name="social_media" 
     value="">Twitter<br/><br/>
    <input type="checkbox" id="printerest" name="social_media" 
     value="">Pinterest<br/><br/>
    <button id="share">Share</button><small>&nbsp; The picture showing.
   </small>
    </form>
  </body>
  </html>

    This is what it looks like live for testing purposes. link.

Sign In or Register to comment.