From WOGL to p5

WOGL is very limited language. Within its limitations, there is surprising richness! But there are some things WOGL just can’t do.

Today we’re going to start learning p5, which is a version of the popular creative coding platform called Processing. This is much less limited than WOGL — and with the increased flexibility comes increased complexity.

Your job today is to use play and experimentation to learn p5 by:

  • modifying some p5 code and studying what happens, and
  • translating familiar things between p5 and WOGL.

In p5, a program is called a “sketch.” Open today’s starting point sketch in a web browser, and click the “Play sketch” button at the top to see what it does.

Quick p5 editor tips:

  • You can also press cmd-return (macOS) or ctrl-enter (Windows/Linux) to run the program (aka “play the sketch”).
  • You can refresh the page to undo all of your edits and go back to the starting point.
  • You can create a p5 account so save your creations. (But do this later! Right now, start the activity!)

Experiments:

  • Try changing each number in the code one by one, and studying the results of each change. What does each number mean? If you don’t see the difference, try making a bigger change!

  • Try removing and reordering lines. Which changes work, and which give errors? Why? Form theories from the error messages.

  • Try inserting each of these lines in the middle of the code:

    strokeWeight(10)
    
    stroke("purple")
    

    Move them around, higher and lower in the code. What’s happening? Can you predict the result of moving one of those lines before you run the code?

  • Try removed the existing lines of code that say draw/turn, and replacing them with this:

      var size = 25
      turtle.draw(size)
      turtle.turn(60)
      turtle.draw(size * 3)
    

    What’s going on? Form a theory, test your theory.

  • Consider this WOGL program:

    AAAEEE
    

    Try it in WOGL. Can you make code that does the same thing in p5?

  • ⭐️ Can you make p5 code that produces the same results as AAAEEE with a variable number of sides in p5, just like WOGL?

    You don’t need to make a slider or user interface like WOGL has. Your goal is to turn the slider in WOGL into just one number in one place in the code that does the same thing. For example, if you change that one number to 5 then you get the same results as in WOGL when you set the sides to 5. Then if you change it to 6, you get the same result as moving the sides slider in WOGL to 6.

  • Same challenge, but with these WOGL programs:

    TTTCCC
    
    UUUYYY
    
    YEETCAT
    

    (Remember the class’s WOGL documentation! It might help!)