Official Flower Grove Topic

Adventurer
1

Post your creations here and only here. We don’t want to flood the forum with a new topic for each picture.

With the newest addition, the Ring of Flowers and the level Mountain Flower Grove we finally have a way to express our desire for art. Create wonderful pictures, spirals, patterns just by walking around.

Post a screenshot of your creation here so the whole world can see what you did. Let’s show that CodeCombat is not only about Kick&Run tactics.

As a reminder, it is recommended/mandatory to post your code for the creations… So the wonderful creations you made won’t be lost just in case the images break. Or else… Legacy is lost.

30 Likes
4

I moved a post to a new topic: Mountain Flower Grove not loading because of Code

1 Like
8

I know this is not a actually piece of art with the ring of flowers but with this code you will draw random lines until you hit 1000 flowers and you can get some pretty cool designs with this code

loop{
    var x = this.pos.x;
    var y = this.pos.y;
    var one = Math.floor((Math.random() * 10) + 0);
    var two = Math.floor((Math.random() * 10) + 0);
    this.moveXY(x + one,y - two);
    this.moveXY(x - one,y + two);
    this.moveXY(x + two,y - one);
    this.moveXY(x - two,y + one);
}
21 Likes
9

I liked the idea of Feinty. I tweaked it a bit. Here’s the code below.

**Spoiler Code** 
// Initializing variables
var nextX, nextY ; 
var x0=15,
    x1=152,
    y0=15,
    y1=125;

// Changing color variables
var colors=["red","blue","white","pink","purple","yellow"] ;
var kColor= 0 , nColors = colors.length ;
var now = 0, then = -10 , timeStep = 5; // Changing color every 5 seconds.

// Steps infos
var stepAmpl= 0.1 ;
var maxAmplitudeX= x1-x0 ,
    maxAmplitudeY= y1-y0 ; // distances between east/west and north/south walls

// Main loop
loop{
    // Changing color
    now = this.now();
    if(now - then > timeStep ){
        then = now ; 
        kColor = (kColor + 1) % nColors ;
        this.setFlowerColor(colors[kColor]);
    }
    
    // Random part of the loop
    nextY=this.pos.y + randBetween( - stepAmpl * maxAmplitudeY,  stepAmpl * maxAmplitudeY );
    nextX=this.pos.x + randBetween( - stepAmpl * maxAmplitudeX,  stepAmpl * maxAmplitudeX );
    
    // No face planting in the walls
    nextX = bounceOffBorders( nextX , x0 , x1);
    nextY = bounceOffBorders( nextY , y0 , y1);
    
    // MoveXY to make segments
    this.moveXY( nextX , nextY );
}



function randBetween(a,b){
    // return a random number within [ a , b [ 
    return (b-a) * Math.random() + a ;
}

function bounceOffBorders(coord, coordMin , coordMax ){
    // make sure Hero can't target outside of the playground with a ball-bounceback idea (symmetry).
    if(coord <coordMin){
        // Bouncing on the left (resp. bottom) wall
        coord = eigenSymetry (coord , coordMin);
    }else if (coord > coordMax){
        // Bouncing on the right (resp. top) wall
        coord = eigenSymetry (coord , coordMax);
    }
    return coord ;
}

function eigenSymetry(coordToSymetrize , axisXorY) {
    // symmetry on eigen axis X and Y.
    // example : eigenSymetry(12,3) will provide the X coord of the symetric of X=3 in the (vertical) symetry of axe X=12.  
    return 2*axisXorY - coordToSymetrize ;
}
18 Likes
10

Fractal drawing of golden triangles. 7 of them intricated (6 colors, first one is red, last one is red). Each one has its dimensions bigger than the previous one by a ratio equal to the golden number.

For all the cool kids out there, this algorithm could help your draw some cool pentagrams :slight_smile: Prive message me if you need help on how to do so. Even golden spirals.

On a side note, I’ll try to work on one of those figures for my next submission. I’ll try to find out an easy way to fill a polygon with flowers. Maybe I’ll find something clever to do so and will share it here.

Spoiler Code 
/// INITIALIZATION ///

// First position and first base vector
    this.toggleFlowers(false);
    var baseVertex0={x:150 , y:25} ;
    var baseVertex1={x:150 ,y:20};
    
    this.moveXY(baseVertex0.x,baseVertex0.y); 


// Storing already computed vertexes
    var topVertex;
    
