import peasy.*;
Planet sun;

PeasyCam cam;

void setup() {
  size(600, 600, P3D);
  cam = new PeasyCam(this, 500);
  sun = new Planet(50, 0, 0);
  sun.spawnMoons(4, 1);
}

void draw() {
  background(0);
  lights();
  sun.show();
  sun.orbit();
}

// planet class

class Planet {
      float radius;
      float distance;
      Planet[] planets;
      float angle;
      float orbitspeed;
      PVector v;

      PShape globe;

      Planet(float r, float d, float o) {

    v = PVector.random3D();

    radius = r;
    distance = d;
    v.mult(distance);
    angle = random(TWO_PI);
    orbitspeed = o;
  }

  void orbit() {
    angle = angle + orbitspeed;
    if (planets != null) {
      for (int i = 0; i < planets.length; i++) {
        planets[i].orbit();
      }
    }
  }

  void spawnMoons(int total, int level) {
    planets = new Planet[total];
    for (int i = 0; i < planets.length; i++) {
      float r = radius/(level*2);
      float d = random((radius + r), (radius+r)*2);
      float o = random(-0.1, 0.1);
      planets[i] = new Planet(r, d, o);
      if (level < 2) {
        int num = int(random(0, 3));
        planets[i].spawnMoons(num, level+1);
      }
    }
  }

  void show() {
    pushMatrix();
    noStroke();
    PVector v2 = new PVector(1, 0, 1);
    PVector p = v.cross(v2);
    rotate(angle, p.x, p.y, p.z);
    stroke(255);
    //line(0, 0, 0, v.x, v.y, v.z);
    //line(0, 0, 0, p.x, p.y, p.z);

    translate(v.x, v.y, v.z);
    noStroke();
    fill(255);
    sphere(radius);
    //ellipse(0, 0, radius*2, radius*2);
    if (planets != null) {
      for (int i = 0; i < planets.length; i++) {
        planets[i].show();
      }
    }
    popMatrix();
  }
}

And this is the p5.js code

var easycam;

function setup() {
    createCanvas(windowWidth,windowHeight,WEBGL);
    easycam = createEasyCam();
    sun = new Planet(20, 0, 0, random(TWO_PI));
    sun.spawnMoons(2, 1);
}

function draw() {
    background(0);
    cursor(HAND);

    sun.show();
    sun.orbit();
}

//planet class

        class Planet {
            constructor(radius, distance, orbitspeed, angle,mass) {
            this.radius = radius;
            this.distance = distance;
            this.orbitspeed = orbitspeed;
            this.angle = angle;
            this.planets = [];
            this.mass=mass;

            // this should be correct
            // this is the vector coming out of the planet itself.

            this.v = createVector();
            this.v = p5.Vector.random3D();
            this.v. mult(this.distance);
            // park this for now.
            // this.v = createVector();
            // this.v = p5.Vector.random3D();
            // this.v.mult(this.distance);
            // var v = new p5.Vector.random3D();
            // v. mult(this.distance);


        }


    orbit() {
        this.angle += this.orbitspeed/this.mass;
        for (let i in this.planets) {
            this.planets[i].orbit();
        }
    }


    spawnMoons(total, level) {
        for (let i = 0; i < total; i++) {
            let r = this.radius/(level*2);
            let d = random(50, 150);
            let o = random(-0.1, 0.1);
            let a = random(TWO_PI);
            this.planets.push(new Planet(r, d/level, o, a));
            if (level < 1) {
                let num = Math.floor(random(0, 4));
                this.planets[i].spawnMoons(num, level+1);
            }
        }
    }


    show() {
      push();
      noStroke(0)
      // fill(255);
      // let v2 = createVector(1,0,1);
      // let p = createVector(v.cross);
      // this.v2 = createVector(0, 0, 1);
      // this. p = this.v.cross(this.v2);
      // rotateY(this.angel);
      // translate(v.x,v.y,v.z);
      this.v2= createVector(1,0,1);
      this.p= this.v.cross(this.v2);
      rotate(this.angel,this.p.x,this.p.y,this.p.z);
      translate(this.v.x,this.v.y,this.v.z);
      //lights
          ambientLight(5,100);
          directionalLight(255, 255, 255, 0.2, 0.2, 0.7);
          specularMaterial(255);
          sphere(this.radius);

        for (let i in this.planets) {
            this.planets[i].show();
        }
        pop();
    }

}

