#javascript-processing-example-basic-objects-compositeobjects.htm / htm
<!DOCTYPE html> <html><head> <script src="javascript-processing-example-processing.js"></script> <script src="javascript-processing-example-init.js"></script> <link rel="stylesheet" href="javascript-processing-example-style.css"> </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1> <h2>CompositeObjects</h2> <p>An object can include several other objects. Creating such composite objects is a good way to use the principles of modularity and build higher levels of abstraction within a program.</p> <p><a href="http://processing.org/learning/basics/compositeobjects.html"><b>Original Processing.org Example:</b> CompositeObjects</a><br> <script type="application/processing"> EggRing er1, er2; void setup() { size(200, 200); smooth(); er1 = new EggRing(66, 132, 0.1, 66); er2 = new EggRing(132, 180, 0.05, 132); } void draw() { background(0); er1.transmit(); er2.transmit(); } class EggRing { Egg ovoid; Ring circle = new Ring(); EggRing(int x, int y, float t, float sp) { ovoid = new Egg(x, y, t, sp); circle.start(x, y - sp/2); } void transmit() { ovoid.wobble(); ovoid.display(); circle.grow(); circle.display(); if (circle.on == false) { circle.on = true; } } } class Egg { float x, y; // X-coordinate, y-coordinate float tilt; // Left and right angle offset float angle; // Used to define the tilt float scalar; // Height of the egg // Constructor Egg(int xpos, int ypos, float t, float s) { x = xpos; y = ypos; tilt = t; scalar = s / 100.0; } void wobble() { tilt = cos(angle) / 8; angle += 0.1; } void display() { noStroke(); fill(255); pushMatrix(); translate(x, y); rotate(tilt); scale(scalar); beginShape(); vertex(0, -100); bezierVertex(25, -100, 40, -65, 40, -40); bezierVertex(40, -15, 25, 0, 0, 0); bezierVertex(-25, 0, -40, -15, -40, -40); bezierVertex(-40, -65, -25, -100, 0, -100); endShape(); popMatrix(); } } class Ring { float x, y; // X-coordinate, y-coordinate float diameter; // Diameter of the ring boolean on = false; // Turns the display on and off void start(float xpos, float ypos) { x = xpos; y = ypos; on = true; diameter = 1; } void grow() { if (on == true) { diameter += 0.5; if (diameter > width*2) { diameter = 0.0; } } } void display() { if (on == true) { noFill(); strokeWeight(4); stroke(155, 153); ellipse(x, y, diameter, diameter); } } } </script><canvas width="200" height="200"></canvas></p> <div style="overflow: hidden; height: 0px; width: 0px;"></div> <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a> // unless otherwise stated.</b> EggRing er1, er2; void setup() { size(200, 200); smooth(); er1 = new EggRing(66, 132, 0.1, 66); er2 = new EggRing(132, 180, 0.05, 132); } void draw() { background(0); er1.transmit(); er2.transmit(); } class EggRing { Egg ovoid; Ring circle = new Ring(); EggRing(int x, int y, float t, float sp) { ovoid = new Egg(x, y, t, sp); circle.start(x, y - sp/2); } void transmit() { ovoid.wobble(); ovoid.display(); circle.grow(); circle.display(); if (circle.on == false) { circle.on = true; } } } class Egg { float x, y; // X-coordinate, y-coordinate float tilt; // Left and right angle offset float angle; // Used to define the tilt float scalar; // Height of the egg // Constructor Egg(int xpos, int ypos, float t, float s) { x = xpos; y = ypos; tilt = t; scalar = s / 100.0; } void wobble() { tilt = cos(angle) / 8; angle += 0.1; } void display() { noStroke(); fill(255); pushMatrix(); translate(x, y); rotate(tilt); scale(scalar); beginShape(); vertex(0, -100); bezierVertex(25, -100, 40, -65, 40, -40); bezierVertex(40, -15, 25, 0, 0, 0); bezierVertex(-25, 0, -40, -15, -40, -40); bezierVertex(-40, -65, -25, -100, 0, -100); endShape(); popMatrix(); } } class Ring { float x, y; // X-coordinate, y-coordinate float diameter; // Diameter of the ring boolean on = false; // Turns the display on and off void start(float xpos, float ypos) { x = xpos; y = ypos; on = true; diameter = 1; } void grow() { if (on == true) { diameter += 0.5; if (diameter > width*2) { diameter = 0.0; } } } void display() { if (on == true) { noFill(); strokeWeight(4); stroke(155, 153); ellipse(x, y, diameter, diameter); } } }</pre> </body></html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.