Game Design 1 Project 3

Illusion-- A series of drawing tools made with p5.js

StatusReleased
CategoryOther
PlatformsHTML5
Author11ee
TagsDrawing, p5js

Comments

Log in with itch.io to leave a comment.

Prompt 3: Describe how you played with the game.

Illusion was more than a piece of software, but really a form of play. Of course it was fun to make cool pictures at first, especially with the circular tool, just by messing around. It was satisfying to build circular tubes across the screen with that tool, reminding me of ones little animals will travel through. This all resulted in me being curious in the rules as there were obviously some consistent rules that the brushes/tools were following to choose their shapes and connection points. 

I moved my mouse around, clicking and not clicking, trying up and down, various quadrants, even different speeds just in case. It often got pretty messy so I had to keep resetting the board, but I started to build a better mental model of the rules, and found myself wanting to create more than some complicated pipes. I love figuring out these kind of rules and the brushes presented are great for this kind of play, as they aren’t too challenging, but perhaps not obvious at first. For example, my favorite tool, the circle, had its height change depending on the y value of the mouse and the width change depending on the x value of the mouse. This enabled you to create relatively perfect circles along the xy diagonal.

With my bundled knowledge, I was finally able to put my art skills to the test, creating a pipe system, with support provided by the automatic lines from brush 1, and texture provided by brush 3. As I created them, I imagined them as water slides, and that made it all the more fun!

Prompt 1: Describe the game as if it were a physical object.

Yiyi Zhao's game "Illusion" has three distinct brushes with imperfect ways to recreate them in the real world. 

Brush 1 is the most complex and hardest to describe of the brushes. It seems to be a collection of white lines that is connected to an axis that goes diagonally down from the top left corner to the bottom right corner. It creates quite interesting patters that look like a spirograph. There are two ideas I have for creating this experience in real life. The first is using a spirograph to give the overlapping line feeling with physically drawing. You could also imitate "Illusion" in real life with buying some Halloween webbing. When you stretch out the Halloween webbing, it looks similar to the overlapping lines of "Illusion".

Brush 2 is a collection is hollow outlined circles that creates a tunnel. These circles look like a builder's diagram where it is a draft of how a tunnel would look like in real life. Another way to think of it would be creating a slinky. The slinky grows bigger as you draw more. To recreate this experience in real life, I would use a slinky and expand it or shrink it.

Brush 3 feels like a stretchy pearl necklace. When you press down your mouse and move it, lines with little circles that are apart based off mouse speed are put onto the canvas. The faster that you use the brush, the more the brush "stretches" and the farther the "pearls" are apart. To recreate brush 3 in real life, you would have to grab an elastic string and put beads on to it. Then you would stretch and pull the string to make the beads seem farther apart. To recreate the experience of drawing more or "lengthening the string", you could have the elastic string with one end still attached to a spool that could become longer or shorter as needed. The other part of brush 3 is that when you are not pressing the mouse, little circles appear where your mouse is. This would be similar to dipping your finger into finger paint and touching the canvas. Anywhere you touch the canvas, a mark would be put.