I would really really appreciate some help, its quite difficult to find references on vectors in p5.js.

Thanks loads in advance

let h = 0;
let k = 0;
let step = 0.05;
let r = 200;
let points = [];
let i = 0;
let forward = true;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(81);
  translate(width / 2, height / 2);
  noFill();
  strokeWeight(1);
  stroke(255);

  beginShape();
  for (let theta = TWO_PI; theta > PI; theta -= step) {
    let x = h + r * Math.cos(theta);
    let y = k - r * Math.sin(theta);
    vertex(x, y);
    points.push(createVector(x, y));
  }
  endShape();

  strokeWeight(10);
  stroke(0);
  point(points[i].x, points[i].y);
}

That shows a dot moving from one side of an arc to another. When it gets to the end, however it teleports back to the start. I want to make it swing back and forth on the arc. I have tried it using the length of the points array, but that seems to be massively overflowed and it contains duplicate points. Is there a way to do this, or a better way to do what I have done?

ellipse(280,165,28,28); //Left Eye
ellipse(310,165,28,28); //Right Eye
fill(0);
ellipse(278,162,3,3);   //Left Pupil
ellipse(315,167,3,3);   //Right Pupil

how would I limit movement to within the eyes?

I've been reading through every 'convert Processing into P5' document I can get a hold of, and I still can't figure out how to translate PVector's (processing) into p5.vector syntax.

Beneath is code in Processing (working). Beneath that is my code for p5 (not working) I'm pretty sure it's my Vector syntax that is out of wack. Can someone please provide direction? Saying that, there might be other things wrong, and I'm open to suggestions.

PROCESSING:

PImage img;
ArrayList pts;


void setup() {
  img = loadImage("ASKEW A.jpg");

    size(500, 500, P3D);

  pts = new ArrayList();
  findPoints();
}

void draw () {
  background(255);


for (int i = pts.size()-1; i >= 0; i --){
      PVector pt = (PVector)pts.get(i);

      fill(pt.z);

      noStroke();

      stroke(0, 30);
      for (int j = pts.size()-1; j >= 0; j --){
      if(i>1){  
        PVector pt2 = (PVector)pts.get(j);
        if (pt.dist(pt2) < 20){

          int r = 10;
          float x = r * tan(radians(i*(360.0/ (mouseX * tan(3)) )));
          float y = r * sin(radians(i*(360.0/ (mouseY*  tan(3)) )));

          int r1 = 2;
          float x1 = r1 * tan(radians(i*(360.0 / (mouseX* tan(3)))));
          float y1 = r1 * sin(radians(i*(360.0 / (mouseY* tan(3)))));


          stroke(0, 30);
          line(pt.x + x, pt.y + y, 
          pt2.x + x1, pt2.y + y1);
        }
      }
    }
  }
}

void findPoints(){

  img.loadPixels();
  for (int i = img.width-1; i >= 0; i -= 3){
    for (int j = img.height; j >=0; j -= 3){

      color c = img.get(i, j);
      if (brightness(c) < 255){
        pts.add(new PVector(i, j, brightness(c)));
      }
    }
  }
}

p5 :

var img;
var pts = [];
var i, j;


function setup() {

  createCanvas(500, 500);

    img = loadImage("ASKEW A.jpg");
    findPoints();
    }


function draw () {
  background(255);

for (i = pts.length()-1; i >= 0; i --){
      var pt = new p5.Vector.pts.get(i);
      fill(pt.z);

      noStroke();

      stroke(0, 30);
      for (j = pts.length()-1; j >= 0; j --){
      if(i>1){  
        var pt2 = new p5.Vector.pts.get(j);
        if (pt.dist(pt2) < 20){

          var r = 20;
          var x = r * tan(radians(i*(360.0/ (mouseX) )));
          var y = r * sin(radians(i*(360.0/ (mouseY) )));

          var r1 = 2;
          var x1 = r1 * tan(radians(i*(360.0 / (mouseX))));
          var y1 = r1 * sin(radians(i*(360.0 / (mouseY))));


          stroke(0, 30);
          line(pt.x + x, pt.y, 
          pt2.x + x1, pt2.y + y1);
        }
      }
    }
  }
}


