Oh, that naughty sketch! Please let us know what the issue is below.
Apply Template
Applying this template will reset your sketch and remove all your changes. Are you sure you would like to continue?
Report Sketch
Report Comment
Please confirm that you would like to report the comment below.
We will review your submission and take any actions necessary per our Community Guidelines. In addition to reporting this comment, you can also block the user to prevent any future interactions.
Please report comments only when necessary. Unnecessary or abusive use of this tool may result in your own account being suspended.
Are you sure you want to delete your sketch?
Any files uploaded will be deleted as well.
Delete Comment?
This will also delete all the replies to this comment.
Delete this tab? Any code in it will be deleted as well.
Select a collection to submit your sketch
We Need Your Support
Since 2008, OpenProcessing has provided tools for creative coders to learn, create, and share over a million open source projects in a friendly environment.
Niche websites like ours need your continued support for future development and maintenance, while keeping it an ad-free platform that respects your data and privacy!
Please consider subscribing below to show your support with a "Plus" badge on your profile and get access to many other features!
A fork of p5.play Example: Animations by Alex Yixuan Xu
CC Attribution ShareAlike
p5.play Example: Animations
xxxxxxxxxx
// p5.play is initiated by Paolo Pedercini | molleindustria.org | @molleindustria
// Examples are ported from http://molleindustria.github.io/p5.play/examples/index.html
// create variables to store animations
var circle, explode, sleep, glitch;
// it is advised to load animations in preload function
function preload() {
//create an animation by loading a sequence of images
// a shortcut to create animation is to load the first and the last file name (must be numbered) and it will try to find the ones in between
sleep = loadAnimation('asterisk_stretching0001.png', 'asterisk_stretching0008.png');
// this is the same as
// sleep = loadAnimation('asterisk_stretching0001.png', 'asterisk_stretching0002.png', 'asterisk_stretching0003.png', 'asterisk_stretching0004.png', 'asterisk_stretching0005.png', 'asterisk_stretching0006.png', 'asterisk_stretching0007.png', 'asterisk_stretching0008.png');
explode = loadAnimation('asterisk_explode0001.png', 'asterisk_explode0011.png');
glitch = loadAnimation('asterisk.png', 'triangle.png', 'square.png', 'cloud.png', 'star.png', 'mess.png', 'monster.png');
// .playing takes a boolean value
// by default an animation plays
// here is set to false, which will only display the first frame of the glitch animation.
glitch.playing = false;
circle = loadAnimation('asterisk_circle0000.png', 'asterisk_circle0008.png');
// .looping takes a boolean value
// by default an animation loops
// here is set to false, which will only display the animation circle once.
circle.looping = false;
}
function setup() {
createCanvas(800, 300);
textAlign(CENTER);
}
function draw() {
background(255);
// playing an pausing the sleep animation using .play() and .stop()
// when mouse is being pressed, the animation runs and
// when mouse is not pressed, the animation pause
if(mouseIsPressed){
sleep.play();
}
else{
sleep.stop();
}
// .getFrame() returns the current frame number.
// .getLastFrame returns the last frame number.
// Here when the current frame of the explode animation is the last frame,
// explode animation would go to frame 7
if(explode.getFrame()==explode.getLastFrame())
explode.changeFrame(7);
// .goToFrame(Target Frame Number) method
// plays the animation forward or backward toward a target frame.
// when mouse is being pressed, the animation runs backwards towards frame 0 and
// when mouse is not pressed, the animation runs forwards towards last frame
if(mouseIsPressed){
circle.goToFrame(0);
}
else{
circle.goToFrame(circle.getLastFrame());
}
// display the animations on screen
// specify the animation instance and its x,y position
animation(sleep, 100, 150);
text('sleep', 100, 250);
animation(explode, 300, 150);
text('explode', 300, 250);
animation(glitch, 500, 150);
text('glitch', 500, 250);
animation(circle, 700, 150);
text('circle', 700, 250);
}
function mousePressed() {
// .rewind() changes the animation to the first frame (frame 0).
explode.rewind();
// .nextFrame() goes to the next frame and stops the animation.
glitch.nextFrame();
}
See More Shortcuts