Im getting side of the rectangle correct in and are always 90 degrees but the scaling of the width is not correct and cant really figure out how to solve that.

Any hint?

void setup() {
  size(500, 500, P2D); 
  background(255);
  //noCursor();
}

void draw() {
  background(255);
  gradientRectangle(); 
}

void gradientRectangle() {
  int rectWidth = 25; 
  float x1 = mouseX;
  float y1 = mouseY;
  float x2 = 250;
  float y2 = 250;
  color from = color(255, 0, 0);
  color to = color(0);

  // calculate the theta
  float adjecent = x2-x1;
  float opposite = y2-y1;

  float tanValue = opposite / adjecent;
  float theta = atan(tanValue); // in radians
  float angle = degrees(theta); // in degrees
  println("theta: "+ theta + " tanValue " + tanValue + " angle: " + angle);

  // calculate the change of the side of the second triangle
  float opposite2 = tan(theta) * rectWidth;
  println("opposite2: " + opposite2);

  // draw the shape
  beginShape();
  noStroke();  
  strokeWeight(5);

  fill(from);   
  vertex(x2, y2);  // övre till höger
  fill(to);
  vertex(x1, y1); // övre vänstra
  fill(to);
  vertex(x1+opposite2, y1-rectWidth); // undre vänstra
  fill(from);
  vertex(x2+opposite2, y2-rectWidth); // undre till höger
  endShape();
}

Processing sketch:

color[] col = { color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(0, 0, 0), color(255), color(125)}; 

void setup() { 
  size(200, 200, P2D);  
}

void draw() {
  background(col[1]);
  gradient();
}

void gradient() {
  beginShape();
  fill(255, 0, 0);
  vertex(100, 100);
  fill(0, 255, 0);
  vertex(400, 100);
  fill(0, 0, 255);
  vertex(mouseX, mouseY);
  endShape();
}

P5 sketch:

var col;

function setup() {
  var col = [color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(0, 0, 0), color(255), color(125)];
  createCanvas(200, 200, P2D);
}

function draw() {
  // background(col[1]);
  gradient();
}

function gradient() {
  beginShape();
  fill(255, 0, 0);
  vertex(100, 100);
  fill(0, 255, 0);
  vertex(400, 100);
  fill(0, 0, 255);
  vertex(mouseX, mouseY);
  endShape();
}

I'm currently trying around with terrain generation using perlin noise. Therefore, I generate a map of 3d vertices in a shape and render the shape with a texture (see the below code).

However, when rotating the map, it seems like parts of the mesh are rendered in wrong order, since there are artefacts and overlaps. See the following three images for the same szene, rotated by a few degrees.

I really think its a problem due to my code (it has been ages since I last did some real 3d coding), for what its worth: I'm running this code on a arch linux system (kernel 4.15.14-1-ARCH) and I've got a integrated intel hd graphics card.

The code I use to render this scene is the following (I skipped some parts for brevity): edit: I've added the parts missing for letting the example run. Thanks to jeremydouglass for the comment!

scale = 20
zangle = 0
l_width = 100
l_height = 100

def setup():
    size(1024, 768, P3D)
    background(52)

def calc_elevation(w, h, octaves=4):
    elevation = []

    for y in range(0, h):
        column = []
        for x in range(0, w):
            nx = map(x, 0, w, 0, 1)
            ny = map(y, 0, h, 0, 1)
            frequency = 1
            hight_value = 0
            for _ in range(octaves):
                hight_value += 1 / frequency * noise(5 * nx * frequency, 5 * ny * frequency)
                frequency *= 2
            hight_value = pow(hight_value, 3.0)
            column.append(hight_value)
        elevation.append(column)
    return elevation

def keyPressed():
    global zangle
    if key == 'a':
        zangle += -PI / 10
    elif key == 'd':
        zangle += PI / 10