function findPoints(){

  img.loadPixels();
  for (var i = img.width-1; i >= 0; i -= 3){
    for (var j = img.height; j >=0; j -= 3){

      var c = img.get(i, j);
      if (brightness(c) < 255){
        pts.push(new p5.Vector(i, j, brightness(c)));
      }
    }
  }
}

function setup(){ createCanvas(600,600); var x = random(0,width); var y = height-50; var speed = 1; } function draw(){ clear(); y -= speed; rect(x,y,200,20); }

Now,as the rect() keeps moving to the top,I want new rect() to appear from the bottom after a certain time say 1000ms. I tried to keep track of the history of the first rect() in a vector and I drew another rect from the vector. but it draw rect() but none of the rect() is moving to top. I am sure I am missing something here,and would like to someone to point that out for me.

Here is what I have tried so far.

function rectangles(x,y,w,h,speed){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.speed = 1;

this.records = [];

    this.getAllPaths = function(){
       this.records.push(createVector(this.x,this.y));
    }

    this.drawRectangles = function(){
      this.y -= this.speed;
      rect(this.x,this.y,this.w,this.h);
    }
}

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

function draw(){
   background(255);
   var r = new rectangles(random(0,width) , height-50 , random(50,300) , 10);
   r.getAllPaths();
   r.drawRectangles();
}

This is my Cell function

function Cell(pos, r, c){

if (pos) {
  this.pos = pos.copy();
} else {
  this.pos = createVector(700, 360, 700, 160);
}

this.r = r || 60;
this.c = c || color(random(100, 200), 0, random(100, 200), 100);

this.clicked = function(x, y) {
    var d = dist(this.pos.x, this.pos.y, x, y);
    if (d < this.r) {
        return true;
    }   else {
        return false;
    }

}

this.mitosis = function() {
  this.pos.x += random(-10, 10);    
  var cell = new Cell(this.pos, this.r*0.8, this.c);
  return cell;
}

this.move = function () {
  var vel = p5.Vector.random2D();
  this.pos.add(vel);
}

this.show = function () {
    noStroke();
    fill(this.c);
    ellipse(this.pos.x, this.pos.y, this.r, this.r)
}

}

Any help would be really appreciated. Thank you

I have small issue with creating linked beziers in that the link between each bezier is not that smooth. I'm using bezierVertex to draw the connected beziers.

What I'm trying to do is smooth out this join, and from what I understand I need to do the following "In order to make two curves A and B smoothly continuous, the last control point of A, the last point of A, and the first control point of B have to be on a straight line."

So, given two vectors like so;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(255);
    noLoop();

    rectMode(CENTER);


    var v1 = createVector(random(200, 300), random(200, 300));
    var v2 = createVector(random(100, 400), random(300, 400));

    ellipse(v1.x, v1.y, 20, 20);
    ellipse(v2.x, v2.y, 20, 20);


    var angle = p5.Vector.angleBetween(v1, v2);

    console.log(angle, radians(angle));

    ellipse( 200 * sin(angle) , 200 * cos(angle), 30, 30);
}

I want to be able to plot the 3rd, so that I can set the control point of the next bezier in my in a straight line, and smooth the bezier connection point.

Thanks in advance.

First time using p5. I'm converting an old Director project as a learning exercise. The Director version looks like this; https://goo.gl/photos/K6zmabEyPUgTsmYMA

