Edit: I do want the sketch to keep looping, though, that's the thing.

I was able to plot complex functions using the method of domain coloring

https://openprocessing.org/sketch/569018

and now I have been trying to add two inputs for changing the real and imaginary components of the function after clicking a button, but it seems I am doing something wrong

https://openprocessing.org/sketch/569019

How can I use those inputs to update two variables each one with two arguments? Do I need to parse the text somehow?

Any help or advice would be appreciated. Thanks in advanced.

var pb
var button
var x = 50
var y = 50

function setup() {
  createCanvas(200, 200);

    pg = createGraphics(100, 100);
    pg.background(100)

    button = createButton("Button")

    button.position(0,0)
    button.size(100,100)

}

function draw() {
  background(220);

    image(pg, x, y)

    x += random(-1, 1)
    y += random(-1, 1)
}

So basically I want to be the button "button" to be a part of "pb", so that the button gets moved around alongside with the darker Box.

I tried things like button.parent(pg) or button = pg.createButton(100, 100), but none of those 2 methods worked :(

So how can I do this?

Sincerely Okaghana

function gameScreen(){

  var score;
  var samurai;
  var ninjas;
  var planks;
  var backgroundImg;
  var pauseAreaClicked;
  var isPaused;
  var pauseCreated;
  var gameOverCreated;
  var firstRun;

  this.setup = function(){
    createCanvas(windowWidth, windowHeight);
    gameTheme.loop();
    samurai = new Samurai();
    ninjas = [];
    planks = [];
    score = 0;
    bg = bg1;
    //Create the Pause Button
    pauseAreaClicked = false;
    firstRun = true;
    isPaused = false;
    pauseButton = createButton("||");
    pauseButtonCSSSetup(pauseButton, 0.6);
    pauseButton.mousePressed(pauseGame);
  }

  this.keyPressed = function(){
    if(keyCode == RIGHT_ARROW){
      samurai.switchLanes("right");
    }

    else if(keyCode == LEFT_ARROW){
      samurai.switchLanes("left");
    }

    else if(keyCode == UP_ARROW){
      samurai.attack();
    }
  }

  this.reset = function(){
    this.setup();
  }

  this.getScore = function(){
    return score;
  }

  this.draw = function(){
    if(isPaused){
      gameTheme.stop();
      return;
    }

    //Background Setup
    background(bg);

    //Text
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(25);
    text("Score: " + score, windowWidth/2, windowHeight * .05)

    //Watch for framerate
    // var fps = frameRate();
    // stroke(0);
    // text("FPS:" + fps.toFixed(2), windowWidth / 2, height - 20);

    samurai.update();
    samurai.show();

    if(frameCount % 10 == 0){
      samurai.animate();
    }

    //Update enemy position every frame.
    for(var i = ninjas.length - 1; i >= 0; i--){
      ninjas[i].show();
      ninjas[i].update();

      //If enemies go offscreen delete them to free up memory.
      if(ninjas[i].offscreen()){
        ninjas.splice(i, 1);
        if(score > 0)
          score -= ninjas[i].getHealth();
      }

      if(ninjas[i].collision(samurai) && !ninjas[i].isPushed()){
        if(samurai.attacking){
          //Slice sound
          sliceSound.play();

          score++;
          ninjas[i].loseHealth();
          if(ninjas[i].getHealth() >= 1){
            ninjas[i].pushBack();
          }
        }
        else{
          clear();
          removeElements();
          if(gameOverCreated){
            var oOver = this.sceneManager.findScene(gameOverScene).oScene;
            oOver.reset();
          }

          gameOverCreated = true;
          gameTheme.stop();

          this.sceneManager.showScene(gameOverScene);
        }
        if(!ninjas[i].isPushed()){
          ninjas.splice(i, 1);
        }
      }
    }
  }

  this.mousePressed = function(){
    if(!pauseAreaClicked){
      if(mouseX > (windowWidth / 2) * 1.5){
        samurai.switchLanes("right");
      }

      else if(mouseX < (windowWidth / 2) * 0.5){
        samurai.switchLanes("left");
      }

      else{
        samurai.attack();
      }
    }

    else{
      if(isPaused){
        isPaused = false;
      }

      else{
        isPaused = true;
        if(pauseCreated){
          oPause = this.sceneManager.findScene(pauseScreen).oScene;
          oPause.reset();
        }

        pauseCreated = true;
        gameTheme.stop();
        this.sceneManager.showScene(pauseScreen);
      }

      pauseAreaClicked = false;
    }
  }

    /**
      CSS STYLING FOR BUTTONS :D
    */
  function pauseButtonCSSSetup(button, YpositionMultiple){
    button.style("width", "35px");
    button.style("height", "35px");
    button.style("text-align", "center");
    button.style("font-size", "125%");
    button.style("font-weight", "bold")
    button.style("color", "#FFF");
    button.style("background", "00000000");
    button.style("border-radius", "4px");
    button.style("display", "inline-block");
    button.style("border", "none");
    button.style("outline", "none");

    //NOT CSS
    //Center Button
    button.position(windowWidth  >> 6, windowHeight/100);
  }

  function pauseGame(){
    pauseAreaClicked = true;
  }

  this.unpause = function(){
    gameTheme.loop();
    isPaused = false;
  }
}

to create an animation where a ball is bounced up and down. With the variable Height as a number, the animation works, but when I try to add an input to it, it doesn't

code: https://codepen.io/anon/pen/JyzdXy

index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>D3: Drawing divs with data</title>
            <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
      <script language="javascript" type="text/javascript" src="p5_D3_v5.js"></script>
      <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
      <script language="javascript" type="text/javascript" src="libraries/p5.dom.js"></script>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


        </head>
        <body>
             <div id="container"></div>
             <div id="container2"></div>


        </body>
    </html>

p5_D3_v5.js

var w = 1000;
var h = 700;

var posicao_tela_x = 200;
var posicao_tela_y = 50;

var svg;

var valores = [10,50,90,100,150,400];

var padding = 50;

var circles;

var cores;
var posX;
var posY;

function preload() {

  svg = d3.select("#container2")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

}


function setup() {
  var tela = createCanvas(w,h);
  //SELECIONA O DIV NO BODY que estea em cima(vem depois) ou embaixo(vem antes)
  tela.parent("#container");
  tela.position(0, 0);

  //iMPORTANTE PARA POSICIONAR O D3 E O P5 NA TELA
  select("#container").position(posicao_tela_x, posicao_tela_y);
  select("#container2").position(posicao_tela_x, posicao_tela_y);

  cores = d3.scale.quantize()
  .domain([d3.min(valores), d3.max(valores)])
  .range(["red","green","blue"]);

  posX = d3.scale.linear()
  .domain([d3.min(valores), d3.max(valores)])
  .range([0 + padding, w - padding]);

  posY = d3.scale.linear()
  .domain([d3.min(valores), d3.max(valores)])
  .range([h - padding,0 + padding]);

  desenharData();        

}

function draw(){


noFill();
strokeWeight(5);
stroke(0);
rect(0,0,w,h);
noFill();
strokeWeight(5);
stroke(0);
rect(mouseX,mouseY,70,70);


}



function desenharData(){

  circles = svg.selectAll("circle")
  .data(valores)
  .enter()
  .append("circle");

  circles.attr("cx", function(d){
    return posX(d);
  })
  .attr("cy", function(d){
    return posY(d);
  })
  .attr("r", function(d){
    return d/2;
  })
  .attr("fill", function(d){
    return cores(d);
  });


}

function mouseClicked(){
shuffle(valores,true);
ReDesenharData();
}

function ReDesenharData(){


 circles = svg.selectAll("circle")
 .data(valores)
 .transition()
 .duration(500)
 circles.attr("cx", function(d){
    return posX(d);
  })
  .attr("cy", function(d){
    return posY(d);
  })
  .attr("r", function(d){
    return d/2;
  });



}

Depending on the div (container or conteiner2) you select() your p5 code will be in front or as background of the d3 data visualization. CLick the mouse to shuffle the array.

I want to add a button in my p5.js sketch using p5.dom.js, and want that I place a button on vertical center with text. So I write a code as follows.

textAlign(CENTER, CENTER);
text(“HELLO!", width/2, height/2);

var button = createButton(“<-");
button.position(width/4, height/2);

But the button and text have different base line, so I don’t get expected result. What should I do for vertical centering button and text?

function setup() { createCanvas(1920, 1080); // specify multiple formats for different browsers fingers = createVideo(['assets/glen.mov']); //fingers.hide(); // by default video shows up in separate dom // element. hide it and draw it to the canvas // instead fingers.loop(); }

function draw() { background(150); image(fingers,10,10); // draw the video frame to canvas //filter('GRAY'); image(fingers,150,150); // draw a second copy to canvas }

var PH2 = function ( p ) {
    var mic;
    var img;
    var myCanvas;

    p.centerCanvas = function() {
        var x = (p.windowWidth - p.width) / 2;
        myCanvas.position(x, 0);
        }          

    p.preload = function() {
        img = p.loadImage('Sketches/PH2/1.jpg');
        }

    p.setup = function() {
        myCanvas = p.createCanvas(1000, 600);
        mic = new p5.AudioIn()
        mic.start();
        p.centerCanvas();
        }

    p.windowResized = function() {
        p.centerCanvas();
        }            

    p.draw = function() {
        if (p.mouseIsPressed) {
            micLevel = mic.getLevel();
            p.background('#fdfaee');
            p.textFont("Helvetica");
            p.text("do", 500*micLevel+200, 600*micLevel+300);
            p.fill('#f99991');
            }

        else {
            micLevel = mic.getLevel();
            p.background(255);    
            p.image(img, 200*micLevel*50+200, -50*micLevel*50, p.width/1.9, p.height);
            }
        }
    }
myp5 = new p5(PH2, 'PH2Contain');

var PH3 = function ( p ) {
    var mic;
    var img;
    var myCanvas;

    p.centerCanvas = function() {
        var x = (p.windowWidth - p.width) / 2;
        myCanvas.position(x, 0);
        }          

    p.preload = function() {
        img = p.loadImage('Sketches/PH3/2.jpg');
        }

    p.setup = function() {
        myCanvas = p.createCanvas(1000, 600);
        mic = new p5.AudioIn()
        mic.start();
        p.centerCanvas();
        }

    p.windowResized = function() {
        p.centerCanvas();
        }            

    p.draw = function() {
        if (p.mouseIsPressed) {
            micLevel = mic.getLevel();
            p.background('#fdfaee');
            p.textFont("Helvetica");
            p.text("you", 500*micLevel+700, 600*micLevel+300);
            p.fill('#bcf5ee');
            }

        else {
            micLevel = mic.getLevel();
            p.background(255);    
            p.image(img, 300*micLevel*50+200, -100*micLevel*50, p.width/1.9, p.height);
            }
        }
    }
myp5 = new p5(PH3, 'PH3Contain');

Here is my HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="PaintStyle.css">.
        <script src="Resources/p5.js"></script>
        <script language="javascript" type="text/javascript" src="Resources/p5.dom.js"></script>
        <script language="javascript" type="text/javascript" src="Resources/p5.sound.js"></script>
        <script language="javascript" type="text/javascript" src="Sketches/PH2/PH2.js"></script>
        <title>painthead</title>
    </head>
    <body>

<div id="PH2Contain"></div>
<p>hello hello</p>
<div id="PH3Contain"></div>  

    </body>
</html>

If I do not include the centering operations the sketches appear correct but are aligned left (and I want them centered). Whenever I include the function to center the sketch I only see the second sketch centered with "hello hello" to the left of it. With this method I am assuming in myCanvas.position(x,y) the y value is relative to the beginning of the div, but this must not be the case?

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at p5.dom.js:71
    at p5.dom.js:34
    at p5.dom.js:35

and

Uncaught TypeError: myCanvas.position is not a function
    at setup (paint.html:24)
    at p5.<anonymous> (p5.js:9111)
    at p5.<anonymous> (p5.js:9041)
    at new p5 (p5.js:9323)
    at _globalInit (p5.js:5602)

Here is my code (I've included HTML for convenience).

<!DOCTYPE html>
<html>
    <head>
        <script language="javascript" type="text/javascript" src="p5.dom.js"></script>
        <script src="p5.js"></script>
        <script language="javascript" type="text/javascript" src="p5.sound.js"></script>
        <title>painthead</title>
    </head>
    <body>

      <script>

  var mic;
  var myCanvas;            

  function setup() {
  mic = new p5.AudioIn()
  mic.start();
  myCanvas = createCanvas(1000, 600);    
  myCanvas.position(50, 100); //this breaks the code
  img = loadImage('1.jpg');

}

function draw() {

  background(255);

  if(mouseIsPressed) {
    micLevel = mic.getLevel();
    var c = color('#f99991');
    var v = color('#fdfaee');
    background(v);
    textFont("Helvetica");
    text("do", 500*micLevel+200, 600*micLevel+300);
    fill(c);
  }

  else {
  micLevel = mic.getLevel();  
  image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);
  }
}


        </script>

I realize that myCanvas.position(50, 100) will not center the sketch but I am testing the function to make sure it works.

var img;  
function preload() {   
img = createImg("dancegif.gif");
}

function setup(){
    createCanvas(window.innerWidth,window.innerHeight); 
}

function draw(){
    background(255);

  img.position(0,0);

    // flashing effect 
    noStroke();
    if(frameCount % 7 < 3 ){
      noFill(); //pic 33%  12 
    } else if(frameCount % 7 > random(3,4) ){
        fill(255);//white 33% 56 
    } else{
        fill(0);//black 34% 
    }
    rect(0,0,window.innerWidth,window.innerHeight);

}

So far, I've tried several approaches to getting editable text, but I'm kinda stuck.

In my first attempt, I tried to make the text a html element via createInput() (using CSS to make the input box transparent) and basically 'overlay' it on top of my canvas. The problem with this was that html elements use different coordinate system to the canvas, so I couldn't get them to sync properly.

In my second attempt, I read about fillText(), but this required canvas.getContext("2d") to be called, and that didn't work with var canvas = createCanvas(). Instead, I would have to use var canvas = document.getElementById("canvas"), where "canvas" was the ID of the canvas html environment. However, for some reason, when I used document.getElementById, my canvas became really small and no attempts to change its dimensions or position worked.

So yeah, I'm kinda stuck. What is the recommended way of adding editable text?

I’ve seen examples online for tying the position of the canvas to a div and then using the windowWidth & Height… but that only sizes according to the window size.

do you know, how to generate a JSONArray with p5? According to the p5 reference, there must be a way to save a .json file containing several JSONobjects with saveJSON, but there is no example for the syntax of that JSONArray (only for JSON-Objects).

I really appreciate any help!

http://codepen.io/Digi-D/pen/VjGmRE

    var myBlock=[];
    var blockNumber=50;

    function setup(){
      for(var i=0;i<blockNumber;i++){
        myBlock[i]=createDiv(i);
        myBlock[i].size(30,30);
        myBlock[i].position(random(windowWidth*0.8),random(windowHeight*0.8));
        myBlock[i].style("background-color","#FAA");
        myBlock[i].style("border","1px solid #444");

        myBlock[i].mousePressed(whichBlock);
        //this does not send the value which is mousePressed to the function below.
      }
    }

    function whichBlock(n){
      alert(n);
      //myBlock[n].hide();  //I want to do this if possible.
    }

How can I place the slider relative to the canvas? (i.e. in a manner similar to other p5 objects, like images, etc.)

Here's my test code:

var testslider = function(p){

    var slider;

    p.setup = function() {
      p.createCanvas(400, 400);
      p.background(200);
      slider = p.createSlider(0, 255, 100);
      slider.position(0, 20);
    }

    p.draw = function() {
    }

}

Thanks!

Sorry for the bad english. I might be suck to understand. I try to make some kind of interaction work that by writing some words, It becomes a short melody on processing. And you can see your typewriting like usual web environment. It don't have to be a certain word and I try to make them sound when enterkey pressed.

this is the example)

In blank space, cursor blinking. You write some short sentences. You press enterkey. It becomes little melody that matched the keycode that you pressed. Like if you write 'a little butterfly' It became 'a' note melody~ 'l' note melody~ 'i' note melody~.

I used Pfont function for the text and Minim for the sound part. However I can't make them work togher.

A little example will helps me to understand, I really appreciate.

Thanks for reading this mess.

I create a checkbox cb using createCheckbox with a label argument. Then I try to position my checkbox+label using cb.position(x,y) but somewhat to my surprise only the actual checkbox changes place, the label on the other hand remains on its original position. What is the best way to reposition the label as well?

var cb;

function setup() {
  cb = createCheckbox('enabled', false);
}

function draw() {
  cb.position(400, 400);
}

Thanks! (I'm using p5.js v0.4.23 March 04, 2016 and p5.dom.js v0.2.9 March 3, 2016)

I have the following code, where I want to create a p5 canvas, attach it to a div (with id of 'shootingstar'), and then create a button on that canvas.

function setup() {
    var myCanvas = createCanvas(400, 400);
    myCanvas.parent('shootingstar');

    resetButton = createButton('reset');
    resetButton.position(300, 300);
    resetButton.mousePressed(reset);
}

The problem is, the button is rendering as if the canvas.parent() command has had no effect. How do I get the button to be positioned relative to the top left corner of the canvas?

I should mention that I'm trying to keep this as simple as possible because first year students are going to be using it.

Any thoughts would be awesome! Thank you!

I'm trying to put a bar to control the time / position when running a film, based on this example: https://forum.processing.org/two/discussion/8103/using-a-controlp5-slider-as-video-progress-bar

To show the bar as the elapsed time, ran regular ...

But how do if you want to advance the film? It did not work when I tried movie.position () (as sound).

Someone could give a tip, or where can I find some documentation on the subject?

Below the code I am using as an example:

import controlP5.*;
import processing.video.*;                              

ControlP5 cp5;
Movie movie1;

float md, mt;

int progress;
boolean play;

void setup() {
  size(600, 400);
  cp5 = new ControlP5(this);

  movie1 = new Movie(this, "D:/Projetos/Videos/Branca_de_Neve.mpg");
  movie1.play();

  ProgressBar p; // custom Controller class, see implementation below
  p = new ProgressBar(cp5, "progress"); // "progress" here will be linked to variable progress
  //p.setPosition(100, 300).setSize(200, 20).setRange(0, 1000).listen(true);
  p.setPosition(70, 330).setSize(350, 10).setRange(0,  (int) movie1.duration()).listen(true);

  // callback listener for TimeLine object   
  p.addCallback(new CallbackListener() {
    public void controlEvent(CallbackEvent theEvent) {
      if(theEvent.getAction() == ControlP5.ACTION_PRESS) {
        float x = theEvent.getController().getPointer().x();
        float a1 = 0;
        float a2 = theEvent.getController().getWidth();
        float b1 = theEvent.getController().getMin();
        float b2 = theEvent.getController().getMax();
        float val = map(x,a1,a2,b1,b2);
        theEvent.getController().setValue(val);
        println("now change movie time to ", val, movie1.time());

        //movie1.position(); //????
      }
    }
  }
  );

  // a toggle to switch between play and pause mode
  cp5.addToggle("play")
     .setPosition(10,375)
     .setSize(50,19)
     .getCaptionLabel().align(CENTER,CENTER);
}


void draw() {
  background(0);
  if (play) {
    // update the progressBar value/position
    // replace with audio-track position: progress = player.position();

    if (movie1.available()) movie1.read();
    image(movie1, 70, 40);

    //progress++;
    progress = (int) movie1.time();
  }
}

class ProgressBar extends Controller<ProgressBar> {

  public ProgressBar(ControlP5 theControlP5, String theName) {
    super(theControlP5, theName);

    setView(new ControllerView<ProgressBar>() {
      public void display(PGraphics pg, ProgressBar c) {

        pg.fill(!isMouseOver() ? c.getColor().getForeground():c.getColor().getActive());
        pg.rect(0, 0, c.getWidth(), c.getHeight());

        float val = map(c.getValue(),c.getMin(), c.getMax(), 0, c.getWidth()); 
        pg.fill(255);
        pg.rect(0, 0, val, c.getHeight());
      }
    }
    );
  }

  public ProgressBar setValue(float theValue) {
    return super.setValue(constrain(theValue, getMin(), getMax()));
  }

  public ProgressBar setRange(int theStart, int theEnd) {
    _myMin = theStart;
    _myMax = theEnd;
    return this;
  }
}

Thanks for listening

My purpose and goal for using P5.js to load in templates and display them in the DOM in order to manipulate them to appear as if they are being assembled and dissembled between "god page" transitions (a Backbone Framework). The view for each route would use P5.js's position() method to move the newly copied and created DOM elements to their final resting state on the page by appending them off the visible screen (and promptly disabling scrolling using the overflow hidden method on the body) and then slowly transitioning them back to their intended position on the screen with easement.

Currently I have a non-P5.js version of this where I use a margin large enough not to be visible in a random direction (this part I already have working) and then using the JQuery animate method to slowly reduce the margin making the appearance of DOM elements assembling on the page. Removing the elements from the DOM was easy, but appending them is way more difficult which is why I wanted to use P5.js as the agent that does the movement and transition.

Using JQuery's $.get() method I am able to grab templates from files, then I use P5's createElement() to create a DIV with the template as my content. i.e "createElement("div",template)". From there I am able to give it an attribute("id", "dash1") and append it to the DOM and it renders fine as a DOM element, however, if I create multiple instances of this object the two rendered objects stack on themselves in the body even when I try to append one to the other. I have assigned both an ID attribute, so in non-P5 instances this method of grabbing templates and inserting them into each other would work fine. However, in P5.js I assume the created elements are treated differently in Setup() and I was wondering if anyone would be able to shed some light on the subject.

That was a lot of explanation for a small question, but hopefully it explains thoroughly what I am trying to do.

image(myimages[imgselected], 0, 0);

But then, don't seem to be able to remove it. Don't see a remove image function available. And when I try to just move it offscreen, it seems to make a copy of it at the new location. Ie:

image(myimages[imgselected], -1000, -1000);

Just makes a copy of the image at -1000,-1000 and leaves the original in-tact at 0,0.

I have noLoop() turned on, in case this is an issue with not hitting the draw loop?

thx for any pointers.

Example of JS (not my actual javascript being used):

function setup() {

//Creating the webpage interface 
var canvas = createCanvas(1280, 1280);
canvas.parent('container');
canvas.position(0,0);
textSize(14);


//Variable center of screen
centerx = width/2;
centery = height/2; 

//Creating the # of authors input (will be replced with CSV data)
but = createInput("10");
but.position((200-176)/2,10);
save('test.png');
}

This is being drawn within the HTML. Running this just leads to that error. What should I do to fix? Thanks!

Or maybe a better way to get an image in p5js to be a fullscreen background without scaling the width? I tried using:

image(img, 0, 0);
img.resize(0, height);

but for some reason this function gives me errors.

if my way of thinking is going in the wrong direction, please tell me…i'm getting a bit confused by mixing these different languages.

< script language=" javascript " src="sketch.js" >< /script >

and the canvas gets automatically drawn after all the HTML elements in the body section. I would like to position it somewhere between my other html elements. Could anyone help me on how to do this?

Thanks in advance.