Unveiling the Concepts

Today, we’re going to master the following concepts:

1. Creating circles using the arc method of the canvas context.
2. Utilizing the requestAnimationFrame function for smooth circle animations.
3. Harnessing the power of JavaScript classes to create multiple circles without repeating code.
4. Adding stroke styles and fill styles to our circles for a 3D bubble effect.

You can follow along with me, or use the final codepen if you want to take a look at the source code

If you prefer to learn in a video format, follow along this video

Getting Started

First things first, we need an HTML5 Canvas element. Canvas is a powerful element for creating shapes, images and graphics. This is what the bubbles will be created on. Let’s set it up -

<canvas id="canvas"></canvas>

In order to do anything meaningful with canvas, we need to have access to it’s context. Context provides a interface to render objects on the canvas and draw shapes.

Let’s get access to canvas and it’s context.

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

We will set up our canvas to use the entire window height and width -

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Let’s give our canvas a nice soothing light blue background by adding some css. This is the only CSS we are going to use. You can also do this with JavaScript if you wish.

#canvas {
  background: #00b4ff;
}

Time to Create Bubbles!

Let’s get to the fun part. We are going to create bubbles by clicking on the canvas. To achieve this, we’ll start by creating a click event handler:

canvas.addEventListener('click', handleDrawCircle);

Since we need to know where we clicked on our canvas, we are going to keep track of it in our handleDrawCircle function and use the event’s coordinates -

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle = (event) => {
  x = event.pageX;
  y = event.pageY;

// Draw a bubble!
  drawCircle(x, y);
};

Drawing circles using arc method

To create circles, we are going to utilize the arc method available on canvas’s context. Arc method accepts x and y - the center of the circle, a radius and a start angle and end angle which for us will be 0 and 2* Math.PI since we are creating a full circle.

const drawCircle = (x, y) => {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle = 'white';
  context.stroke();
};

Moving circles using requestAnimationFrame method

Now that we have circles, let’s make them move because….

GIF

Remember, that when we created circle, we used the arc method which accepted x and y coordinates - the center of the circle. If we move the x and y coordinate of our circle really fast, it will give an impression that the circles are moving. Let’s try that!

//Define a speed by which to increment to the x and y coordinates

const dx = Math.random() * 3;
const dy = Math.random() * 7;

//Increment the center of the circle with this speed
x = x + dx;
y = y - dy;

We can move this inside a function -

let x, y;

const move = () => {
  const dx = Math.random() * 3;
  const dy = Math.random() * 7;

  x = x + dx;
  y = y - dy;
};

To give our circle a seemless movement, we are going to create an animate function and use browser's requestAnimationFrame method to create a moving circle.

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
    drawCircle(x,y);

  requestAnimationFrame(animate);
};

//Don't forget to call animate at the bottom 
animate();

Creating Particles: Introducing the Particle Class

Now that we have created one circle, it’s time to create multiple circles!

But before we create multiple circles, let’s prepare our code.
In order to avoid repeating our code, we are going to use classes and introduce Particle class. Particles are the building blocks of our dynamic artwork and animation. Each bubble is a particle with its own position, size, movement, and color attributes. Let’s define a Particle class to encapsulate these properties:

class Particle {
  constructor(x = 0, y = 0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }

  move() {
    // Implementing particle movement
    // ...
  }
}

Let’s move some of the constants we had set up to the Particle class -

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }

  move() {
    // Implementing particle movement
    // ...
  }
}

The draw method will be responsible for rendering the particle on the canvas. We have already implemented this functionality in drawCircle, so let’s move it in our class and update variables to be class variables

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
    this.color = 'white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle = this.color;
    context.stroke();

    context.fillStyle = this.color;
    context.fill();
  }

  move() {}
}

Similarly, let’s move the move function within the class-

move() {
    this.x = this.x + this.dx;
    this.y = this.y - this.dy;
}

Now, we need to make sure that in our event handler, we are calling the class Particle.

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
};

canvas.addEventListener('click', handleDrawCircle);

Since we need to access this particle in our animate function in order to call the move method on it, we will store this particle in an array called particleArray. This array will also be helpful when create lots of particles. Here’s the updated code to reflect this -

const particleArray = [];

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
  particleArray.push(particle);
};

canvas.addEventListener('click', handleDrawCircle);

Remember to update the animate function too -

const animate = () => {
 context.clearRect(0, 0, canvas.width, canvas.height);

 particleArray.forEach((particle) => {
  particle?.move();
  particle?.draw();
 });

 requestAnimationFrame(animate);
};

At this point, you will see this particle on your screen-

Awesome! Now, to the fun part! Let’s creates lots of circles and style them to make them look like bubbles.