var d = dist(v1.x, v1.y ,v2.x, v2.y); i got a error message cannot read property 'x' of undifined

        var bubles=[]; 
        var reached = [];
        var unreached=[];
        function setup() {
           createCanvas(410,410);  
        }

        function mousePressed(){
          var v = createVector(mouseX,mouseY);
          ellipse(v.x,v.y,20,20);
          bubles.push(v);
        }

        function draw() {
            background(200,200,200);

            for(var i=0;i<bubles.length;i++){
              unreached.push(bubles[i]);
            }

            reached.push(unreached[0]);
            unreached.splice(0,1); 

            while(unreached.length>0){
               var min=1000;
              var rIndex;
              var uIndex;
              for(var i=0; i<reached.length;i++){
                for(var j=0; j<unreached.length;j++){
                  var v1 = reached[i];
                  var v2 = unreached[j];
                  var d = dist(v1.x, v1.y ,v2.x, v2.y);
                  if(d<min){
                    min=d;
                    rIndex=i;
                    uIndex=j; 
                  }
                }
              }
              line(reached[rIndex].x,reached[rIndex].y,unreached[uIndex].x,unreached[uIndex].y);  
              reached.push(unreached[uIndex]);
              unreached.splice(0,uIndex);
            }
        }

function setup() {

    paLAmount = createInput("Amount of parallel lines");
      nAmount = createInput("Amount of needles");
      nLength = createInput("Length of needles");
}


    var makeNeedles = function() {

      var setNAmount = nAmount.value();
      var setNLength = nLength.value();

      //Creating random vectors
      for(var j = 0; j < setNAmount; j++) {

         var cx = random(setNLength + 1, (width - setNLength - 1));
         var cy = random(setNLength + 1, (height - setNLength - 1));
         var a = createVector(cx, cy);

         console.log(cx, cy);

         coIndex1.push(a);
   };
}

All help is appreciated!:)

I don't really know if there's any huge advantage of using the createVector() function, but I use vectors regularly to shorten my code, so I'm curious.

I've been playing with p5js by coming up with ideas and trying to implement them in p5js. I've had some success but have an issue with one of my examples that I'm hoping someone can help with.

My example is creating a ball with a random color in the canvas with a mousePressed event which bounces off the edges of the canvas. When the ball hits an edge, it changes the color of the h1 heading on the page to the balls color. Multiple mouse clicks create multiple balls.

Everything seems to work fine except when I click the mouse outside the canvas onto the page. When I do this the heading color no longer changes color when the different colored balls strike the edges of the canvas.

I'm hoping someone can help me trouble-shoot my code as well as offering advice on other ways to improve it.

