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

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)

Answers

  • So what do you have so far?

  • edited June 2017

    Starting from scratch. I have this.

  • 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); } }

  • 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?

  • 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?

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

  • 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

  • edited June 2017

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

  • 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.