To create lots of bubbles, we are going to create particles using for loop and add them to the particleArray we had created here.

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  for (let i = 0; i < 50; i++) {
    const particle = new Particle(x, y);
    particleArray.push(particle);
  }
};

canvas.addEventListener('click', handleDrawCircle);

In the animate function, we’ll continuously update the canvas by clearing it and redrawing the particles in their new positions. This will give an illusion of the circle moving.

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle) => {
    particle?.move();
    particle?.draw();
  });

  requestAnimationFrame(animate);
};

animate();

GIF

Now that we have bubbles moving, it’s time to add color to them to make them look like bubbles!

We will do this by adding a gradient fill to bubbles. This can be done using the context.createRadialGradient method.

const gradient = context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');

context.fillStyle = gradient;

GIF

Here’s the final codepen if you want to take a look at the source code

Wrap Up

Congratulations! You’ve just created something super fun using only HTML Canvas and JavaScript. You’ve learned how to use the arc method, leverage requestAnimationFrame, harness the power of JavaScript classes, and style your bubbles using gradients for the 3D bubble effect.

Feel free to experiment with colors, speeds, and sizes to make your animations truly unique.

Feel free to experiment with colors, speeds, and sizes to make your animations truly unique.

I hope you had as much fun following this tutorial as I did creating it. Now, it’s your turn to experiment. I would love to see if you tried this out and what you created. Share with me your code link and I would love to check it out.

If you enjoyed this article, share it with someone who will benefit from it.

If you are interested in articles like this and front-end articles on JavaScript, React, GraphQL or Accessibility and career advice from a. Staff Engineer, sign up for my newsletter and get these directly in your inbox.

And now a #DevJoke -

Question — Who won the debate for the best name for loop variable?

Answer — i won.

However, creating an engaging conference talk is a skill that can be perfected with practice. In this blog post, I will share effective tips for crafting compelling conference talks that captivate your audience and leave a lasting impact. I’ll also provide examples of inspiring presentations that have influenced me.

If you’re looking for a comprehensive guide on speaking at conferences, check out my video where I discuss topics such as finding a conference, preparing slides, delivering engaging talks, and networking.

Know Your Audience

Understand your audience’s interests and needs to tailor your content effectively.

• Audience Expertise and Interests: Before preparing your talk, consider the level of expertise your audience possesses. Are you addressing beginners who are eager to learn the basics, or are you speaking to seasoned professionals seeking advanced insights? Understanding this will help you customize your content accordingly.
• Gather Insights: To gain valuable insights into your audience’s preferences, talk to event organizers or conduct surveys. This will give you a better understanding of their expectations and what they hope to take away from your presentation.
• Balance Fundamentals and Advanced Insights: If your audience consists of newcomers to the topic, focus on providing clear explanations of fundamentals, terminologies, and motivations. On the other hand, if you have an audience with intermediate to advanced knowledge, dive into the nitty-gritty, discuss pros and cons, share opinions, and share real-life experiences.
• Avoid Jargon Overload: Ensure that your content is accessible to everyone by avoiding excessive use of jargon. Make complex concepts understandable by using clear language and providing relevant context.
• Gauge with Show of Hands: During your talk, you can engage the audience by doing a show of hands to gauge their familiarity with the topic. Based on their response, you can offer a brief 101-style introduction for those who are new to the subject, or dive directly into the main content if most of the audience is already familiar.

Work on the meat of the talk first

When preparing your conference talk, focus on developing the core content and the compelling story you want to share. Design and templates can be addressed later; prioritizing your message is key.

• Identify the Key Objective: Start by answering this question: What is the one thing you want your audience to take away from your talk? This objective will be the central theme around which you build your narrative.
• Create a Mind-Map: I find it helpful to create a mind-map of the topics I’ll cover, centered around the main point I want my audience to remember. This approach ensures that your talk flows logically and maintains a clear focus throughout.

Tell a story

As humans, we like storytelling. Instead of just talking through your content, frame the story around why you are sharing this. By telling a story that follows this format, you engage your audience on an emotional level, make your content more relatable, and leave a lasting impact. Here’s a template I like for storytelling is -

• Introduce the Problem: Begin by describing a relatable problem or challenge you encountered. Paint a vivid picture to evoke empathy and interest from your audience.
• Highlight the Impact: Illustrate the consequences and impact of the problem. Share the challenges and struggles you faced, allowing your audience to connect with your journey.
• Present the Solution: Transition into the solution you discovered or devised. Explain how you tackled the problem and the thought process behind it. Make it clear why this solution was unique and effective.
• Celebrate the Improvement: Describe how the solution improved your life or the lives of others involved. Share specific outcomes and successes resulting from your approach.
• Embrace the Journey: Be honest about the ongoing nature of progress. Acknowledge that the journey may not be perfect, and there might be continuous efforts to maintain the positive changes.
• Empower Your Audience: Provide actionable insights or advice for your audience to avoid or overcome similar challenges. Encourage them to apply your learnings to their own situations.