Also, I tried including my code into code-blocks using ``` but it doesn't seem to work too well. I ended up indenting every line four spaces to get it to render correctly. Any hints here?

sketch.js:

var balls = [];
var heading;
var blip;

function preload() {
  blip = loadSound('blip.wav');
}

function setup() {
  createCanvas(600, 400);
  heading = select('#color_txt');
}

function draw() {
  background(220);
  for (i = 0; i < balls.length; i++) {
   balls[i].move();
   balls[i].display();
 }
}

function mousePressed() {
  ball = new Ball();
  balls.push(ball);
}

function hex_color(r, g, b) {
  var hx = "#" + hex(r,2) + hex(g,2) + hex(b,2);
  return hx;
}

function Ball() {
  this.position = createVector(mouseX, mouseY);
  this.velocity = createVector(random(-4,4), random(-4,4));
  this.col = hex_color(random(255), random(255), random(255));
  this.diam = random(15,50);
  this.rad = 0.5 * this.diam;

  this.move = function() {
    this.position.add(this.velocity);

    if (this.position.x + this.rad > width || this.position.x - this.rad < 0) {
      this.velocity.x *= -1;
      blip.play();
      heading.style('color', this.col);
    }

    if (this.position.y + this.rad > height || this.position.y - this.rad < 0) {
      this.velocity.y *= -1;
      blip.play();
      heading.style('color', this.col);
    }
  }

  this.display = function() {
    fill(this.col);
    ellipse(this.position.x, this.position.y, this.diam, this.diam);
  }
}

index.html:

<html>
  <head>
    <meta charset="UTF-8">
    <title>Vectors</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>

  <body>
    <h1 id='color_txt'>Random balls bouncing around the canvas</h1>
    <p>Click on the canvas to generate a ball or random radius, color
      and velocity</p>
  </body>
</html>

var c1 = createCanvas(200, 200);
c1.parent('firstcanvas');

and

var c2 = createCanvas(300, 300);
c2.parent('secondcanvas');

and, in the html

<div id = "firstcanvas"></div>
<script src="pathto/firstscript.js" type="text/javascript"></script>
<div id = "secondcanvas"></div>
<script src="pathto/secondscript.js" type="text/javascript"></script>

Inspect shows

<div id="firstcanvas"></div>
<script src="pathto/firstscript.js" type="text/javascript"></script>
<canvas id="defaultCanvas0" width="200" height="200" style="width: 200px; height: 200px;"></canvas>
<div id = "secondcanvas"></div>
<script src="pathto/secondscript.js" type="text/javascript"></script>

and the webpage just shows the first sketch. I've tried various combos of div and canvas, with no luck.

<div id="firstcanvas">
<script src="pathto/firstscript.js" type="text/javascript"></script>
<canvas id="firstcanvas" width="200" height="200" style="width: 200px; height: 200px;"></canvas>
</div>

and

<canvas id="firstcanvas">
<script src="pathto/firstscript.js" type="text/javascript"></script>
</canvas>

with no luck. If I put ordinary javascript animations on the page, as long as I target the right canvas id, they work fine together. Any ideas?

var l;
var v;

function setup() {
  createCanvas(1152, 648);
}

function draw() {
  background(255);
  l = new p5.Vector(576, 324);
  v = new p5.Vector(16, 9);
  l.add(v);
  if ((l.x > width) || (l.x < 0)) {
    v.x = v.x * -1;
  }
  if ((l.y > height) || (l.y < 0)) {
    v.y = v.y * -1;
  }
  noStroke();
  fill(255, 0, 0);
  ellipse(l.x, l.y, 100, 100);
  frameRate(30);
}

I already have an array of vectors wich start from the center of the image and spread outwards: http://codepen.io/giorgiomartini/pen/groeRm?editors=0010

Also everytime you click, the oouter vectors change randomly.

Now I want that instead that the line starts at the center (which is where the starting vector is) that it starts somewhere further away from the center, but along that vector.

something like this:

As you can see they are the same lines but their start point is offseted through the line direction.

Any idea how to acomplish this ?

Thanks!

One possible design would be give mag() an optional p5.Vector argument, which if provided, fills in the vector with the unit vector:

var v = createVector(20, 10);
var u = createVector();
var m = v.mag(u);

// m has value 22.360679774997898
// u has components [0.8944271909999159, 0.4472135954999579]

Would this be useful to the community at large?

Code:

var rectArray = [];

var mouseVector;

function setup() {
  createCanvas(windowWidth,windowHeight);

  for (i = 0;i < 100; i++) {
  rectArray.push(new Square(10*i,40));
  }
}

function draw() {

  for (i = 0; i < rectArray.length; i++) {
    rectArray[i].rotation();
    rectArray[i].update();
    rectArray[i].display();
  }

}

function Square(x,y) {
  this.x = x;
  this.y = y;
  this.size = 20;
  this.color = color(200);
  this.target = 0;
  this.rotationValue = 0;

  this.rotation = function() {
    push();
    translate(this.x,this.y);
    mouseVector = createVector(mouseX,mouseY);
    this.target = mouseVector.heading();
    this.rotationValue = this.target;
    pop();
  }

  this.update = function() {
    //this.x = this.x + 1;
  }

  this.display = function() {
    push();
    translate(this.x,this.y);
    rectMode(CENTER);
    rotate(this.rotationValue);
    fill(this.color);
    rect(0,0,this.size,this.size);
    pop();
  }
}

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

function draw() {
  background(255);
  var v1 = createVector(width/2,height/2);
  var v2 = createVector(mouseX,mouseY);

  var angle = p5.Vector.angleBetween(v1,v2);
  print(angle);

  push();
  translate(width/2,height/2);
  rotate(angle);
  rectMode(CENTER);
  rect(0,0,10,10);
  pop();
}

function Mover(x, y, mass) {
   this.position = new PVector(x,y);
   this.velocity = new PVector();
   this.acceleration = new PVector();
   this.mass = mass;

this.display = function() {
   ellipse(position.x, position.y, 50,50);
}

this.update = function() {
   this.velocity.add(this.acceleration);
   this.position.add(this.velocity);
   this.acceleration.mult(0);
}

this.applyForce = function(force) {
   var f = PVector.div(force.get(), this.mass);
   this.acceleration.add(f);
}
}