// Color stuff
    var colors=["red","pink","blue","white","purple","yellow"],
        nColors=colors.length;
    this.setFlowerColor(colors[0]);
    this.toggleFlowers(true);
    
    this.moveXY(baseVertex1.x,baseVertex1.y); // First segment drawn.



/// MAIN LOOP ///
for(var i=0;i<7;i++){
    // Given two vertices (order matters), topVertex creates a golden triangle
    // Beware of the alternated orientation of "pointed-up" and "pointed-left" triangles.
    topVertex =goldenTopVertex(baseVertex0,baseVertex1, (i) %2);
    
    // Draw the two lines to close up the figure
    this.moveXY(topVertex.x, topVertex.y);
    this.moveXY(baseVertex0.x, baseVertex0.y);
    
    // Set up for next iteration.
    // One of the base point never changes (bottom right). The other is set to be the new topVertex
    baseVertex0 = topVertex ;
    baseVertex1 = baseVertex1 ;
    
    // Change color for every new triangle
    this.setFlowerColor(colors[ (i+1) % nColors ]);
    
}


/// FUNCTIONS ///
function goldenTopVertex(vert0,vert1,orientation){
    // vert0 and vert1 are vector objects. Orientation is 1 or 0 (boolean) to determine if the 3rd vertex is above or below the vector.
    // Base of the triangle (oriented from vert0 to vert1)
    var baseVector={
        x: vert1.x - vert0.x,
        y: vert1.y - vert0.y,
    };
    
    // center of the base segment
    var midBasePointX = (vert0.x + vert1.x) /2 ;
    var midBasePointY = (vert0.y + vert1.y) /2 ;
    
    // heigth of a golden triangle = (base /2) * sqrt(5 + 2* sqrt(5))
    var relativeHeight =  Math.sqrt(5+2*Math.sqrt(5)) / 2 ;
    if(orientation){
        // returns the coords of the point at the correct height ABOVE the middle point to form a isosceles triangle with the base.
        return {
            x:midBasePointX - relativeHeight* baseVector.y ,
            y:midBasePointY + relativeHeight* baseVector.x
        };
    }else{
        // returns the coords of the point at the correct height BELOW the middle point to form a isosceles triangle.
        return {
            x:midBasePointX + relativeHeight* baseVector.y ,
            y:midBasePointY - relativeHeight* baseVector.x
        };
    }
}
(amazing!) Paint Work to visualize

I like to see this image as an infinite stack of golden gnomons (1), which forms an infinity of intricated golden triangles (2)

(1)
https://sea2.discourse-cdn.com/flex016/uploads/codecombat/_optimized/6a1/103/df11e4b31f_690x396.png

(2)
https://sea2.discourse-cdn.com/flex016/uploads/codecombat/_optimized/d4f/c48/c4e6e2a0e4_690x397.png

22 Likes
12

Here my spiral code!

Spoiler Code 
def drawSpiral(x, y, size, a):
    angle = 0
    step=a
    size1=size
    self.toggleFlowers(False)
    while angle <= Math.PI * 200:
        newX = x + (size1 * Math.cos(angle))
        newY = y + (size1 * Math.sin(angle))
        self.moveXY(newX, newY)
        self.toggleFlowers(True)
        angle += 0.2
        size1 += step
        step *= 1.01

self.setFlowerColor("random")
drawSpiral(self.pos.x,self.pos.y, 1, 0.1)
21 Likes
14
Context

Working on Apocalypse these days, I had to check straight lines paths from the position of my hero to the perimeter of the bombarded area, in order to find a safe line to walk along to safety.

So I tweaked a bit my code to make it a filling algorithm. It’s not efficient at all, but it gets the work done with any polygon (any array of positions object to represent the vertexes). It’s not a clever way to fill, it’s a brute force way to do it. It’s not even an homogeneous density of color, but still I like it.

The polygon doesn’t have to be convex which is cool. Any arbitrary star polygon can be filled, for example a Templar Cross

Code 
var center , vertexes , perimeter , CoM ;

this.vertexesOfRegularPoly = function(_center , _diameter, _nVertexes,_increment){
    var _vertexes = [] ,
        _iVertex ,
        _vertex={x:0,y:0} ,
        _angle ;
    for(_iVertex=0; _iVertex<_nVertexes*_increment ; _iVertex+=_increment){
        _angle = 2*Math.PI * _iVertex / _nVertexes ;
        _vertex.x = _center.x + _diameter * Math.cos(_angle) ;
        _vertex.y = _center.y + _diameter * Math.sin(_angle) ;
        _vertexes.push(_vertex);
    }
    return _vertexes ;
};