Structure your talk

• Start with a Captivating Hook: Begin your talk with an attention-grabbing introduction. This could be an intriguing problem you encountered, a humorous joke, a compelling personal story, or a thought-provoking question. The hook sets the tone for your talk and piques the audience’s curiosity.
• Keep Your Audience Anchored: Recognize that maintaining audience attention is crucial. To keep them engaged throughout, provide a clear roadmap at the beginning of your talk. Briefly outline what you’ll be discussing, so the audience knows what to expect. Throughout your presentation, periodically remind them of the main points you’re covering and where you are in the narrative.
• Deliver Smooth Transitions: Practice delivering seamless transitions between slides and sections. This ensures that your presentation flows like a cohesive narrative. Familiarize yourself with your content to the extent that you know what slide comes next. Using presenter’s view can be beneficial to preview the upcoming slide discreetly.
• Strategically Reiterate Main Points: Identify the core messages or key takeaways you want your audience to remember. Make a conscious effort to repeat these points at various stages of your talk, reinforcing their significance.

Use visuals

A picture is a thousand words. We’re naturally drawn to visuals over lengthy text.

• Utilize a Variety of Visuals: Incorporate images, graphics, GIFs, diagrams, illustrations, and charts to visually convey your ideas and captivate your audience. Visual elements help break the monotony of text-heavy slides and enhance the overall appeal of your presentation. Explore free platforms like Unsplash and Imgur to find high-quality visuals that align with the content of your presentation. High-resolution images and graphics add a professional touch to your slides.
• Animate to Explain Concepts: Animations can be a great way to explain complex concepts dynamically. Consider using subtle animations to illustrate processes or step-by-step explanations. As a reference, check out this talk with impressive animations explaining the JavaScript event loop.
• Demonstrate with Demos: If your presentation includes a demo, start by showcasing the end product first. Then, take your audience through the process of building it step by step. This approach creates anticipation and helps the audience understand the context and value of your demo
• AI-Generated Images: For a creative touch, consider using AI-generated images created with tools like DALL-E or Midjourney. These unique visuals can add a distinctive element to your presentation. Check out this unique example of an AI generated image of a “”cat singing a song while playing piano” that I created using DALL-E.

Optimize Slide Design for Clarity

Creating visually clear and appealing slides is crucial to ensure that your conference talk is effectively delivered to all members of the audience, including those seated at the back of the room. Here are essential tips to optimize your slide design:

• Use Large Fonts: Opt for large, easy-to-read fonts that are visible from a distance. This ensures that even audience members at the back can comfortably follow your content without straining their eyes.
• Concise Text: Avoid lengthy sentences on your slides. Keep the text concise and to the point. Too much text can distract the audience from your spoken words and diminish their focus on your message.
• Avoid Information Overload: Refrain from cluttering your slides with excessive information. Stick to key points and use bullet points to convey your ideas succinctly. This allows the audience to grasp the main concepts without feeling overwhelmed.
• Format Code Clearly: When presenting code, use tools like carbon.sh to format it in a clean and readable manner. This ensures that even complex code is understandable to your audience.
• Ensure Visible Contrast: Check the visibility and color contrast of your content against the background. Do a dry-run on the day of your talk to confirm that the slides are clearly visible on the projector or screen. Monitors can have varying color resolutions, so it’s essential to be prepared.
• Avoid Distracting Design: While visual elements can enhance your presentation, ensure that your design template doesn’t distract from the main content. Keep it clean and professional to maintain focus on your message.

Avoid Over-Reliance on Presenter Notes

Presenter notes can be valuable tools for staying on track during your conference talk, but it’s crucial to avoid relying on them too heavily. Here are key points to consider when using presenter notes effectively:

• Stay Natural and Engaging: Reading directly from presenter notes can make your presentation sound robotic and disengaging. Instead, aim to speak naturally and connect with your audience. Familiarize yourself with the content to the point where you can convey it in a conversational manner. Treat presenter notes as aids rather than a script. They should serve as a helpful guide to remind you of key points, transitions, or specific details, but not dictate your entire presentation.
• Practice Makes Perfect: Rehearse your talk multiple times until the content becomes ingrained in your memory. By knowing your material inside out, you’ll be able to deliver it smoothly without relying solely on presenter notes.

