next »

[agj]

Latest screenshot:



Play the game

Updates, in reverse chronological order:

• Sound. Dynamic speed for the carousel. Improved pictograms. Brightness parameter removed. +
• Accent algorithm added. Usability improvements. Visual niceties. +
• Added pictograms to interface. Added live evaluation. Removed words and numbers. Various extra visual flourishes. +
• Designed a set of pictograms for the interface. +
• Rhythm and brightness algorithms added. Added pre-determined shapes. +
• Added a proper results screen. +
• Improved symmetry algorithm (now checks two directions). +
• Added carousel. +
• Symmetry algorithm added. + + +

To-do list

What follows is the original post.


The idea for this game started to form around two years ago, when I realized that the patterns in puzzle games such as Tetris, Puzzle Bobble and Puyo Puyo, where you manipulate and rearrange basic units of different colors and sometimes shapes, could occasionally be interesting to look at, and beautiful. Actually, this basic idea was probably gestated while creating Polarium levels, and realizing that I was having more fun with the challenge of making them simultaneously beautiful and solvable, than of simply playing them. This idea of mine consisted in the creation of a game whose objective were to make an interesting visual composition, rather than matching shapes, making chains, etc.

Time passed, and eventually, when I had to decide what my final project in college would be, I chose to make a game based on this idea. I'm a graphic design student, so it all fits, of course.

The game, which only a week and so ago did I start to actually program, is very basic: There is an empty and rectangular field, which I call the canvas, and colored elements to put on it. The canvas is essentially a grid, and the elements are circles arranged in different formations, generated automatically and randomly, which you drag and drop where you like. When your time runs out you get a score related to different compositional parameters, such as symmetry, color temperature, rhythm, and presence of an accent; all of these can go either way on a scale, so you could create a very assymetrical composition, using cool colors, lacking rhythm but with a strong visual accent, and the game will tell you this. You'd get more points for manipulating these values to their extremes, following the expressionistic adage, or in Gauguin's own words:

How do you see this tree? Is it really green? Use green, then, the most beautiful green on your palette. And that shadow, rather blue? Don't be afraid to paint it as blue as possible.

The player is therefore allowed to create the composition that he wishes within the frame of the game's intentional limitations. I expect this game to be instructive; that is, through repeated playing, the player would be able to recognize how to manipulate his compositions with increased effectiveness.



What you see above is how the game looks right now. The evaluation algorithms have not been written yet, except for the one for temperature. The circle down and to the right is a clock for your remaining time; when it reaches zero, it prints what is supposed to be the overall temperature of your composition, though it still needs some adjusting. The values go from -100 (very cool) to 100 (very warm).

And, of course, you can play the game here [EDIT: This always links to the latest build]--don't expect much in terms of interactivity yet, though. It's been made for Flash, so you can play it directly on your browser.

I would love to hear your thoughts on this idea. I will also use (read: spam) this thread to post my progress in the future. Oh, and you might care to give me a hand on the occasional technical bump in the road, if you like!

[diwil]

That's a very interesting idea! Although, I would say that can be quite a challenge, to score, essentially, beauty. But the idea seems good... Like an open-ended puzzle game.

[MekanikDestructiwKommando]

I got -32.. then +31 next time.
Hm. looks cool, want to see where you'll take this one.

[increpare]

Ah. Lovely.  Quite compelling.  I like how the palette changes for each play, how the lattice shape changes. 

One thing: you could increase the margins on the top and the left, so help with partially fitting in pieces around the edges.

[muku]

That's a wonderful idea. I'm looking forward to see how well your evaluation algorithms will perform in rating an image's "beauty." I just had a related discussion with increpare (though on criteria for music), so I'm very interested. And if this game will be able to teach me even the slightest thing about visual composition, you'll be my hero evermore. Maybe you could supplement it with some educational writeups about the compositional concepts used?

One other thing; will there be several pieces to choose from at any given time in the future? Because right now you're basically forced to choose whatever the game throws at you and can't really make any color choices, for instance.

[deadeye]

It's a pretty neat concept for a game, and it'll be interesting to see how you pull off scoring balance. 

[agj]

One thing: you could increase the margins on the top and the left, so help with partially fitting in pieces around the edges.

Indeed; I was actually thinking of making it full-viewport sized for such effect, but I'll worry about those details later. For now, maybe I'll just center it in the page.

One other thing; will there be several pieces to choose from at any given time in the future? Because right now you're basically forced to choose whatever the game throws at you and can't really make any color choices, for instance.

Yes. There will be what I've been calling the 'carousel', which is just a procession of shapes from which you can grab the one you like, as if they were in a conveyor belt.

Thanks for your input, guys.

[agj]

I've made some progress. I uploaded a new version with an extra evaluation algorithm: symmetry. It took me some time getting it right, but I think that it's plenty accurate; might need some tweaking, though. Please tell me if you find that the results are not what you'd expect. Oh, and the temperature algorithm from before has been fixed and improved a bit, since it was broken before.

What do you guys think are the most important compositional parameters that my game should evaluate? Not necessarily from those I mentioned in my first post; they could be anything.

[increpare]

doesnt seem to work on chrome.  (on IE) I'm finding it difficult to get positive symmetry values.

[GregWS]

Interesting idea for a game.  I think it would be wise to have a simply tutorial built in to instruct the user on the basics of visual composition; we're not all graphic designers after all.  Best part about that is that we'd learn something from playing and it wouldn't feel like a chore!