def draw():
    global zangle

    background(52)
    textSize(20)
    translate(width/2, height/2, -600)
    rotateX(PI / 2 * 0.8)
    rotateZ(zangle)

    elevation = calc_elevation(l_width, l_height, 2)
    max_height = max([max(list) for list in elevation])

    noStroke()
    mesh = createShape()

    img = createImage(100, 100, RGB)
    for y in range(100):
        for x in range(100):
            img.pixels[y * 100 + x] = color((float(x) / float(100)) * 255, (1 - (float(x) / float(100))) * 255, 0)

    mesh.setTexture(img)
    mesh.beginShape(TRIANGLE)
    for y in range(-l_height / 2, l_width / 2 - 1):
        for x in range(-l_width / 2, l_width / 2 - 1):
            mesh.vertex((x + 1) * scale,
                        y * scale,
                        (elevation[y + l_height / 2][x + 1 + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x + 1, -l_width / 2, l_width / 2, 0, img.width),
                        map(y, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex(x * scale,
                        y * scale,
                        (elevation[y + l_height / 2][x + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x, -l_width / 2, l_width / 2, 0, img.width),
                        map(y, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex(x * scale, 
                        (y + 1) * scale, 
                        (elevation[y + 1 + l_height / 2][x + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x, -l_width / 2, l_width / 2, 0, img.width),
                        map(y + 1, -l_height / 2, l_height / 2, 0, img.height)
                        )

            mesh.vertex((x + 1) * scale,
                        y * scale,
                        (elevation[y + l_height / 2][x + 1 + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x + 1, -l_width / 2, l_width / 2, 0, img.width),
                        map(y, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex(x * scale,
                        (y + 1) * scale,
                        (elevation[y + 1 + l_height / 2][x + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x, -l_width / 2, l_width / 2, 0, img.width),
                        map(y + 1, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex((x + 1) * scale, 
                        (y + 1) * scale, 
                        (elevation[y + 1 + l_height / 2][x + 1 + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x + 1, -l_width / 2, l_width / 2, 0, img.width),
                        map(y + 1, -l_height / 2, l_height / 2, 0, img.height)
                        )
    mesh.endShape(TRIANGLE)
    shape(mesh, 0, 0)

edit: If removing the "noStroke" option, the problem becomes even more obvious. It seems as if some of the vertices are rendered on top of others...

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?

function setup() {
  createCanvas(600, 600);
  background(150);    
}

function createVertices() {
  let vertices = [];
  let angle = TWO_PI / 6;
  for (let a = 0; a < TWO_PI; a += angle) {
    var sx = 50 + cos(a) * 20;
    var sy = 50 + sin(a) * 20;
    vertices.push(vertex(sx, sy));
  }
  return vertices;
}

function draw() {
  var verticesArray = createVertices();
  polygon(50, 50, 20, verticesArray);
}

function polygon(x, y, radius, ver) {
  beginShape();
  let vertices = [];
  for (var i = 0; i < ver.length - 1; i++) {
    vertices.push(vertex(ver[i], ver[i + 1]));
  }
  endShape(CLOSE);
}

function polygon() doesn't draw a hexagon in this way, but only if i copy the code in createVertices() function. what is the problem?

var bunkers = [];
var b1;

function setup() {
      createCanvas(window.innerWidth, window.innerHeight);
      b1 = new Bubble(250, 200);
        for (var i = 0; i < 4; i++){
           bunkers[i] = new Bunker(i*294 + 247, height-140);
   }
}

function draw() {
      background(0);

      for (var i = 0; i < 4; i++){
            bunkers[i].show();
  }
      b1.update();
      b1.display();

      if (b1.intersects(bunkers[i])){
            bunkers[i].changeColor();
    }
}
function Bubble(x, y) {
      this.x = x;
      this.y = y;
      this.r = 48;
      this.col = color(255);
      this.changeColor = function() {
            this.col = color(random(255), random(255), random(255))

    }
      this.display = function() {
            stroke(255);
            fill(this.col);
            ellipse(this.x, this.y, this.r * 2, this.r * 2);

    }

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

        }
 }

       this.update = function() {
            this.x = this.x + random(-5, 5);
            this.y = this.y + random(-5, 5);

    }

}

function Bunker(x, y) {
       this.x = x;
      this.y = y;
      this.r = 60;
       this.show = function(){
          push();
          translate(this.x-257, this.y-68);
          noStroke();
          fill(0, 100, 0);
          beginShape();
          vertex(200, 50);
          vertex(208, 50);
          vertex(208, 42);
          vertex(216, 42);
          vertex(216, 34);
          vertex(224, 34);
          vertex(224, 26);
          vertex(290, 26);
          vertex(290, 34);
          vertex(298, 34);
          vertex(298, 42);
          vertex(306, 42);
          vertex(306, 50);
          vertex(314, 50);
          vertex(314, 110);
          vertex(290, 110);
          vertex(290, 102);
          vertex(282, 102);
          vertex(282, 94);
          vertex(274, 94);
          vertex(274, 86);
          vertex(240, 86);
          vertex(240, 94);
          vertex(232, 94);
          vertex(232, 102);
          vertex(224, 102);
          vertex(224, 110);
          vertex(200, 110);
          endShape(CLOSE);
          pop();
   } 
}

Thank you.

var bunkers = [];

   function setup(){
      createCanvas(window.innerWidth, window.innerHeight);
       for (var i = 0; i < 4; i++) {
           bunkers[i] = new Bunker(i*294 + 247, height-150);
     }     
   } 

  function draw(){
      background(0);
      for (var i = 0; i < 5; i++) {
         bunkers[i].show();    
  }   
} 
 function Bunker(x, y){
      this.show = function(){
          push();
          translate(x-257, y-68);
          noStroke();
          fill(0, 100, 0);
          beginShape();
          vertex(200, 50);
          vertex(208, 50);
          vertex(208, 42);
          vertex(216, 42);
          vertex(216, 34);
          vertex(224, 34);
          vertex(224, 26);
          vertex(290, 26);
          vertex(290, 34);
          vertex(298, 34);
          vertex(298, 42);
          vertex(306, 42);
          vertex(306, 50);
          vertex(314, 50);
          vertex(314, 110);
          vertex(290, 110);
          vertex(290, 102);
          vertex(282, 102); 
          vertex(282, 94);
          vertex(274, 94);
          vertex(274, 86);
          vertex(240, 86);
          vertex(240, 94);
          vertex(232, 94);
          vertex(232, 102);
          vertex(224, 102);
          vertex(224, 110);
          vertex(200, 110);
          endShape(CLOSE);
          pop();
  }
}

void setup() { size(128, 128, OPENGL); background(128); noStroke(); beginShape(); fill(0); vertex(30, 20); vertex(85, 20); fill(0,255,0); vertex(85, 75); vertex(30, 75); endShape(); }

Here is how the text file looks like:
320.859 283.133
313.715 287.457
310.332 295.332
302.996 300.285
296.805 307.137
292.359 297.824
286.586 304.398
.........(with 700 more lines)

And my code:

void setup() {
  size(400, 400);
  background(0);
  stroke(255);
  strokeJoin(ROUND);
  strokeWeight(2);
  String[] dots = loadStrings("design.txt");

  beginShape();
  for (int i = 0; i < dots.length; i+= 1) {
    vertex(float(dots[i]), float(dots[i]));
  }
  endShape(CLOSE);
}

I can't figure out why it is not working. I've put a println() to check if the values retrieved in each iteration are ok. The values are ok, but vertex does not draw the polygon. I've also tried leaving the image (svg) out, because perhaps, the loop draws it behind the map, but again, no success. Maybe the endShape should not be outside the second loop, meaning that all code between beginShape and endShape must remain together? Any idea? Thanks so much in advance, Marcelo

This is the program (Processing 2):

PShape mapaBA;
Table table;

void setup(){
  size(800,800);
  noLoop();
  table = loadTable("barrios.csv"); // coords for some neighborhoods limits
  mapaBA = loadShape("CABA.svg"); // map of Buenos Aires city
}

void draw(){
    shape(mapaBA,0,0,width,height);
    for (int i=0;i<table.getRowCount();i++){ 
      for (int e =0;e<table.getColumnCount()-1;e=e+2){ 
          beginShape();
          int x = table.getInt(i,e);
          int y = table.getInt(i,e+1);
          println(i, e, x,y); // just to test if values are ok
          vertex(x,y); // should draw a polygon that delimites a neighbourhood, based on coords
        }
          endShape(CLOSE);
    }

}

The csv file contains the following values:

642,320,554,326,564,365,643,355
647,355,563,364,561,401,648,393
559,403,612,400,617,438,567,468
649,394,612,398,618,440,659,431

I'm completely new to processing, seems a magnificent tool!

But I have a problem which in the end comes to this prototype example:

size (600,600);
translate(width/2, height/2);
background(255);
stroke(0);
noFill();

//does work
beginShape();
vertex(0,0);
vertex(20,0);
vertex(20,20);
vertex(0,20);
vertex(0,0);
endShape();

//doesn't work, no square drawn
beginShape();
vertex(0,0);
translate(50,0);
vertex(0,0);
translate(0,50);
vertex(0,0);
translate(-50,0);
vertex(0,0);
translate(0,-50);
vertex(0,0);
endShape();

It would be nice for my further application if the second square would be drawn correctly as well (I know, this example is stupid, but it's the easiest way to explain my problem I think).

Does translate not work together with vertex or beginshape/endshape?

Thanks a lot for your help!

Martin

is it possible at this point ? or not at all ?

PImage IMG;
PShape SHP;


int numDetail = 360;
float rot = TWO_PI/numDetail;

void setup() {
  size(400, 400, P3D);
  IMG = loadImage("earth.jpg");
  smooth();
}

void draw() {
  background(255);
  translate(width/2, height/2);
  float radCircle = 200;
  beginShape();
  texture(IMG);
  for (int i=0; i<numDetail; i++) {
    float angle = i*rot;
    float x = cos(angle);
    float y = sin(angle);
    vertex(x*radCircle, y*radCircle, x*radCircle, y*radCircle);
  }
  endShape(CLOSE);
}

Is there a logical solution I don't think about right now?

I wanted to avoid using angles, but maybe that's the way. Or polygons built from overlapping triangles.

This what I have now:

Polygon Polygon1;

void setup() {
  size(600, 600);
  Polygon1 = new Polygon();
    background(204, 100, 30);
  Polygon1.display();
}

class Polygon {
  int numbercorners= int(random(3, 8));
  float xpos = 300;
  float ypos = 300;

  Polygon() {
  }

  void display() {
    println(numbercorners);
    beginShape();
    float endcornerx=random(-40, +40);
    float endcornery=random(-40, +40);    
    vertex(xpos+endcornerx, ypos+endcornery);   
    for (int i = 0; i < numbercorners-1; i++) {    
      vertex(xpos+random(-40, +40), ypos+random(-40, +40));
    }
    vertex(xpos+endcornerx, ypos+endcornery);  
    endShape();
  }
}

Screen Shot 2015-12-23 at 11.30.32 (The green line jitters around on purpose)

I managed to get the points of the drawn line into an array, as well as make a shape out of these points. However, the cropping of the image is still a problem.

Processing has this functionality in vertex: (https://processing.org/reference/vertex_.html)

However, I don't believe P5 has this functionality. I really don't want to have to convert the entire sketch into Processing. Is there any way to do this in P5, or to quickly convert this sketch into processing?

    // Make a variable to store the start image, as well as the drop image.
    var img;

    var cropX = [];
    var cropY = [];
    var pos = 25;
    // Make an array for all paths.
    var paths = [];

    // Make a bool for whether or not I am painting.
    var painting = false;

    // Int for how long until drawing the next circle
    var next = 10;

    // Make vars for vectors that determine where the line is drawn.
    var current;
    var previous;

    // Make ints for how much the lines dance around.
    var shake = 10;
    var minShake = shake * -1;
    var maxShake = shake * 1;

    // Make an int for the line thickness.
    var thickness = 2;
    var camera;
    var tracing = false;

    // Make vars to store the random values for colours into. 
    var rc1;
    var rc2;
    var rc3;

    // Variable for the framerate.
    var fr;

    // Variable that disables drawing lines when you didn't upload an image yet.
    var tracing = false;


    //------------------------------------------------------------------------------------------------


    function preload() {

      //Load the starting image, and store it in img.
      img = loadImage("assets/startscreen.png");

      //Load the sound that plays when you export a screenshot.
      soundFormats('mp3');
      camera = loadSound('assets/camera.mp3');

    }


    //------------------------------------------------------------------------------------------------


    function setup() {



      // Set the framerate so the lines don't jump about too quickly.
      fr = 20;

      // Setup a canvas
      var c = createCanvas(1680, 1050);

      // Store a random value out of 255 into the random colour values.
      rc1 = random(255);
      rc2 = random(255);
      rc3 = random(255);

      // Apply the right framerate
      frameRate(fr);

      // Add an event named drop, that runs function gotFile when a file is dropped onto the canvas
      c.drop(gotFile);

      // Store 0,0 vectors in current and previous.
      current = createVector(0, 0);
      previous = createVector(0, 0);

    };

    //------------------------------------------------------------------------------------------------

    function draw() {


      // Colour the background dark grey.
      background(200);

      // Draw the loaded image at 0,0 coordinates.
    image(img, 0, 0);



      //------------------------------------------------------------------------------------------------


      // Count if I've been painting for longer than the 'next' variable.
      // Also check if tracing is enabled (if I've dropped an image or not).
      // If these are true I can draw a new line.
      if (millis() > next && painting && tracing) {

        // Grab mouse position and store it in variables mouseX and mouseY.  
        current.x = mouseX;
        current.y = mouseY;

        // Add new particle
        paths[paths.length - 1].add(current);

        // Update the 'next' variable, to allow itself 200 extra millisecond for drawing the actual line.
        next = millis() + 200;

        // Move the mouse values used to draw the end of the line
        // to a variable used to draw the start of the line,
        // so that the line is continuous.
        previous.x = current.x;
        previous.y = current.y;
        append(cropX, current.x);
        append(cropY, current.y);
      }

      // Make an integer called i, with a value of 0.
      // Add 1 to i for each item in the array paths.

      // Run this once for each item in the array.
      // Name each item in the array 'i' while working.
      // Display each item in the array.
      for (var i = 0; i < paths.length; i++) {

        // Update the current object in the array.
        paths[i].update();

        // Display each item in the array.
        paths[i].display();
      } 
      noStroke();
      noFill();
         beginShape();

         for (var i = 0; i < cropX.length; ++i) {
           vertex(cropX[i], cropY[i]);
         }
         endShape(CLOSE);


    }


    //------------------------------------------------------------------------------------------------

    var ready = false;

    // Make a function called gotFile, using the variable file.
    function gotFile(file) {

      // Check if the dropped file is an image file
      if (file.type === 'image') {

        // Enable drawing lines.
        tracing = true;

        // if (ready) {
        //   img.remove();
        // }
        // Store the dropped image in the container which used to hold the startimage.
        img = createImg(file.data).style("opacity: 100; position: absolute; top: -10; right: -10; z-index: 100;draggable=false;");

        ready = true;

        // Error message in case not an image file.
      } else {
        println('Not an image file!');
      }
    }


    //------------------------------------------------------------------------------------------------

    function mouseWheel(event) {
      //event.delta can be +1 or -1 depending
      //on the wheel/scroll direction
      print(event.delta);
      //move the square one pixel up or down
      pos += event.delta;
      //uncomment to block page scrolling
      return false;
    }

    function mouseDragged() {
    return false;
      }


    // If left mousebutton is pressed down,
    function mousePressed() {
      if (mouseButton == LEFT) {

        // set the variable counting when to place a new line to 0,
        next = 0;

        // set painting to true,
        painting = true;

        // store the mouse coordinates in mouseX and mouseY,
        previous.x = mouseX;
        previous.y = mouseY;

        // and add a new Path method to the array.
        paths.push(new Path());
      }
    }

    // When mouse is released, set painting to false, which disables any paths being drawn.
    function mouseReleased() {
      painting = false;
    }


    //------------------------------------------------------------------------------------------------


    // Describe the Path function that should be pushed to the array.
    function Path() {

      // Create an array inside this function named particles.
      this.particles = [];
    }

    // Add the variable position to the function Path as its function'()' variable.
    Path.prototype.add = function(position) {

      // Add a new particle to this particle array with a position and hue.
      this.particles.push(new Particle(position, this.hue));
    }

    // Take the Path() function, and and add this command to it.
    Path.prototype.update = function() {

      // Make an integer called i, with a value of 0.
      // Add 1 to i for each item in the array paths.

      // Run this once for each item in the array.
      // Name each item in the array 'i' while working.
      // Display each item in the array.
      for (var i = 0; i < this.particles.length; i++) {
        this.particles[i].update();
      }
    }

    // Display the Path array.
    Path.prototype.display = function() {

      // Loop through the array of particles backwards.
      for (var i = this.particles.length - 1; i >= 0; i--) {

        // Display each of these particles.
        this.particles[i].display(this.particles[i + 1]);

      }

    }

    // Particles along the path
    function Particle(position, hue) {

      // Set the position of Particles to the mouseposition by creating a vector.
      this.position = createVector(position.x, position.y);
    }

    // Constantly update Particle.
    Particle.prototype.update = function() {}

    // Draw particle and connect it with a line
    // Draw a line to another
    Particle.prototype.display = function(other) {
      stroke(255, 255);

      // If we need to draw a line
      if (other) {
        stroke(rc1, rc2, rc3);
        strokeWeight(thickness);
        line(this.position.x + random(minShake, maxShake), this.position.y + random(minShake, maxShake), other.position.x + random(minShake, maxShake), other.position.y + random(minShake, maxShake));
      }
      if (keyIsDown(LEFT_ARROW) && !camera.isPlaying()) {
        camera.play();
        save('myRemix.jpg');
        print(cropX);
        print(cropY)

      }

    }

I am currently using the Particles example by Dan Shiffman and I would like to change the Particle texture by keypress to a different PNG. As the PNG is loaded n the setup-phase I can't do this there. Is there a way to switch a texture which has already been loaded (maybe in some internal buffer)? Or should I change the code so that I load all images upfront and the try to adapt the Particle system?

Any help is greatly appreciated, maybe someone has already coded a similar thing?

Thanks, Robo

im using 1.5.1 processing.

Vertex shape goes (0,0) (1,0) (1,1) (0,1) but why? shouldnt it go vertex (0,0) (1,0) (0,1) (1,1) when creating a shape. this seems like the logical way ?

Translate: if i translate to (0,0,0) in a loop its always (0,0,0) but if i translate to (4,0,0) it pushes X so 4 8 12 16 etc can anyone explain why this is?

Pushmatrix and popmatrix if i use these functions in a loop it effects the object. i cant understand these functions, i know they have a stack. where is the stack ? how big is the stack ?

how does translate and push and pop work together? if i pushmatrix before translate it act differently. is pushmatrix just a buffer stack which is similar to a loop?

its driving me nuts trying to understand these function again.

int x = in.right.get(i)*30; vertex(207+x,227+x);

is there some way please?

Thanks everyone for your time and help. I'm adding my star object (based on the PShape tutorial by Daniel Shiffman).

`// A class to describe a Star shape

class Star { float rotationSpeed; PShape s; float x, y; float starBorder; color starFilling; float starStroke; float opacity;

Star() { rotationSpeed = 0; opacity = 50; x = width/2; y = height/2; starBorder = 0; starFilling = color(255); starStroke = 0;

}

void display() {

opacity = random(180,200);
    // First create the shape
s = createShape();
s.beginShape();
s.fill(starFilling,opacity);
s.stroke(starStroke);
s.strokeWeight(starBorder);
s.vertex(0, -50);
s.vertex(14, -20);
s.vertex(47, -15);
s.vertex(23, 7);
s.vertex(29, 40);
s.vertex(0, 25);
s.vertex(-29, 40);
s.vertex(-23, 7);
s.vertex(-47, -15);
s.vertex(-14, -20);
s.endShape(CLOSE);

// The shape is complete

// Locating and drawing the shape
pushMatrix();
translate(x, y);
scale(2);
rotate(radians(rotationSpeed));
rotationSpeed+= -0.1;
shape(s);
popMatrix();

}

void puntos() { rotationSpeed+=-15; /* HERE I want to increase suddenly the roation speed to +-15 and ease out. This void is also supposed to last a few seconds, once the rotation speed comes back to normal*/ opacity = 255;

}

}`

#version 410

uniform mat4 transform;

in vec4 vertex;
in vec2 texCoord;

out vec2 vertTexCoord;

void main() {

    vertTexCoord = vec2(texCoord.x, 1.0 - texCoord.y);
    gl_Position = transform * vertex;
}

// ----

#version 410


uniform sampler2D texture;

in vec2 vertTexCoord;

out vec4 fragColor;

void main() {
    fragColor = texture(texture, vertTexCoord);
}

import processing.opengl.*;
   Pyramid[] piramide;
   float[] n= new float [150];
   float[] m= new float [150];

void setup() {
  piramide = new Pyramid[150];
  size(900, 600, OPENGL);
for (int i=0; i<piramide.length;i++) {
  n[i]=random(width);
  m[i]=random(height);
    piramide[i] = new Pyramid(n[i], m[i], random(20), random(5,15),(random(5,30)*0.001));

}
}

void draw() {
  smooth();
  lights();
  background(30,25,30);
for (int i=0; i<piramide.length;i++) {
    Pyramid thisPyr = piramide[i];
    thisPyr.collision_det();
    thisPyr.rotacion();
  }
}


class Pyramid {
  float x, y, z, t, s;
  float theta=0.0;
  float alph;

  Pyramid(float tempX, float tempY, float tempZ, float tempT, float tempS) {
    x= tempX;
    y= tempY;
    z= tempZ;
    t= tempT;
    s= tempS;
  }

  void drawPiramide() {
    pushMatrix();

    translate(x, y);

    beginShape(TRIANGLES);
    noStroke();


   fill(220,220,220);
   vertex(0, t*2, 0); 
   vertex(0, 0, -t);
   vertex(-t, 0, 0);

   fill(250,250,250);
   vertex(0, t*2, 0);
   vertex(0, 0, -t);
   vertex(t, 0, 0);

   fill(220,220,220);
   vertex(0, t*2, 0);
   vertex(t, 0, 0);
   vertex(0, 0, t);

   fill(250,250,250);
   vertex(0, t*2, 0);
   vertex(0, 0, t);
   vertex(-t, 0, 0);

   fill(250,250,250);
   vertex(0, -t*2, 0);
   vertex(0, 0, -t);
   vertex(-t, 0, 0);

   fill(220,220,220);
   vertex(0, -t*2, 0);
   vertex(0, 0, -t);
   vertex(t, 0, 0);


   fill(250,250,250);
   vertex(0, -t*2, 0);
   vertex(t, 0, 0);
   vertex(0, 0, t);

   fill(220,220,220);
   vertex(0, -t*2, 0);
   vertex(0, 0, t);
   vertex(-t, 0, 0);

    rotateY(theta); 

    endShape();

    popMatrix();
  }

  void rotacion() { 
    theta+=0.002+s;
  }


  void collision_det() {
     boolean touching = false;


for (int i=0; i<piramide.length;i++) {
Pyramid thisPyr = piramide[i];
for (int k=1; k<piramide.length; k++)
{
Pyramid otherPyr = piramide[k];
float dis = dist(thisPyr.x, thisPyr.y, otherPyr.x, otherPyr.y);
if ((dis - 0.1) < t*4) {
touching = true;
break;
}

if (touching == false) {
piramide[i].drawPiramide();
 }
 }
  }
}

}

// Testing directional lighting

void settings() {
        size(600, 600, P3D);
    }

void setup() {
        frameRate(60);
        noStroke();
    }

void draw() {
        // For Processing v2.2.1, z = -1 is correct for directional light
        // For Processing v3, z = 1 is correct for directional light 
        directionalLight(255, 255, 255, 0, 0, 1);
        background(0);
        fill(color(160, 220, 50));
        translate((width / 2), (height / 2));
        float m = (frameCount * 0.01f);
        rotateY(m);
        
        beginShape(QUAD_STRIP);
        normal(-0.289784f, 0, 0.957092f);
        vertex(50, 20, 0);
        normal(-0.289784f, 0, 0.957092f);
        vertex(50, 75, 0);
        normal(0.289784f, 0, 0.957092f);
        vertex(80, 20, 0);
        normal(0.289784f, 0, 0.957092f);
        vertex(80, 75, 0);
        normal(1, 0, 0);
        vertex(110, 20, -45);
        normal(1, 0, 0);
        vertex(110, 75, -45);
        normal(0.289784f, 0, -0.957092f);
        vertex(80, 20, -90);
        normal(0.289784f, 0, -0.957092f);
        vertex(80, 75, -90);
        normal(-0.289784f, 0, -0.957092f);
        vertex(50, 20, -90);
        normal(-0.289784f, 0, -0.957092f);
        vertex(50, 75, -90);
        normal(-1, 0, 0);
        vertex(20, 20, -45);
        normal(-1, 0, 0);
        vertex(20, 75, -45);
        normal(-0.289784f, 0, 0.957092f);
        vertex(50, 20, 0);
        normal(-0.289784f, 0, 0.957092f);
        vertex(50, 75, 0);
        endShape();
    }

I tried with the map function, but I feel the same. */

float p=0; // angle 1 float d=180; // ange 2 float w=180; // angle 3 float topRadius=10; float bottomRadius=10; float tall=100; float sides=100; float cpx, cpy,angle = 0,angle1,angle2; int e; float rx = 0; float ry =0; int gridSize=40; float angulo=0; void setup() { size(1080, 660, P3D); } void draw() { background(0); fill(255, 255, 255);

lights(); translate(width / 2, height / 2,0);

fill(255,0,0); sphere(15);

 noStroke();

fill(255, 255, 255); translate(0, 0, 0); angle = radians(p) ; beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) { vertex(topRadiuscos(angle), 0, topRadiussin(angle)); vertex(bottomRadiuscos(angle), tall0.8,bottomRadiussin(angle)); angle += TWO_PI / sides; rotateX(angle); } endShape(); translate(0,tall0.8,0); fill(255,0,0); sphere(15); fill(255, 255, 255); angle1 = radians(d); beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) {
vertex(topRadiuscos(angle1), 0, topRadiussin(angle1)); vertex(bottomRadiuscos(angle1), tall0.6,bottomRadius*sin(angle1)); angle1 += TWO_PI / sides; rotateX(angle1); } endShape();

translate(0,tall0.6,0); fill(255,0,0); sphere(13); fill(255, 255, 255); angle2 = radians(w); beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) {
vertex(topRadiuscos(angle2), 0, topRadiussin(angle2)); vertex(bottomRadiuscos(angle2), tall0.5,bottomRadiussin(angle2)); angle2 += TWO_PI / sides; rotateX(angle2); } endShape(); translate(0,tall*0.5,0); fill(255,0,0); sphere(10); println(angle, angle1, angle2); }

void setup()
{
  size(400,400,P2D);
  stroke(0);
  line(width/2,0,width/2,height);
  line(0,height/2,width,height/2);

  noStroke();
  drawSquare(width/2,height/2,100,"wood1.jpg",1000);
}

void drawSquare(float centerX, 
                float centerY,  
                float squareSize, 
                String textureName, 
                float textureSize) {
  PImage img = loadImage(textureName);
  PShape s = createShape();
  s.beginShape();
  s.texture(img);

  s.vertex(centerX-squareSize/2, centerY-squareSize/2, 0, 0);
  s.vertex(centerX+squareSize/2, centerY-squareSize/2, textureSize, 0);
  s.vertex(centerX+squareSize/2, centerY+squareSize/2, textureSize, textureSize);
  s.vertex(centerX-squareSize/2, centerY+squareSize/2, 0, textureSize);
  s.endShape();
  s.translate(-centerX,-centerY);
  s.rotate(radians(45));
  s.translate(centerX,centerY);
  shape(s);
}

For random point cloud generated in realtime, what data structure in Processing is appropriate for its rendering? I tried with PShape, but only got 10~15 FPS for 20,000 points.

PShape boxCloud;

void setup() {
  size(400, 400, P3D);
  smooth();
}

void draw() {
  background(0);
  translate(width/2, height/2);
  gen();
  shape(boxCloud);
}

void gen()
{
  boxCloud = createShape();
  boxCloud.beginShape(POINTS);
  boxCloud.stroke(255);
  for (int i = 0; i < 20000; i++) {
    boxCloud.vertex(random(-50, 50), random(-50, 50), random(-50, 50));
  }
  boxCloud.endShape();
}

I've test ofMesh in openFrameworks, it can run at almost 60 FPS rendering 200,000 points. Is it possible to do that in Processing?

"shape(s, 25, 25);(startpoint)"

PShape s;  // The PShape object

void setup() {
  size(100, 100, P2D);
  // Creating a custom PShape as a square, by
  // specifying a series of vertices.
  s = createShape();
  s.beginShape();
  s.fill(0, 0, 255);
  s.noStroke();
  s.vertex(0, 0);
  s.vertex(0, 50);
  s.vertex(50, 50);
  s.vertex(50, 0);
  s.endShape(CLOSE);
}

void draw() {
  shape(s, 25, 25);
}

The example below has a few test sliders to manipulate common values, however I'd like to able to use text-based mathematical inputs. I can't see how toggles and sliders can replace mathematical combinations of sin, cos, phi, theta, exponents and their relationships.

The beauty of the web based tool is that bad math will only result in no-sketch. I'm not sure how to even do this in processing's java mode. Can anyone help with this? Thanks.

(as a side note, the UV sphere my code generates has problems with the QUAD_STRIP. try dragging down the transparency to zero and you'll see the weirdness.)

import controlP5.*;
import peasy.test.*;
import peasy.org.apache.commons.math.*;
import peasy.*;
import peasy.org.apache.commons.math.geometry.*;
PeasyCam camera;
ControlP5 cp5;
Slider uMinSlider;
Slider uMaxSlider;
Slider vMinSlider;
Slider vMaxSlider;

/* 
 phi = u
 theta = v
 */

float stepLat, stepLon, radius, phi, theta, u, v;
float uMin, uMax, vMin, vMax, u2Mult, v2Mult, transparency;
float xVMult, yVMult, zVMult, xUMult, yUMult, zUMult; 
int myColor = color(255, 0, 0);

void setup() {
  size(1000, 1000, OPENGL);
  smooth(8);
  strokeWeight(1);
  //noFill();  
  radius = width/20;

  camera = new PeasyCam(this, 0, 0, 0, width * 0.2);
  cp5 = new ControlP5(this);
  uMinSlider = cp5.addSlider("uMin");
  uMinSlider.setPosition(40, 40).setSize(200, 20).setRange(0.0, 2.0).setValue(0.0);
  uMaxSlider = cp5.addSlider("uMax");
  uMaxSlider.setPosition(40, 60).setSize(200, 20).setRange(0.0, 2.0).setValue(2.0);
  vMinSlider = cp5.addSlider("vMin");
  vMinSlider.setPosition(40, 80).setSize(200, 20).setRange(0.0, 2.0).setValue(0.0);
  vMaxSlider = cp5.addSlider("vMax");
  vMaxSlider.setPosition(40, 100).setSize(200, 20).setRange(0.0, 2.0).setValue(2.0);
  vMaxSlider = cp5.addSlider("stepLat");
  vMaxSlider.setPosition(40, 120).setSize(200, 20).setRange(1, 25).setValue(5);
  vMaxSlider = cp5.addSlider("stepLon");
  vMaxSlider.setPosition(40, 140).setSize(200, 20).setRange(1, 25).setValue(5);
  vMaxSlider = cp5.addSlider("v2Mult");
  vMaxSlider.setPosition(40, 160).setSize(200, 20).setRange(0, 50).setValue(1);
  vMaxSlider = cp5.addSlider("u2Mult");
  vMaxSlider.setPosition(40, 180).setSize(200, 20).setRange(0, 50).setValue(0);  
  vMaxSlider = cp5.addSlider("transparency");
  vMaxSlider.setPosition(40, 200).setSize(200, 20).setRange(0, 255).setValue(255);

  vMaxSlider = cp5.addSlider("xVMult");
  vMaxSlider.setPosition(width - 400, 40).setSize(100, 20).setRange(-5, 5).setValue(1);
  vMaxSlider = cp5.addSlider("xUMult");
  vMaxSlider.setPosition(width - 200, 40).setSize(100, 20).setRange(-5, 5).setValue(1);

  vMaxSlider = cp5.addSlider("yVMult");
  vMaxSlider.setPosition(width - 400, 60).setSize(100, 20).setRange(-5, 5).setValue(1);
  vMaxSlider = cp5.addSlider("yUMult");
  vMaxSlider.setPosition(width - 200, 60).setSize(100, 20).setRange(-5, 5).setValue(1);

  vMaxSlider = cp5.addSlider("zVMult");
  vMaxSlider.setPosition(width - 200, 80).setSize(100, 20).setRange(-5, 5).setValue(1);
  //vMaxSlider = cp5.addSlider("zUMult");
  //vMaxSlider.setPosition(width - 200, 140).setSize(100, 20).setRange(-5, 5).setValue(1);

  cp5.addTextfield("xValue").setPosition(width - 400, 120).setSize(300, 20).setAutoClear(false);
  cp5.addBang("Submit").setPosition(width - 400, 160).setSize(40, 20);  

  cp5.setAutoDraw(false);
}

void draw() {
  background(155);
  gui();
  stroke(255, 200, 200);
  fill(255, 155, 155, transparency);
  lights();
  //camcam.draw();

  for (float i = (degrees (vMin * PI)); i <= (degrees(vMax * PI)); i += stepLon) {
    beginShape(QUAD_STRIP);
    for (float j = (degrees (uMin * PI)); j <= (degrees(uMax * PI)); j += stepLat) {
      float v = i * ((2 * PI) / (degrees(2.0 * PI)));
      float u = j * ((2 * PI) / (degrees(2.0 * PI)));
      float v2 = (i + (stepLon * v2Mult)) * ((2 * PI)  / (degrees(2.0 * PI)));
      //u2Mult = 0 for a UVSPHERE
      float u2 = (j + (stepLat * u2Mult)) * ((2 * PI) / (degrees(2.0 * PI)));
      //THESE DO OTHER COOL THINGS!
      //float v2 = (i += stepLon) * ((2 * PI)  / (degrees(2.0 * PI)));
      //float u2 = (j += stepLat) * ((2 * PI) / (degrees(2.0 * PI)));
      float x2 = radius * (sin(v * xVMult) * cos(u * xUMult));
      float y2 = radius * (sin(v * yVMult) * sin(u * yUMult));
      float z2 = radius * (cos(v * zVMult));  
      float x3 = radius * (sin(v2 * xVMult) * cos(u2 * xUMult));
      float y3 = radius * (sin(v2 * yVMult) * sin(u2 * yUMult));
      float z3 = radius * (cos(v2 * zVMult));  
      vertex(x2, y2, z2);
      vertex(x3, y3, z3);
    }
    endShape();
  }
}

void gui() {
  camera.beginHUD();
  hint(ENABLE_DEPTH_TEST);
  cp5.draw();
  hint(DISABLE_DEPTH_TEST);
  camera.endHUD();
}