this.computePerimeter = function(_vertexes,_gridSpacing){
    var _iVertex = 0, _nVertexes = _vertexes.length ;
    var _vertex ={x:0,y:0}, nextVertex={x:0,y:0} ;
    var _dX = 0 , _dY = 0 ;
    var _side =[0,0] , _norm = 0, _iStep , _nSteps = 0 ,_adjustedGridSpacing = 0;
    var _perimeter = [] ;
    for(_iVertex=0 ; _iVertex<_nVertexes ; _iVertex++){
        _vertex =  _vertexes[_iVertex] ;
        _nextVertex = _vertexes[(_iVertex+1)%_nVertexes] ;
        _side= {x:_nextVertex.x - _vertex.x ,y:_nextVertex.y - _vertex.y };
        _norm=Math.sqrt(_side.x*_side.x + _side.y*_side.y) ;
        _nSteps = Math.floor( _norm / _gridSpacing ) ;
        for(_iStep = 0 ; _iStep < _nSteps ;_iStep++){
            // this.say(_vertex.x + (_iStep/_nSteps)*_side.x);
            _perimeter.push({x:_vertex.x + (_iStep/_nSteps)*_side.x ,
                y:_vertex.y + (_iStep/_nSteps)*_side.y});
        }
    }
    return _perimeter ;
};



this.fillPolygon = function(_perimeter ,_center, _booChangeColor){
    var _nPeri = _perimeter.length ,
        _iPeri = 0 ,
        _colors = ["red","pink","yellow","blue","purple","white"],
        _nColors = _colors.length ;

    this.toggleFlowers(false);
    this.moveXY(_center.x, _center.y);
    this.toggleFlowers(true);

    for(_iPeri = 0 ; _iPeri < _nPeri ; _iPeri ++){
        if(_iPeri % 2 ===0){
            if(_booChangeColor){
                this.setFlowerColor(_colors[(_iPeri/2) % _nColors]) ;
            }
            this.moveXY(_center.x, _center.y);
            this.moveXY(_perimeter[_iPeri].x, _perimeter[_iPeri].y);
        }else{
            this.moveXY(_perimeter[_iPeri].x, _perimeter[_iPeri].y);
            // this.toggleFlowers(true);
            this.moveXY(_center.x, _center.y);
        }
    }
};

this.centerOfMass = function(_vertexes){
    var _nVertexes = _vertexes.length ,
        _iVertex = 0 ,
        _CoM = {x:0 , y:0};
    for(_iVertex= 0 ; _iVertex< _nVertexes ; _iVertex++){
        _vertex = _vertexes[_iVertex] ;
        _CoM.x += _vertex.x ;
        _CoM.y += _vertex.y ;
    }
    _CoM.x /= _nVertexes ;
    _CoM.y /= _nVertexes ;
    return _CoM ;    
};

// Blue triangle
center = {x:38,y:75} ;
vertexes = this.vertexesOfRegularPoly(center , 10 , 3 , 1);//Triangle size 10
perimeter = this.computePerimeter(vertexes , 2);
CoM = this.centerOfMass(vertexes) ;
this.setFlowerColor("blue");
this.fillPolygon(perimeter,CoM, false) ;


// Red Square
center = {x:60,y:75} ;
vertexes = this.vertexesOfRegularPoly(center , 10 , 4 , 1); // Square, size 10
perimeter = this.computePerimeter(vertexes , 2);
CoM = this.centerOfMass(vertexes) ;
this.setFlowerColor("red");
this.fillPolygon(perimeter,CoM, false) ;

// White Pentagon
center = {x:82,y:75} ;
vertexes = this.vertexesOfRegularPoly(center , 10 , 5 , 1); // Pentagon, size 10
perimeter = this.computePerimeter(vertexes , 2);
CoM = this.centerOfMass(vertexes) ;
this.setFlowerColor("white");
this.fillPolygon(perimeter,CoM, false) ;

// Purple Pentagram
center = {x:38,y:50} ;
vertexes = this.vertexesOfRegularPoly(center , 10 , 5 , 2); // Pentagram, size 10
perimeter = this.computePerimeter(vertexes , 2);
CoM = this.centerOfMass(vertexes) ;
this.setFlowerColor("purple");
this.fillPolygon(perimeter,CoM, false) ;