Keep your audience engaged

Keeping your audience engaged is essential to ensuring the success of your conference talk. By incorporating various interactive elements, you can captivate your listeners and maintain their interest. Here are effective strategies to achieve this:

• Inject Humor and Memes: Light-hearted humor and relevant memes can add a touch of fun to your presentation. Well-timed jokes and amusing visuals help create a relaxed atmosphere and make your talk more enjoyable.
• Note on Jokes: If a joke doesn’t land as expected, simply move on without dwelling on it. Avoid explaining the joke or making the audience feel uncomfortable for not getting it.
• Interact with Your Audience: Engage your audience by asking them questions or encouraging them to participate in brief activities. Interactive elements make your talk more dynamic and involve the audience in the discussion.
• Offer Quick Breaks: If your talk contains substantial content, consider giving the audience a quick break to recharge. This break can be as simple as taking a sip of water or pausing briefly to allow the audience to take screenshots of important slides.
• Leverage Live Demonstrations: Live demos are excellent ways to immerse your audience in your topic. Letting the audience interact with your demos, ask questions, and explore the process hands-on keeps them engaged and interested.
• Share Swag or Resources: If appropriate, consider offering swag such as stickers, or t-shirts. This can serve as an incentive for active participation and create a positive association with your talk.

Share Resources for Ongoing Engagement

Empowering your audience with valuable resources ensures that the impact of your conference talk extends beyond the event itself. Here are effective ways to share resources and foster continued engagement:

• QR Codes for Accessibility: Make it easy for your audience to access your slides and additional resources by displaying QR codes at the beginning of your talk. By scanning the code, attendees can quickly access relevant materials on their devices.
• Tweet Links to Slide Deck: Increase accessibility by tweeting links to your slide deck a few minutes before your talk. This allows people to access the content during your presentation and refer back to it afterward.
• Provide GitHub or CodeSandbox URLs: If you demonstrate a technical project, share the URL to the corresponding GitHub repository or CodeSandbox. This enables your audience to explore the project further and gain hands-on experience with the code.
• Include Your Contact Information: Display your name and contact information on every slide, ensuring that attendees can easily reach out to you after the talk. This is particularly helpful if they want to share the slides or contact you for further discussions or inquiries.
• Give Action Steps: Leave your audience with a call-to-action or “from here, do this” tasks related to the topic. This encourages individuals interested in learning more to take action and engage further with the subject matter.

Make it Relevant for Your Audience, Not Just You

Ensuring that your conference talk resonates with your audience is essential for creating a meaningful and impactful presentation. Consider the following points to make your talk relevant and valuable for your listeners:

• Abstract the Problem and Solution: If you’re sharing a talk about a problem you encountered and the solution you formed, abstract the problem to make it relatable for the audience. Avoid overwhelming them with excessive technical details or specific scenarios that may not directly apply to their situations. Instead, focus on the core principles and broader implications that your audience can relate to and learn from.
• Avoid Over-Marketing or Over-Selling: While it’s natural to be passionate about your work or product, avoid turning your talk into a promotional pitch. People attend conferences to gain knowledge and insights, not to be sold to. Provide valuable content that genuinely benefits your audience, and let the quality of your work speak for itself. Authenticity and value will naturally attract interest and followers.
• Note on Self-Promotion: Subtly promote your social media presence at the beginning and end of your talk, but do so in a non-intrusive manner. Mentioning your Twitter handle or other social links during the introduction and conclusion allows interested listeners to follow you for more content without feeling overwhelmed by constant promotion.

BONUS: Where to find templates?

I’m a fan of simplicity when it comes to design templates. There are various sources to find templates, such as Envato or Canva. Additionally, you can hire a designer from platforms like Fiverr or Upwork to create a custom template for you. Personally, I’ve refined my design template in Keynote over the years, and it’s the one I use most frequently. This is the template I started off with.

Examples of Great Talks

• Zach Holman’s Talk with Huge Fonts
• Jason’s Talk with Great Fonts
• Andre’s Funny Talk with Cool Animations
• Shaundai’s Talk with Great Use of Visuals

Speaking at conferences is an enriching experience that allows you to share your passion and expertise with others. Following these tips will help you create powerful conference talks that leave a lasting impact on your audience. Embrace visuals, engage your listeners, and deliver valuable content that inspires and empowers others.

Remember, every great conference talk starts with a few seconds of courage. Take that step and share your knowledge with the world!

If you enjoyed this article, share it with someone who will benefit from it.

If you are interested in articles like this and front-end articles on JavaScript, React, GraphQL or Accessibility, sign up for my newsletter and get these directly in your inbox.