Creating images with R

The meme is about giving confidence to a individual.

/* CSS Modification 1: Custom font and body background colour */
@import url('https://fonts.googleapis.com/css2?family=Iosevka+Charon+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

body {
  font-family: 'DM Sans', sans-serif;
  background-color: #fdf8f3;
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.8;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 30px;
}

/* CSS Modification 2: Custom heading style and colour */
h1, h2, h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
}

h1.title {
  color: #c0533a;
  font-size: 2.6em;
  border-bottom: 4px solid #c0533a;
  padding-bottom: 8px;
}

h2 {
  color: #c0533a;
  border-left: 5px solid #c0533a;
  padding-left: 12px;
  margin-top: 40px;
}

/* CSS Modification 3: Code block styling */
pre {
  background-color: #1e1e2e;
  color: #cdd6f4;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.88em;
  border-left: 4px solid #c0533a;
  overflow-x: auto;
}

code {
  background-color: #f0e8e0;
  color: #c0533a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* CSS Modification 4: Image styling */
img {
  display: block;
  margin: 16px auto;
  border-radius: 10px;
  border: 2px solid #e8ddd4;
  box-shadow: 4px 4px 0px #e0d0c4;
  max-width: 100%;
}

/* CSS Modification 5: Link colour and hover effect */
a {
  color: #c0533a;
  text-decoration: underline;
}

a:hover {
  color: #8f3a24;
}

Project requirements

Below is a screenshot of my Project1 folder in RStudio, showing all the files used for this project:

Screenshot of Project1 folder

Inspo meme

Inspo meme: Who’s awesome? You are!

The key design components of the inspo meme are:

• Image: A close-up photo of a winking, smiling French Bulldog set against a bright teal background
• Top text: “WHO’S AWESOME?” in large bold white Impact font with a black stroke outline, positioned at the top centre of the image
• Bottom text: “YOU ARE!” in the same bold white Impact style, anchored to the bottom centre of the image
• Tone: Humorous, warm and encouraging — a classic affirmation meme designed to make the viewer smile
• Layout: Text anchored to the top and bottom edges, following the standard two-line meme format

My meme

My new meme: I Believe In You - Trust Me

For my meme I made the following changes from the inspo meme:

• Different image: I replaced the French Bulldog with a Quokka — a small Australian marsupial known for its naturally smiley expression. The quokka keeps the same cheerful and warm energy as the original, while being a fresh and unexpected animal choice.
• Different text: I changed “WHO’S AWESOME? / YOU ARE!” to “I BELIEVE IN YOU / TRUST ME”. This gives the meme a motivational and encouraging tone — like a little reminder to back yourself, which is relevant to any student going through a challenging course.
• Different text position: Instead of centre-aligned top and bottom text, I used northwest for the top text and southeast for the bottom text to give the layout a more dynamic and asymmetric feel.

My animated meme

My animated meme with flashing text colours

Creativity

My project demonstrates creativity in several ways:

1. CSS beyond the minimum: I applied 5 distinct CSS modifications rather than the required 3 — including a custom imported Google Font pairing (Syne + DM Sans), styled headings with a left border accent, dark-themed code blocks, image card styling with shadows and rounded corners, and custom link hover colours. These work together to create a cohesive and polished report aesthetic.

2. Asymmetric text positioning: Rather than placing both text lines at north and south (the standard meme layout), I used northwest and southeast to create a diagonal flow across the image. This gives the meme a more dynamic layout while remaining readable.

3. Meaningful meme concept: The text “I BELIEVE IN YOU / TRUST ME” paired with a naturally smiling quokka creates a genuinely warm and motivational meme. The quokka’s expression makes the message feel authentic, and the encouragement is something any student can relate to personally.

Learning reflection

One of the most important ideas I learned from Module 1 is how multiple technologies can be combined to create a single output. Before this module, I thought of HTML, CSS, and R as completely separate things, but working with R Markdown showed me how they all connect — R handles the code, Markdown structures the content, and CSS controls the visual appearance. Seeing how a single .Rmd file produces a fully styled, self-contained HTML report was a genuinely new way of thinking about how I present my work.

I also found the {magick} package really interesting because it showed me that R is not just for statistics and graphs — it can be used creatively to manipulate and generate images. Learning to use pipes %>% was also a key takeaway, as chaining functions together makes code much more readable and logical to follow step by step.

Going forward, I am curious about exploring more functions in {magick} such as image_composite() for layering images, and image_morph() for smoother transitions between animation frames. I am also curious about how CSS animations work and whether they can be incorporated into R Markdown reports. More broadly, I want to learn how to work with real-world datasets in R and build visualisations that tell a clear story — which feels like the natural next step after completing this module.

Appendix

Do not change, edit, or remove the R chunk included below.

If you are working within RStudio and within your Project1 RStudio project (check the top right-hand corner says “Project1”), then the code from the meme.R script will be displayed below.

This code needs to be visible for your project to be marked appropriately, as some of the criteria are based on this code being submitted.

# PART D - Meme Creation

library(magick)
url_img <- "quokka.png"

# Reading the image locally stored in the file directory
image_read(url_img)

# Creating the meme with text annotations

meme <- image_read(url_img) %>%
  image_annotate(text = "I BELIEVE IN YOU", gravity = "northwest", size = 40, font = "Impact", color = "white",
    strokecolor = "black") %>%
  
  image_annotate(text = "TRUST ME", gravity = "southeast", size = 28, font = "Impact", color = "white",
    strokecolor = "black")

# Save the static meme as my_meme.png
meme %>% image_write("my_meme.png")

## PART E - Adding Animation to the Current Meme

# Frame 1: "TRY" - white text
f1 <- image_read(url_img) %>%
  image_annotate(text = "TRY", gravity = "northwest", size = 45, font = "Impact", color = "white",
    strokecolor = "black")

# Frame 2: "YOUR" - skyblue text
f2 <- image_read(url_img) %>%
  image_annotate(text = "YOUR", gravity = "center", size = 40,font = "Impact", color = "skyblue",
    strokecolor = "black")

# Frame 3: "BEST" - brown text
f3 <- image_read(url_img) %>%
  image_annotate(text = "BEST", gravity = "center", size = 40, font = "Impact", color = "brown", 
    strokecolor = "black")

# Frame 4: "BUDDY" - green text
f4 <- image_read(url_img) %>%
  image_annotate(text = "BUDDY", gravity = "southeast", size = 45, font = "Impact", color = "green",
    strokecolor = "black")

# putting the frames in order using a vector
frames <- c(f1, f2, f3, f4)

# Animates at 3 fps so each frame displays for 0.33 seconds and it loops forever
animation <- frames %>%
  image_animate(fps = 2, loop = 0)

# Saves the animated GIF as my_animated_meme.gif
animation %>% image_write("my_animated_meme.gif")