Difference between revisions of "Animation"
(42 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | |||
<shell> | <shell> | ||
import java.awt.image.BufferedImage; | import java.awt.image.BufferedImage; | ||
import java.awt.*; | import java.awt.*; | ||
− | import java.io. | + | import java.io.FileOutputStream; |
import javax.imageio.ImageIO; | import javax.imageio.ImageIO; | ||
− | public class | + | import net.jmge.gif.Gif89Encoder; |
+ | |||
+ | public class Anim{ | ||
QcQ | QcQ | ||
public static void main(String argv []){ | public static void main(String argv []){ | ||
− | for (int i=0;i< | + | try { |
− | + | Gif89Encoder genc = new Gif89Encoder(); | |
− | + | for (int i=0;i<20;i++){ | |
− | + | BufferedImage image = new BufferedImage(QwidthQ,QheightQ, BufferedImage.TYPE_INT_ARGB); | |
− | + | Graphics2D g = image.createGraphics(); | |
− | + | drawFrame(g,i); | |
− | + | genc.addFrame(image); | |
− | + | g.dispose(); | |
− | + | } | |
− | + | genc.setUniformDelay(10); | |
− | + | genc.setLoopCount(0); | |
+ | FileOutputStream out = new FileOutputStream("anim.gif"); | ||
+ | genc.encode(out); | ||
+ | }catch(Exception e){ | ||
+ | System.err.println(e); | ||
} | } | ||
} | } | ||
Line 25: | Line 32: | ||
</shell> | </shell> | ||
==Moving block== | ==Moving block== | ||
− | <question imgOut=' | + | <question copyFile="classes.jar" imgOut='anim.gif' |
+ | width='150' height='100' className="Anim" | ||
+ | classpath="classes.jar"> | ||
+ | You can click on "Show" to see the full program. | ||
+ | |||
+ | The method drawFrame is called 20 times; frame is a different value each time, the graphics object is new each time. | ||
+ | Draws a yellow rectangle at coordinates (50,8*frame-20) which is (50,-20), (50,-12), (50,-2), (50,6) ... (50,172) | ||
+ | So the yellow box appears at the top of the image and moves down a little with each frame. | ||
<prog> | <prog> | ||
− | static void drawFrame( | + | static void drawFrame(Graphics2D g, int frame){ |
− | g.setColor(Color. | + | g.setColor(Color.green); |
− | g.fillRect( | + | g.fillRect(0,0,150,100); |
+ | g.setColor(Color.yellow); | ||
+ | g.fillRect(50,8*frame-20,50,20); | ||
} | } | ||
+ | |||
+ | |||
</prog> | </prog> | ||
</question> | </question> | ||
+ | |||
+ | ==Shooting Star== | ||
+ | <question copyFile="classes.jar" imgOut='anim.gif' | ||
+ | width='150' height='100' className="Anim" | ||
+ | classpath="classes.jar"> | ||
+ | In this example both the x and the y coordinates change at each frame and so the star moves diagonally. | ||
+ | <prog> | ||
+ | static void drawFrame(Graphics2D g, int frame){ | ||
+ | int r = 20; | ||
+ | Polygon star = new Polygon( | ||
+ | new int[]{0,22,95,36,59,0,-59,-36,-95,-22}, | ||
+ | new int[]{-100,-31,-31,12,81,38,81,12,-31,-31},10); | ||
+ | g.setColor(Color.red); | ||
+ | g.fillRect(0,0,300,200); | ||
+ | g.setColor(Color.yellow); | ||
+ | g.translate(10*frame,10*frame); | ||
+ | g.scale(r/100.0,r/100.0); | ||
+ | g.fillPolygon(star); | ||
+ | g.scale(100.0/r,100.0/r); | ||
+ | g.translate(-frame*10,-frame*10); | ||
+ | } | ||
+ | |||
+ | </prog> | ||
+ | </question> | ||
+ | |||
+ | ==Rotating Star== | ||
+ | <question copyFile="classes.jar" imgOut='anim.gif' | ||
+ | width='150' height='100' className="Anim" | ||
+ | classpath="classes.jar"> | ||
+ | |||
+ | <prog> | ||
+ | static void drawFrame(Graphics2D g, int frame){ | ||
+ | int r = 20; | ||
+ | Polygon star = new Polygon( | ||
+ | new int[]{0,22,95,36,59,0,-59,-36,-95,-22}, | ||
+ | new int[]{-100,-31,-31,12,81,38,81,12,-31,-31},10); | ||
+ | g.setColor(Color.red); | ||
+ | g.fillRect(0,0,300,200); | ||
+ | g.setColor(Color.yellow); | ||
+ | g.translate(75,50); | ||
+ | g.scale(r/100.0,r/100.0); | ||
+ | g.rotate(2*frame*Math.PI/5/20); | ||
+ | g.setRenderingHint( | ||
+ | RenderingHints.KEY_ANTIALIASING, | ||
+ | RenderingHints.VALUE_ANTIALIAS_ON); | ||
+ | g.fillPolygon(star); | ||
+ | } | ||
+ | </prog> | ||
+ | </question> | ||
+ | |||
+ | ==Lots of squares - one is a different colour== | ||
+ | <question copyFile="classes.jar" imgOut='anim.gif' | ||
+ | width='150' height='100' className="Anim" | ||
+ | classpath="classes.jar"> | ||
+ | We draw 20 squares. | ||
+ | |||
+ | Each of them is yellow - except one. | ||
+ | |||
+ | <prog> | ||
+ | <![CDATA[ | ||
+ | static void drawFrame(Graphics2D g, int frame){ | ||
+ | g.setColor(Color.white); | ||
+ | g.fillRect(0,0,150,100); | ||
+ | for(int i=0;i<20;i++){ | ||
+ | if (i==frame) | ||
+ | g.setColor(Color.red); | ||
+ | else | ||
+ | g.setColor(Color.yellow); | ||
+ | g.fillRect(100*i/20,0,100/20,100/20); | ||
+ | g.setColor(Color.black); | ||
+ | g.drawRect(100*i/20,0,100/20,100/20); | ||
+ | } | ||
+ | } | ||
+ | ]]></prog> | ||
+ | </question> | ||
+ | |||
+ | ==Lots of squares - lots of colours== | ||
+ | <question copyFile="classes.jar" imgOut='anim.gif' | ||
+ | width='150' height='100' className="Anim" | ||
+ | classpath="classes.jar"> | ||
+ | More is more. | ||
+ | <prog> | ||
+ | <![CDATA[static void drawFrame(Graphics2D g, int frame){ | ||
+ | g.setColor(Color.white); | ||
+ | g.fillRect(0,0,150,100); | ||
+ | g.translate(75,50); | ||
+ | Color [] roy = {Color.red, Color.orange, Color.yellow, Color.green, Color.blue, Color.magenta}; | ||
+ | for(int i=0;i<24;i++){ | ||
+ | g.rotate(Math.PI*2/24); | ||
+ | g.setColor(roy[((frame+i)/4) % roy.length]); | ||
+ | g.fillRect(40,0,100/20,100/20); | ||
+ | g.setColor(Color.black); | ||
+ | g.drawRect(40,0,100/20,100/20); | ||
+ | } | ||
+ | } | ||
+ | ]]></prog> | ||
+ | </question> | ||
+ | |||
+ | You can include images from other gifs in your output. [[DrawImage]] | ||
+ | |||
+ | The animations here rely on Gif89Encoder available from http://jmge.net/java/gifenc/ developed by JMG Elliot. That, in turn was developed using Jef Poskanzer's | ||
+ | GifEncoder.java | ||
+ | [http://jmge.net/java/gifenc/readme.txt Read Me from Gif89Encoder] |
Latest revision as of 20:36, 6 December 2015
Contents
Moving block
You can click on "Show" to see the full program.
The method drawFrame is called 20 times; frame is a different value each time, the graphics object is new each time. Draws a yellow rectangle at coordinates (50,8*frame-20) which is (50,-20), (50,-12), (50,-2), (50,6) ... (50,172) So the yellow box appears at the top of the image and moves down a little with each frame.
Shooting Star
In this example both the x and the y coordinates change at each frame and so the star moves diagonally.
Rotating Star
Lots of squares - one is a different colour
We draw 20 squares.
Each of them is yellow - except one.
Lots of squares - lots of colours
More is more.
You can include images from other gifs in your output. DrawImage
The animations here rely on Gif89Encoder available from http://jmge.net/java/gifenc/ developed by JMG Elliot. That, in turn was developed using Jef Poskanzer's GifEncoder.java Read Me from Gif89Encoder