Slide Classes

What we need

• Slides that can encapsulate the behavior of each or your sketches that you want to present
• One type of slide that is static (text/image)
• Another type of slide that is animated (p5 sketches)
• A container for all of your slides
• A way to keep track of what slide you're on
• A way to go forward and backward in your slide deck

Static Slides

These slides can afford to be a little more generic since text and images can be passed in as arguments. The only trouble is, you might not want to pass in every argument every time you define a slide. Having the arity for that many parameters would also give you argument lists a mile long!

It might make sense to make all of your arguments optional by passing in one JSON object, then having the slide's constructor define each property conditionally, like so.

class StaticSlide
{
    constructor(options)
    {
        if (options.header) {
            this.header = options.header
        }
        if (options.subHeader) {
            this.subHeader = options.subHeader
        }
        if (options.bulletPoints) {
            this.bulletPoints = options.bulletPoints
        }
        if (options.imgLink) {
            this.imgLink = options.imgLink
        }
        if (options.background) {
            this.background = options.background
        } else {
            this.background = color(242)
        }
        if (options.fillColor) {
            this.fillColor = options.fillColor
        } else {
            this.fillColor = color(255, 0, 88)
        }
        if (options.imgLink) {
            this.imgLink = options.imgLink
        }
        if (options.font) {
            this.font = loadFont(options.font)
        } else {
            this.font = loadFont('assets/circular-book.otf')
        }
    }

    setup()
    {

    }

    draw()
    {
        background(this.background)
        // textFont(this.font)
        fill(this.fillColor)
        if(this.header) this.drawHeader();
        if(this.subHeader) this.drawSubHeader();
    }

    drawHeader()
    {
        textSize(48)
        text(this.header, width*0.05, height*0.22)
    }

    drawSubHeader()
    {
        textSize(36)
        textFont
        text(this.subHeader, width*0.05, height*0.33)
    }
}

Then in the main sketch, you can make an object and pass in that object as an argument

let titleOptions = { 
    "header": "HELLO, WORLD!",
    "subHeader": "subtitle",

}
let titleSlide = new StaticSlide(titleOptions)

let endOptions = {
    "header": "Thanks! (◡‿◡✿)"
}
let endSlide = new StaticSlide(endOptions)

Adding to the slides

Now you have couple slides that have headers and subheads, but how could we add a bit more to it? You can certainly adjust the layout in the draw loop, but what about images? Or bullet points? Feel free to add to it as you see fit.

Dynamic Slides

These slides will be a little harder to organize since each one will have to be specifically tailored to the sketch which is being drawn. Because each of the draw functions that they perform would be radically different, we can't make a single class for all of them.

There could be an individual class for each sketch slide, but that would defeat the purpose of object-oriented programming.

Instead, the sketches can be defined as json objects, then have their setup and draw functions appended with dot notation which can be aceive this like so:

//define the sketch as an empty object
let sketch = {}; 

//add the sketch's setup loop
sketch.setup = () => 
{
    ...
}

//add the sketch's draw loop
sketch.draw = () => 
{
    ...
}

//these loops are then called from within p5's 
//setup and draw loops
function setup() 
{
    sketch.setup()
}

function draw()
{
    sketch.draw()
}

This doesn't save us from writing all of the code that we had before, but now you have the convenience of encapsulating the code for each sketch into two discrete methods.

Now you can do this for each sketch that you have.

//define the sketch as an empty object
let sketch1 = {} 
let sketch2 = {} 
let sketch3 = {}

sketch1.setup = () => 
{
    ...
}

sketch1.draw = () => 
{
    ...
}

sketch2.setup = () => 
{
    ...
}

sketch2.draw = () => 
{
    ...
}

sketch3.setup = () => 
{
    ...
}

sketch3.draw = () => 
{
    ...
}
//these loops are then called from within p5's 
//setup and draw loops
function setup() 
{
    sketch1.setup()
}

function draw()
{
    sketch1.draw()
}

Hmm, now that we look at that approach fleshed out though, there seems to be a lot of code before the setup loop. It might be good to swrap them in a function that can be put underneath the draw loop, or in a different file.

That looks a little better. It hasn't functionally changed the program, but it has swept some of the messiness under the rug.

Now that you have all of your slides, you need a way to switch between them. You could just put a wholce bunch of if statements into your draw loop, but there might be a cleaner way than that.