From 2fb7155d95418fa136889537d6b54377bb573a32 Mon Sep 17 00:00:00 2001 From: shiffman Date: Tue, 22 May 2012 02:05:57 +0000 Subject: [PATCH] new PShape examples --- .../BeginEndContour/BeginEndContour.pde | 32 ++++++++ .../Create Shapes/GroupPShape/GroupPShape.pde | 69 ++++++++++++++++ .../ParticleSystemPShape/Particle.pde | 73 +++++++++++++++++ .../ParticleSystemPShape/ParticleSystem.pde | 43 ++++++++++ .../ParticleSystemPShape.pde | 42 ++++++++++ .../Create Shapes/PathPShape/PathPShape.pde | 37 +++++++++ .../PolygonPShape/PolygonPShape.pde | 40 ++++++++++ .../PolygonPShapeOOP/PolygonPShapeOOP.pde | 26 +++++++ .../Create Shapes/PolygonPShapeOOP/Star.pde | 49 ++++++++++++ .../PolygonPShapeOOP2/Polygon.pde | 34 ++++++++ .../PolygonPShapeOOP2/PolygonPShapeOOP2.pde | 52 +++++++++++++ .../PrimitivePShape/PrimitivePShape.pde | 29 +++++++ .../Create Shapes/SVGPShape/SVGPShape.pde | 26 +++++++ .../Create Shapes/SVGPShape/data/star.svg | 78 +++++++++++++++++++ .../WigglePShape/WigglePShape.pde | 23 ++++++ .../Create Shapes/WigglePShape/Wiggler.pde | 65 ++++++++++++++++ 16 files changed, 718 insertions(+) create mode 100644 java/examples/Topics/Create Shapes/BeginEndContour/BeginEndContour.pde create mode 100644 java/examples/Topics/Create Shapes/GroupPShape/GroupPShape.pde create mode 100644 java/examples/Topics/Create Shapes/ParticleSystemPShape/Particle.pde create mode 100644 java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystem.pde create mode 100644 java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystemPShape.pde create mode 100644 java/examples/Topics/Create Shapes/PathPShape/PathPShape.pde create mode 100644 java/examples/Topics/Create Shapes/PolygonPShape/PolygonPShape.pde create mode 100644 java/examples/Topics/Create Shapes/PolygonPShapeOOP/PolygonPShapeOOP.pde create mode 100644 java/examples/Topics/Create Shapes/PolygonPShapeOOP/Star.pde create mode 100644 java/examples/Topics/Create Shapes/PolygonPShapeOOP2/Polygon.pde create mode 100644 java/examples/Topics/Create Shapes/PolygonPShapeOOP2/PolygonPShapeOOP2.pde create mode 100644 java/examples/Topics/Create Shapes/PrimitivePShape/PrimitivePShape.pde create mode 100644 java/examples/Topics/Create Shapes/SVGPShape/SVGPShape.pde create mode 100644 java/examples/Topics/Create Shapes/SVGPShape/data/star.svg create mode 100644 java/examples/Topics/Create Shapes/WigglePShape/WigglePShape.pde create mode 100644 java/examples/Topics/Create Shapes/WigglePShape/Wiggler.pde diff --git a/java/examples/Topics/Create Shapes/BeginEndContour/BeginEndContour.pde b/java/examples/Topics/Create Shapes/BeginEndContour/BeginEndContour.pde new file mode 100644 index 000000000..b6b4b3280 --- /dev/null +++ b/java/examples/Topics/Create Shapes/BeginEndContour/BeginEndContour.pde @@ -0,0 +1,32 @@ + +PShape s; + +void setup() { + size(640, 360, P2D); + smooth(); + s = createShape(); + s.noFill(); + s.stroke(0); + s.beginContour(); + for (float a = -PI; a < 0; a += 0.1) { + float r = random(45, 55); + s.vertex(-60+r*cos(a), r*sin(a)); + } + s.endContour(); + + s.beginContour(); + for (float a = 0; a < PI; a += 0.1) { + float r = random(45, 55); + s.vertex(60+r*cos(a), r*sin(a)); + } + s.endContour(); + s.end(); +} + +void draw() { + background(255); + translate(width/2, height/2); + s.rotate(0.01); + shape(s); +} + diff --git a/java/examples/Topics/Create Shapes/GroupPShape/GroupPShape.pde b/java/examples/Topics/Create Shapes/GroupPShape/GroupPShape.pde new file mode 100644 index 000000000..d794b1eac --- /dev/null +++ b/java/examples/Topics/Create Shapes/GroupPShape/GroupPShape.pde @@ -0,0 +1,69 @@ +/** + * GroupPShape + * + * How to group multiple PShapes into one PShape + */ + + +// A PShape that will group PShapes +PShape group; + +void setup() { + size(640, 360, P2D); + smooth(); + // Create the shape as a group + group = createShape(GROUP); + + // Make a polygon PShape + PShape star = createShape(); + star.fill(102); + star.stroke(255); + star.vertex(0, -50); + star.vertex(14, -20); + star.vertex(47, -15); + star.vertex(23, 7); + star.vertex(29, 40); + star.vertex(0, 25); + star.vertex(-29, 40); + star.vertex(-23, 7); + star.vertex(-47, -15); + star.vertex(-14, -20); + star.end(CLOSE); + + // Make a path PShape + PShape path = createShape(); + path = createShape(); + path.noFill(); + path.stroke(255); + for (float a = -PI; a < 0; a += 0.1) { + float r = random(60, 70); + path.vertex(r*cos(a), r*sin(a)); + } + path.end(); + + // Make a primitive (Rectangle) PShape + PShape rectangle = createShape(RECT,-10,-10,20,20); + rectangle.noFill(); + rectangle.stroke(255); + + // Add them all to the group + group.addChild(star); + group.addChild(path); + group.addChild(rectangle); + +} + +void draw() { + + // We can access them individually via the group PShape + PShape rectangle = group.getChild(2); + // Shapes can be rotated + rectangle.rotate(0.1); + + background(52); + // Display the group PShape + translate(mouseX, mouseY); + shape(group); + +} + diff --git a/java/examples/Topics/Create Shapes/ParticleSystemPShape/Particle.pde b/java/examples/Topics/Create Shapes/ParticleSystemPShape/Particle.pde new file mode 100644 index 000000000..3a80308f9 --- /dev/null +++ b/java/examples/Topics/Create Shapes/ParticleSystemPShape/Particle.pde @@ -0,0 +1,73 @@ +// An individual Particle + +class Particle { + + // Velocity + PVector velocity; + // Lifespane is tied to alpha + float lifespan; + + // The particle PShape + PShape part; + // The particle size + float partSize; + + // A single force + PVector gravity = new PVector(0, 0.1); + + Particle() { + partSize = random(10, 60); + // The particle is a textured quad + part = createShape(QUAD); + part.noStroke(); + part.texture(sprite); + part.normal(0, 0, 1); + part.vertex(-partSize/2, -partSize/2, 0, 0); + part.vertex(+partSize/2, -partSize/2, sprite.width, 0); + part.vertex(+partSize/2, +partSize/2, sprite.width, sprite.height); + part.vertex(-partSize/2, +partSize/2, 0, sprite.height); + part.end(); + + // Set the particle starting location + rebirth(width/2, height/2); + } + + PShape getShape() { + return part; + } + + void rebirth(float x, float y) { + float a = random(TWO_PI); + float speed = random(0.5, 4); + // A velocity with random angle and magnitude + velocity = PVector.fromAngle(a); + velocity.mult(speed); + // Set lifespan + lifespan = 255; + // Set location using translate + PVector center = part.getCenter(); + part.translate(x - center.x, y - center.y); + } + + // Is it off the screen? + boolean isDead() { + PVector center = part.getCenter(); + if (center.y > height+50) { + return true; + } + else { + return false; + } + } + + void update() { + // Decrease life + lifespan = lifespan - 4; + // Apply gravity + velocity.add(gravity); + part.tint(255, lifespan); + // Move the particle according to its velocity + part.translate(velocity.x, velocity.y); + } +} + diff --git a/java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystem.pde b/java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystem.pde new file mode 100644 index 000000000..e2215046e --- /dev/null +++ b/java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystem.pde @@ -0,0 +1,43 @@ +// The Particle System + +class ParticleSystem { + // It's just an ArrayList of particle objects + ArrayList particles; + + // The PShape to group all the particle PShapes + PShape particleShape; + + ParticleSystem(int n) { + particles = new ArrayList(); + // The PShape is a group + particleShape = createShape(GROUP); + + // Make all the Particles + for (int i = 0; i < n; i++) { + Particle p = new Particle(); + particles.add(p); + // Each particle's PShape gets added to the System PShape + particleShape.addChild(p.getShape()); + } + } + + void update() { + for (Particle p : particles) { + p.update(); + } + } + + void setEmitter(float x, float y) { + for (Particle p : particles) { + // Each particle gets reborn at the emitter location + if (p.isDead()) { + p.rebirth(x, y); + } + } + } + + void display() { + shape(particleShape); + } +} + diff --git a/java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystemPShape.pde b/java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystemPShape.pde new file mode 100644 index 000000000..c9cc73f99 --- /dev/null +++ b/java/examples/Topics/Create Shapes/ParticleSystemPShape/ParticleSystemPShape.pde @@ -0,0 +1,42 @@ +/** + * ParticleSystemPShape + * + * A particle system optimized for drawing using PShape + */ + +// Particle System object +ParticleSystem ps; +// A PImage for particle's texture +PImage sprite; + +void setup() { + size(640, 360, P3D); + // Load the image + sprite = loadImage("sprite.png"); + // A new particle system with 10,000 particles + ps = new ParticleSystem(10000); + + // Writing to the depth buffer is disabled to avoid rendering + // artifacts due to the fact that the particles are semi-transparent + // but not z-sorted. + hint(DISABLE_DEPTH_MASK); + +} + +void draw () { + background(0); + // Update an dipsplay system + ps.update(); + ps.display(); + + // Set the particle system's emitter location to the mouse + ps.setEmitter(mouseX,mouseY); + + // Display frame rate + fill(255); + textSize(16); + text("Frame rate: " + int(frameRate),10,20); + +} + + diff --git a/java/examples/Topics/Create Shapes/PathPShape/PathPShape.pde b/java/examples/Topics/Create Shapes/PathPShape/PathPShape.pde new file mode 100644 index 000000000..ab3d81f03 --- /dev/null +++ b/java/examples/Topics/Create Shapes/PathPShape/PathPShape.pde @@ -0,0 +1,37 @@ +/** + * PathPShape + * + * A simple path using PShape + */ + +// A PShape object +PShape path; + +void setup() { + size(640, 360, P3D); + smooth(); + // Create the shape + path = createShape(); + // Set fill and stroke + path.noFill(); + path.stroke(0); + path.strokeWeight(2); + + float x = 0; + // Calculate the path as a sine wave + for (float a = 0; a < TWO_PI; a+=0.1) { + path.vertex(x,sin(a)*100); + x+= 5; + } + // The path is complete + path.end(); + +} + +void draw() { + background(255); + // Draw the path at the mouse location + translate(mouseX, mouseY); + shape(path); +} + diff --git a/java/examples/Topics/Create Shapes/PolygonPShape/PolygonPShape.pde b/java/examples/Topics/Create Shapes/PolygonPShape/PolygonPShape.pde new file mode 100644 index 000000000..3f3e39a3e --- /dev/null +++ b/java/examples/Topics/Create Shapes/PolygonPShape/PolygonPShape.pde @@ -0,0 +1,40 @@ + +/** + * PrimitivePShape. + * + * Using a PShape to display a custom polygon. + */ + +// The PShape object +PShape star; + +void setup() { + size(640, 360,P3D); + smooth(); + // First create the shape + star = createShape(); + // You can set fill and stroke + star.fill(102); + star.stroke(255); + // Here, we are hardcoding a series of vertices + star.vertex(0, -50); + star.vertex(14, -20); + star.vertex(47, -15); + star.vertex(23, 7); + star.vertex(29, 40); + star.vertex(0, 25); + star.vertex(-29, 40); + star.vertex(-23, 7); + star.vertex(-47, -15); + star.vertex(-14, -20); + star.end(CLOSE); +} + +void draw() { + background(51); + // We can use translate to move the PShape + translate(mouseX, mouseY); + // Display the shape + shape(star); +} + diff --git a/java/examples/Topics/Create Shapes/PolygonPShapeOOP/PolygonPShapeOOP.pde b/java/examples/Topics/Create Shapes/PolygonPShapeOOP/PolygonPShapeOOP.pde new file mode 100644 index 000000000..4e0a228fd --- /dev/null +++ b/java/examples/Topics/Create Shapes/PolygonPShapeOOP/PolygonPShapeOOP.pde @@ -0,0 +1,26 @@ +/** + * PolygonPShapeOOP. + * + * Wrapping a PShape inside a custom class + */ + + +// A Star object +Star s; + +void setup() { + size(640, 360, P2D); + smooth(); + // Make a new Star + s = new Star(); + +} + +void draw() { + background(51); + // Display the star + s.display(); + // Move the star + s.move(); +} + diff --git a/java/examples/Topics/Create Shapes/PolygonPShapeOOP/Star.pde b/java/examples/Topics/Create Shapes/PolygonPShapeOOP/Star.pde new file mode 100644 index 000000000..7e829fc80 --- /dev/null +++ b/java/examples/Topics/Create Shapes/PolygonPShapeOOP/Star.pde @@ -0,0 +1,49 @@ +// A class to describe a Star shape + +class Star { + + // The PShape object + PShape s; + // The location where we will draw the shape + float x, y; + + Star() { + x = 0; + y = height/2; + // First create the shape + s = createShape(); + // You can set fill and stroke + s.fill(102); + s.stroke(255); + // Here, we are hardcoding a series of vertices + 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); + // The shape is complete + s.end(CLOSE); + } + + void move() { + // Demonstrating some simple motion + x++; + if (x > width) { + x = 0; + } + } + + void display() { + // Locating and drawing the shape + pushMatrix(); + translate(x, y); + shape(s); + popMatrix(); + } +} + diff --git a/java/examples/Topics/Create Shapes/PolygonPShapeOOP2/Polygon.pde b/java/examples/Topics/Create Shapes/PolygonPShapeOOP2/Polygon.pde new file mode 100644 index 000000000..e775fb436 --- /dev/null +++ b/java/examples/Topics/Create Shapes/PolygonPShapeOOP2/Polygon.pde @@ -0,0 +1,34 @@ +// A class to describe a Polygon (with a PShape) + +class Polygon { + // The PShape object + PShape s; + // The location where we will draw the shape + float x, y; + // Variable for simple motion + float speed; + + Polygon(PShape s_) { + x = random(width); + y = random(-500, -100); + s = s_; + speed = random(2, 6); + } + + // Simple motion + void move() { + y+=speed; + if (y > height+100) { + y = -100; + } + } + + // Draw the object + void display() { + pushMatrix(); + translate(x, y); + shape(s); + popMatrix(); + } +} + diff --git a/java/examples/Topics/Create Shapes/PolygonPShapeOOP2/PolygonPShapeOOP2.pde b/java/examples/Topics/Create Shapes/PolygonPShapeOOP2/PolygonPShapeOOP2.pde new file mode 100644 index 000000000..e066ee49d --- /dev/null +++ b/java/examples/Topics/Create Shapes/PolygonPShapeOOP2/PolygonPShapeOOP2.pde @@ -0,0 +1,52 @@ +/** + * PolygonPShapeOOP. + * + * Wrapping a PShape inside a custom class + * and demonstrating how we can have a multiple objects each + * using the same PShape. + */ + + +// A list of objects +ArrayList polygons; + +void setup() { + size(640, 360, P3D); + smooth(); + // Make a PShape + PShape star = createShape(POLYGON); + star.fill(0,127); + star.stroke(0); + star.vertex(0, -50); + star.vertex(14, -20); + star.vertex(47, -15); + star.vertex(23, 7); + star.vertex(29, 40); + star.vertex(0, 25); + star.vertex(-29, 40); + star.vertex(-23, 7); + star.vertex(-47, -15); + star.vertex(-14, -20); + star.end(CLOSE); + + // Make an ArrayList + polygons = new ArrayList(); + + // Add a bunch of objects to the ArrayList + // Pass in reference to the PShape + // We coud make polygons with different PShapes + for (int i = 0; i < 25; i++) { + polygons.add(new Polygon(star)); + } +} + +void draw() { + background(255); + + // Display and move them all + for (Polygon poly : polygons) { + poly.display(); + poly.move(); + } +} + diff --git a/java/examples/Topics/Create Shapes/PrimitivePShape/PrimitivePShape.pde b/java/examples/Topics/Create Shapes/PrimitivePShape/PrimitivePShape.pde new file mode 100644 index 000000000..f51e53a75 --- /dev/null +++ b/java/examples/Topics/Create Shapes/PrimitivePShape/PrimitivePShape.pde @@ -0,0 +1,29 @@ +/** + * PrimitivePShape. + * + * Using a PShape to display a primitive shape (in this case, ellipse). + */ + + +// The PShape object +PShape circle; + +void setup() { + size(640, 360, P3D); + smooth(); + // Creating the PShape as an ellipse + // The corner is -50,-50 so that the center is at 0,0 + circle = createShape(ELLIPSE,-50,-50,100,100); +} + +void draw() { + background(51); + // We can dynamically set the stroke and fill of the shape + circle.stroke(255); + circle.fill(map(mouseX,0,width,0,255)); + // We can use translate to move the PShape + translate(mouseX, mouseY); + // Drawing the PShape + shape(circle); +} + diff --git a/java/examples/Topics/Create Shapes/SVGPShape/SVGPShape.pde b/java/examples/Topics/Create Shapes/SVGPShape/SVGPShape.pde new file mode 100644 index 000000000..15ab1432b --- /dev/null +++ b/java/examples/Topics/Create Shapes/SVGPShape/SVGPShape.pde @@ -0,0 +1,26 @@ +/** + * SVGPShape + * + * How to load an SVG into a PShape + */ + +// PShapoe object +PShape svg; + +void setup() { + size(640, 360); + // Looks weird with P3D renderer? + // size(640, 360,P3D); + smooth(); + // Load the SVG + svg = loadShape("star.svg"); +} + +void draw() { + background(255); + // Draw PShape at mouse location + translate(mouseX, mouseY); + shapeMode(CENTER); + shape(svg); +} + diff --git a/java/examples/Topics/Create Shapes/SVGPShape/data/star.svg b/java/examples/Topics/Create Shapes/SVGPShape/data/star.svg new file mode 100644 index 000000000..697b2f92d --- /dev/null +++ b/java/examples/Topics/Create Shapes/SVGPShape/data/star.svg @@ -0,0 +1,78 @@ + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/java/examples/Topics/Create Shapes/WigglePShape/WigglePShape.pde b/java/examples/Topics/Create Shapes/WigglePShape/WigglePShape.pde new file mode 100644 index 000000000..800d86b48 --- /dev/null +++ b/java/examples/Topics/Create Shapes/WigglePShape/WigglePShape.pde @@ -0,0 +1,23 @@ +/** + * WigglePShape. + * + * How to move the individual vertices of a PShape + */ + + +// A "Wiggler" object +Wiggler w; + +void setup() { + size(640, 360, P3D); + smooth(); + w = new Wiggler(); +} + +void draw() { + background(255); + w.display(); + w.wiggle(); +} + + diff --git a/java/examples/Topics/Create Shapes/WigglePShape/Wiggler.pde b/java/examples/Topics/Create Shapes/WigglePShape/Wiggler.pde new file mode 100644 index 000000000..f1dc7725c --- /dev/null +++ b/java/examples/Topics/Create Shapes/WigglePShape/Wiggler.pde @@ -0,0 +1,65 @@ +// An object that wraps the PShape + +class Wiggler { + + // The PShape to be "wiggled" + PShape s; + // Its location + float x, y; + + // For 2D Perlin noise + float yoff = 0; + + // We are using an ArrayList to keep a duplicate copy + // of vertices original locations. + ArrayList original; + + Wiggler() { + x = width/2; + y = height/2; + + // The "original" locations of the vertices make up a circle + original = new ArrayList(); + for (float a = 0; a < TWO_PI; a+=0.2) { + PVector v = PVector.fromAngle(a); + v.mult(100); + original.add(v); + } + + // Now make the PShape with those vertices + s = createShape(); + s.fill(127); + s.stroke(0); + for (PVector v : original) { + s.vertex(v.x, v.y); + } + s.end(CLOSE); + } + + void wiggle() { + float xoff = 0; + // Apply an offset to each vertex + for (int i = 0; i < s.getVertexCount(); i++) { + // Calculate a new vertex location based on noise around "original" location + PVector pos = original.get(i); + float a = TWO_PI*noise(xoff,yoff); + PVector r = PVector.fromAngle(a); + r.mult(4); + r.add(pos); + // Set the location of each vertex to the new one + s.setVertex(i, r.x, r.y, r.z); + // increment perlin noise x value + xoff+= 0.5; + } + // Increment perlin noise y value + yoff += 0.02; + } + + void display() { + pushMatrix(); + translate(x, y); + shape(s); + popMatrix(); + } +} +