EXAMPLE :1
// Declare variable for the horizontal position of the circle
let x = 25;
let y = 20
function setup() {
// Create the canvas
createCanvas(720, 400);
// Set the color mode to hue-saturation-brightness (HSB)
colorMode(HSB);
// Set the text size
textSize(40);
// No animation to start
noLoop();
function draw() {
// Clear the background
background(0);
// Draw a circle, with hue determined by frameCount
fill(x / 3, 90, 90);
circle(x, height / 2, 50);
text('sapna',20,50)
// Increase the x variable by 5
x += 5;
y +=5;
// Reset the circle position after it moves off the right side
if (x > width + 25) {
x = -25;
y=-25;
describe('circle moving to the right');
function mousePressed() {
// Start/stop the animation loop
if (isLooping()) {
noLoop();
} else {
loop();
function keyPressed() {
// Draw one frame
redraw();
}
Moving circle in LOOP
function draw() {
createCanvas(1000, 1000);
background(0);
// Calculate the circle's coordinates.
let x = random(-100, 1000);
let y = random(-100, 1000);
// Draw the circle.
// Normally, the circle would move from left to right.
circle(x, y, 40);
fill(150);
circle(x, 10, 40);
fill(60,90,90);
circle(x, 70, 40);
fill(100,90,50);
Text on arc
function setup() {
createCanvas(100, 100);
background(200);
textSize(20);
text('SAPNA',15, 50);
// Draw a red arc from 0 to HALF_PI radians.
fill(255, 0, 0);
arc(50, 50, 80, 80, 0, HALF_PI);
// Use degrees.
angleMode(DEGREES);
// Draw a blue arc from 90˚ to 180˚.
fill(0, 0, 255);
arc(50, 50, 80, 80, 90, 180);
describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red.
The bottom-left quarter is blue.');
CIRCLE IN LOOP
function setup() {
createCanvas(100, 100);
describe(
'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift
apart, then meet in the middle, over and over again.'
);
function draw() {
background(200);
// Translate the origin to the center.
translate(50, 50);
// Calculate the x-coordinates.
let x1 = 40 * sin(frameCount * 0.05);
let x2 = 40 * sin(frameCount * 0.05 + PI);
// Style the oscillators.
noStroke();
// Draw the red oscillator.
fill(255, 0, 0);
circle(x1, 0, 20);
// Draw the blue oscillator.
fill(0, 0, 255);
circle(x2, 0, 20);
******************
Clock
// Declare variables for shape radii
let secondsRadius;
let minutesRadius;
let hoursRadius;
let clockDiameter;
function setup() {
createCanvas(710, 400);
stroke(255);
angleMode(DEGREES);
// Set radius for each shape based on canvas dimensions
let radius = min(width, height) / 2;
secondsRadius = radius * 0.71;
minutesRadius = radius * 0.6;
hoursRadius = radius * 0.5;
clockDiameter = radius * 1.7;
describe('Functioning pink clock on a grey background.');
function draw() {
background(230);
// Move origin to center of canvas
translate(width / 2, height / 2);
// Draw the clock background
noStroke();
fill(244, 122, 158);
ellipse(0, 0, clockDiameter + 25, clockDiameter + 25);
fill(237, 34, 93);
ellipse(0, 0, clockDiameter, clockDiameter);
// Calculate angle for each hand
let secondAngle = map(second(), 0, 60, 0, 360);
let minuteAngle = map(minute(), 0, 60, 0, 360);
let hourAngle = map(hour(), 0, 12, 0, 360);
stroke(255);
// Second hand
push();
rotate(secondAngle);
strokeWeight(1);
line(0, 0, 0, -secondsRadius);
pop();
// Minute hand
push();
strokeWeight(2);
rotate(minuteAngle);
line(0, 0, 0, -minutesRadius);
pop();
// Hour hand
push();
strokeWeight(4);
rotate(hourAngle);
line(0, 0, 0, -hoursRadius);
pop();
// Tick markers around perimeter of clock
push();
strokeWeight(2);
for (let ticks = 0; ticks < 60; ticks += 1) {
point(0, -secondsRadius);
rotate(6);
pop();
Snowflakes
This example demonstrates the use of a particle system to simulate the motion of falling snowflakes.
This program defines a snowflake class and uses an array to hold the snowflake objects.
// Define array to hold snowflake objects
let snowflakes = [];
function setup() {
createCanvas(400, 600);
angleMode(DEGREES);
// Create snowflake objects
for (let i = 0; i < 300; i++) {
// Add a new snowflake object to the array
snowflakes.push(new Snowflake());
// Create screen reader accessible description
describe('Snowflakes falling on a black background.');
function draw() {
background(0);
// Update and display each snowflake in the array
let currentTime = frameCount / 60;
for (let flake of snowflakes) {
// Update each snowflake position and display
flake.update(currentTime);
flake.display();
// Define the snowflake class
class Snowflake {
constructor() {
this.posX = 0;
this.posY = random(-height, 0);
this.initialAngle = random(0, 360);
this.size = random(2, 5);
this.radius = sqrt(random(pow(width / 2, 2)));
this.color = color(random(200, 256), random(200, 256), random(200, 256));
update(time) {
// Define angular speed (degrees / second)
let angularSpeed = 35;
// Calculate the current angle
let angle = this.initialAngle + angularSpeed * time;
// x position follows a sine wave
this.posX = width / 2 + this.radius * sin(angle);
// Different size snowflakes fall at different y speeds
let ySpeed = 8 / this.size;
this.posY += ySpeed;
// When snowflake reaches the bottom, move it to the top
if (this.posY > height) {
this.posY = -50;
display() {
fill(this.color);
noStroke();
ellipse(this.posX, this.posY, this.size);
while
circle moving
function setup() {
createCanvas(100, 100);
// Slow the frame rate.
frameRate(5);
describe(
"A gray square with several concentric circles at the center. The circles' sizes decrease at random
increments."
);
function draw() {
background(200);
let d = 100;
let minSize = 5;
while (d > minSize) {
circle(50, 50, d);
d -= random(5, 15);
}
Moving TEXT
// Declare two frog variables.
let frog1;
let frog2;
function setup() {
createCanvas(100, 100);
// Assign the frog variables a new Frog object.
frog1 = new Frog(25, 50, 10);
frog2 = new Frog(75, 50, 20);
// Slow the frame rate.
frameRate(1);
describe('Two frog faces on a gray background. The frogs hop around randomly.');
function draw() {
background('cornflowerblue');
// Show the frogs.
frog1.show();
frog2.show();
// Move the frogs.
frog1.hop();
frog2.hop();
// Wrap around if they've hopped off the edge.
frog1.checkEdges();
frog2.checkEdges();
class Frog {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
show() {
textAlign(CENTER, CENTER);
textSize(this.size);
text('🐸', this.x, this.y);
hop() {
this.x += random(-10, 10);
this.y += random(-10, 10);
checkEdges() {
if (this.x > width) {
this.x = this.x - width;
} else if (this.x < 0) {
this.x = width - this.x;
}
if (this.y > height) {
this.y = this.y - height;
} else if (this.y < 0) {
this.y = height - this.y;
Moving Text_2
// Create an array that will hold frogs.
let frogs = [];
function setup() {
createCanvas(100, 100);
// Add Frog objects to the array.
for (let i = 0; i < 5; i += 1) {
// Calculate random coordinates and size.
let x = random(0, 100);
let y = random(0, 100);
let s = random(2, 20);
// Create a new Frog object.
let frog = new Frog(x, y, s);
// Add the Frog to the array.
frogs.push(frog);
}
// Slow the frame rate.
frameRate(1);
describe(
'Five frog faces on a gray background. The frogs hop around randomly.'
);
function draw() {
background('cornflowerblue');
for (let frog of frogs) {
// Show the frog.
frog.show();
// Move the frog.
frog.hop();
// Wrap around if they've hopped off the edge.
frog.checkEdges();
class Frog {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
}
show() {
textAlign(CENTER, CENTER);
textSize(this.size);
text('🐸', this.x, this.y);
hop() {
this.x += random(-10, 10);
this.y += random(-10, 10);
checkEdges() {
if (this.x > width) {
this.x = this.x - width;
} else if (this.x < 0) {
this.x = width - this.x;
if (this.y > height) {
this.y = this.y - height;
} else if (this.y < 0) {
this.y = height - this.y;
Number
Moving Balls
function setup() {
createCanvas(100, 100);
describe('A white circle travels from left to right on a gray background.');
function draw() {
background(200);
circle(frameCount * 0.05, 50, 20);
Object
animation
// Declare the variable data and assign it an object with three properties.
let data = { x: 50, y: 50, d: 20 };
let data1 = { x: 10, y: 20, d: 100 };
// Add another property for color.
data.color = 'deeppink';
data1.color = 'rgb(255,203,20)';
function setup() {
createCanvas(100, 100);
describe('A white circle on a gray background.');
function draw() {
background(200);
// Access the object's values using the . operator.
fill(data.color);
circle(data.x, data.y, data.d);
fill(data1.color);
circle(data1.x, data1.y, data.d);
// Update the object's x and y properties.
data.x += random(-1, 1);
data.y += random(-1, 1);
data1.x += random(-1, 1);
data1.y += random(-1, 1);
Random Poetry
Using the floor() and random() functions, you can randomly select a series of items from an array and
draw them at different sizes and positions on the canvas.
// Define the global variables.
// Create an array to store words from the p5 homepage statement.
let words = ['p5.js', 'is', 'a', 'JavaScript', 'library', 'for', 'creative',
'coding', 'with', 'a', 'focus', 'on', 'making', 'coding', 'accessible', 'and',
'inclusive', 'for', 'artists', 'designers', 'educators', 'beginners', 'and',
'anyone', 'else!', 'p5.js', 'is', 'free', 'and', 'open-source', 'because',
'we', 'believe', 'software', 'and', 'the', 'tools', 'to', 'learn', 'it',
'should', 'be', 'accessible', 'to', 'everyone', 'Using', 'the', 'metaphor',
'of', 'a', 'sketch', 'p5.js', 'has', 'a', 'full', 'set', 'of', 'drawing',
'functionality', 'However', "you're", 'not', 'limited', 'to', 'your',
'drawing', 'canvas', 'You', 'can', 'think', 'of', 'your', 'whole', 'browser',
'page', 'as', 'your', 'sketch', 'including', 'HTML5', 'objects', 'for', 'text',
'input', 'video', 'webcam', 'and', 'sound'];
// Set the amount of words to be drawn on the canvas, as
// well as the starting hue value. Declare the position variable,
// which will be used to randomly start the word selection in the array.
let wordCount = 15;
let hue;
let position;
function setup() {
describe(
'A random series of words related to p5.js scattered onto the canvas.'
);
// Import the selected font style defined in the canvas's style.css file.
textFont('Space Mono');
createCanvas(720, 400);
// Set the text alignment to center and set the color mode to HSB.
textAlign(CENTER);
colorMode(HSB);
// Define hue as a random value.
hue = random(180, 360);
// Define the random starting point for selecting the words in the
// array.
position = floor(random(0, words.length - wordCount));
background(hue, 95, 25);
// Draw as many words as set with the words variable in the
// canvas in random positions.
for (let i = 0; i < 20; i++) {
textSize(random(16, 48));
fill(hue, 200, random(50, 95));
text(random(words), random(width), random(height));