// Yellow SpearHead
center = {x:60,y:50} ;
vertexes = this.vertexesOfRegularPoly(center , 10 , 3 , 1);//Triangle size 10
vertexes.push(center); // Adding a 4th vertex
perimeter = this.computePerimeter(vertexes , 2);
var focalPoint={x:(vertexes[1].x+center.x)/2 , y:(vertexes[1].y+center.y)/2};

this.setFlowerColor("yellow");
this.fillPolygon(perimeter,focalPoint, false) ;

// Pink hexagon
center = {x:82,y:50} ;
vertexes = this.vertexesOfRegularPoly(center , 10 , 6 , 1); // hexagon, size 10
perimeter = this.computePerimeter(vertexes , 1);
CoM = this.centerOfMass(vertexes) ;
this.setFlowerColor("pink");
this.fillPolygon(perimeter,CoM, false) ;

this.toggleFlowers(false);
this.moveXY(60, 63);
24 Likes
15

Drawing random lines was fun! Here’s the code:

@Feinty was right about that if you draw straight lines, you could get awesome designs. I tried his code but a little bit differently.

Code: 
// This level is a place for making flower art.
// The real goal is to experiment and have fun!
// If you draw something with at least 1000 flowers, you will "succeed" at the level.
this.setFlowerColor("red");
loop {
    var x = this.pos.x + Math.floor((Math.random() * 8) + 0.5 * 4.56);
    var y = this.pos.y + Math.floor((Math.random() * 8) + 0.5 * 4.56);
    this.moveXY(x, y);
    var X = this.pos.x - Math.floor((Math.random() * 8) + 0.5 * 4.56);
    var Y = this.pos.y - Math.floor((Math.random() * 8) + 0.5 * 4.56);
    this.setFlowerColor("purple");
    this.moveXY(X, Y);
    this.setFlowerColor("yellow");
    this.moveXY(x, Y);
    this.setFlowerColor("blue"); 
    this.moveXY(X, y);
    this.setFlowerColor("red");
    this.moveXY(x, y);
    this.setFlowerColor("pink");
    this.moveXY(X, Y);
    this.setFlowerColor("white");
}

Also, this is one of the only levels that contain peace and harmony. And showing some great artists showing off their talents on drawing.

I’d love to hear your opinions.

14 Likes
23

I redid my code.

I think it is better that the other ones I made.

Code 
// You know, this doesn't take too much effort to obtain. I like drawing straight lines.
// This level is a place for making flower art.
// The real goal is to experiment and have fun!
// If you draw something with at least 1000 flowers, you will "succeed" at the level.
loop {
    var x = this.pos.x;
    var y = this.pos.y;
    var one = Math.floor((Math.random() * 8) + 0.5);
    var two = Math.floor((Math.random() / 8) + 0.5);
    this.setFlowerColor("red");
    this.moveXY(x + one, y - two);
    this.moveXY(x - one, y + two);
    this.setFlowerColor("yellow");
    this.moveXY(x - one, y + one);
    this.moveXY(x + one, y + one);
    this.setFlowerColor("white");
    this.moveXY(x - one, y - two);
    this.moveXY(x - two, y - two);
    this.moveXY(x + one, y + two);
    this.moveXY(x - two, y - two);
    this.setFlowerColor("blue");
    this.moveXY(x + two, y + two);
    this.moveXY(x + one, y + one);
    this.moveXY(x - one, y - two);
    this.moveXY(x + two, y + two);
    this.setFlowerColor("purple");
    this.moveXY(x - one, y - one);
    this.moveXY(x + one, y - one);
    this.moveXY(x + two, y - two);
}

I did this so quickly by the command-c and command-v.

I kind of thought about it. Then…
“Its so easy to obtain this:”

Or that I call the garden of flowers.

And now for the code 
loop {
    var x = Math.floor((Math.random() * 19) + 8 * 8);
    var y = Math.floor((Math.random() * 20) + 8 * 8);
    this.setFlowerColor("yellow");
    this.moveXY(x, y);
}

See? Its really easy to try and obtain a Garden Of Flowers and you could change the color if you want to,
Yellow:

White:

Screen Shot 2015-06-25 at 12.59.15 PM.png791×500 312 KB

red:

blue:

purple:

pink:

14 Likes
24