[agj]

doesnt seem to work on chrome.  (on IE) I'm finding it difficult to get positive symmetry values.

I've heard that Chrome's Flash player is not working properly yet. And did you feel that the symmetry values did not reflect what you had created? Could you describe the composition(s)?

I think it would be wise to have a simply tutorial built in to instruct the user on the basics of visual composition

Hm, that's kind of against my point, though, which is to create something very straight-forward and self-explaining. I also want the user to not feel like they need to achieve specific goals, I want them to explore and make whatever they want. The reward in points is secondary, and will mostly take part in a second stage of the game that I have not explained. Which I might as well do now.

There will be a social aspect to the game, which I have envisioned partway. After the player successfully creates a composition, they may choose to record it in the website. It will be integrated into a gallery that will be divided by moods (perhaps in the form of a visual 'palette'), determined by the values of the different parameters. Highest overall scores (calculated in the way I described in the first post; see Gauguin's quote) will mean higher places in the gallery, though I might decide to make it possible for visitors to vote up compositions. The point of this gallery system would be that you can use a selection of your compositions and integrate them into your blog, for instance, via some embed code, or use as an avatar or sig in a forum, and that kind of thing. I'm not really sure about all this yet, and I'm focusing on the basics, which is getting the core game done, but I certainly want to integrate it into some bigger plan.

[GregWS]

OK, well explained.  I like that second idea, good luck with it! 

[agj]

architekt, thank you for your words.

Well! It's starting to look more like a game now. The fundamental new feature is the functioning carousel, as you can see in the screenshot below. It's also a bit more attractive to the eye. It's playable here.

[george]

I think the carousel is brilliant.

[agj]

Thank you!

Uploaded an improved version. I realized that there was a gaping flaw in the way I was averaging colors per cell, so I fixed that. This means you should get better temperature results now. I think there's still something wrong with the symmetry algorithm, though (caused by the same mistake), but I'll work on that later.

[increpare]

The carousel is nice, but...a bit frustrating to try and use on a touchpad :/

The first two sort of make sense





(excepting that I consider the second one to be highly symmetric instead of highly non-symmetric...)

The third one...by my mental criteria is extremely symmetric




I don't understand why this one is considered highly nonsymmetric.



I'm thinking of symmetry just in terms of colours, so this might mean something.

I'm curious as to what your symmetry-checking algorithm actually is.

[agj]

Yeah, you're right, it's not working properly, and I know why now. That second example I'm not sure if I will try to accomodate eventually, because right now the algorithm isn't even attempting to check for such cases.

As for what the algorithm does, let me try to sum it up. It's pretty brute-force stuff. What it does first is take a row, and take an axis from a range close to the center of the image, say, like this:

Code:

x x o x x x x x
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .

The axis can be a cell, like indicated by the 'o' above, or the point between two cells. Next, it checks for similarities between the two cells closest to the axis:

Code:

x o x o x x x x
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .

And continues to compare with the rest of the equidistant cells. The value of each cell comparison is calculated by the formula below. I'm no mathematician so forgive the lack of correct notation:

difference = positive(cell_a - cell_b)
value = difference * e^(distance_from_axis)

So the resulting values grow exponentially the farther from the axis the cells compared were. When one of the cells is actually out of the canvas, instead of calculating the difference I just use the worst possible value (100% difference). This plays up the relevance of the centermost axis.

Of course, this continues with the next axis for that row, until they have all been checked. Then, the rest of the rows are checked in the same way. The resulting values in the different rows, for any given axis, are averaged (which I just realized is totally backwards, but works nonetheless), resulting in a unique value per vertical axis. The lowest value obtained is recorded as the horizontal symmetry.

All of this is then repeated, but calculating the value of horizontal axes and thus the vertical symmetry, which is averaged with the horizontal symmetry.

The part that I realized isn't working is calculating the difference between two cells. Right now all I'm doing is substracting, which means that red weighs more than green than blue. Yeah, totally stupid. Will have to make it compare each color separately, and it should work OK then.

[muku]

Of course, this continues with the next axis for that row, until they have all been checked. Then, the rest of the rows are checked in the same way. The resulting values in the different rows, for any given axis, are averaged (which I just realized is totally backwards, but works nonetheless), resulting in a unique value per vertical axis. The lowest value obtained is recorded as the horizontal symmetry.

I think this may be a problem, as well. Wouldn't you want to take the highest of any symmetry scores as the final image's score? After all it suffices for there to exist one axis with high symmetry; in fact an image which is highly symmetric about every axis would be just a single-color image.

[increpare]

I think this may be a problem, as well. Wouldn't you want to take the highest of any symmetry scores as the final image's score? After all it suffices for there to exist one axis with high symmetry; in fact an image which is highly symmetric about every axis would be just a single-color image.

The higher the 'symmetry score', the lower the symmetry I think

cf: "value = difference * e^(distance_from_axis)"

(or am i misunderstanding something?)

(anyone else suppressing the urge to suggest some sort of fourier transform as a means of measuring symmetry?)

[muku]

Oh... you're probably right, I didn't read it precisely enough...

Fourier transform? Interesting idea. Could you use that to rate symmetry?

My mind has been busier dreaming up possible algorithms to detect the symmetry in your second picture