Is it a hour glass it is hard to tell because many colors and shapes (mostly lines)

12 Likes
36

I tried to draw a “dinosaur” or a “dragon” but there wasn’t enough time for that.

Code 
loop {
    var x = this.pos.x;
    var y = this.pos.y;
    var one = Math.floor((Math.random() * 10) + 0 * 54.4);
    var two = Math.floor((Math.random() * 10) + 0 * 86);
    this.setFlowerColor("red");
    this.moveXY(x - one, y - two);
    this.setFlowerColor("yellow");
    this.moveXY(x + one, y + two);
    this.setFlowerColor("white");
    this.moveXY(x + one, y - two);
    this.setFlowerColor("pink");
    this.moveXY(x - one, y + one);
    this.setFlowerColor("blue");
    this.moveXY(x + two, y - two);
    this.setFlowerColor("purple");
    this.moveXY(x - one, y);
    this.setFlowerColor("random");
    this.moveXY(x + one, y);
    this.moveXY(x - one, y);
    this.moveXY(x + two, y);
    this.moveXY(x - two, y - 1);
    this.moveXY(x + two, y - 2);
    this.moveXY(x - 3, y - two);
}
15 Likes
43

Here just two simple fibonacci spirals.
Nothing special, but I think it looks kinda cool.^^

34 Likes
44

Tharin is our special snowflake.

KochFlake.jpg1001×638 287 KB

(Koch fractals; Uses code from the Snowflakes on the Ice and Fractalization levels)

41 Likes
45

Nice representation of how the Koch-Fractal interacts with itself. Note how the smaller fractal always completes the larger fractal.

17 Likes
46

Excuse me ,may i disturb you for a second?

and i have a question !!

what is skip doing in this function
’’'
this.drawPolyStars = function(center, radius, sides, skips, startAngle)

‘’’

what is skip??

13 Likes
47

draw Poly(gon) Stars is a combo function that draws both polygons and stars because the only difference between them is that the stars SKIP vertices of a polygon with the same number of sides. So skips is the number of vertices to skip. (for example: Sides 5 & skip 0 = a pentagon which becomes a pentagram if you skip 1 or 2 vertices. It draws the pentagon “backwards” if you skip 3. And draws nothing (a dot?) if you skip four.)

13 Likes
48

Beautiful! How long did it take you to make this master piece?

14 Likes
54

Hi everyone,

Here you have a contribution. Basically, takes a text string and writes it to the screen, according to size, color, text spacing and number of columns and rows.

Captura.PNG1341×596 329 KB

I’m currently adding more characters, such as numbers and symbols, and I want to add an option to color every character from an array.

I’ll post the code soon, i want to check some issues

UPDATE: If you want to see the code, go to the post: [Mountain Flower Grove] Flower Text Box

33 Likes
55

A heart floating on waves

2016-01-07_a-heart-floating-on-waves.png1015×569 91.6 KB

Just 2 functions were used: one for a heart shape and one for a cosine wave. Sorry, they may look pretty hacky.

Functions code 
def drawWave(y, x_first, x_last, dense=0.05, amp=10, rtl=False):
    X_STEP = 0.5
    self.toggleFlowers(False)
    def draw(x):
        cy = Math.cos(x*dense) * amp
        self.moveXY(x, y + cy)
        self.toggleFlowers(True)
    if rtl:
        x = x_last
        while x >= x_first:
            draw(x)
            x -= X_STEP
        return
    x = x_first
    while x <= x_last:
        draw(x)
        x += X_STEP

def heart(x, y, scale=1):
    self.toggleFlowers(False)
    PI = Math.PI
    def xy(t):
        rad_in_deg = PI/180.0
        coef = 0.01 * (-t*t + 40*t + 1200)
        return (coef * Math.sin(t*rad_in_deg), coef * Math.cos(t*rad_in_deg))
    def draw(t, mul=1):
        current_x, current_y = xy(t)
        current_x *= scale*mul
        current_y *= scale
        self.moveXY(x + current_x, y + current_y)
        self.toggleFlowers(True)
    for t in range(61):
        draw(t)
    self.toggleFlowers(False)
    for t in range(60, -1, -1):
        draw(t, -1)

The specific function arguments for the picture is a secret of art. The main idea is that just slightly varying parameters of shapes you can get something interesting.

Bonus: heart curves inspiration link

27 Likes
56

cool flower art:grinning:

11 Likes