Official Flower Grove Topic


#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.

It is absolutely okay to post your code that produced the picture here, but you don’t have too. After all there is something to learn for everybody here. But please use the [details]-tag so it is nicely hidden. This is mainly a picture-topic.


As a start look at this first ever published picture from this level, created by Nick, one of the founders of CodeCombat.


[Mountain Flower Grove] Flower Text Box
#2


#4

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


#5

Polar function:


Can you guess the formula?

Even though it’s cut off, this is the best screenshot I have since Code Combat is ridiculously laggy.


#6

A prettier polar function:


This one is simpler.
I probably used sin and cos too many times in the first one.


#7

Lots of fun with straight lines!


#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);
}

#9

I liked the idea of Feinty. I tweaked it a bit and obtained this :

**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 ;
}

#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://discourse-cdn-sjc1.com/business/uploads/codecombat/_optimized/6a1/103/df11e4b31f_690x396.png

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


#12

Here my spiral!

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)

#13

It has been a while since we had a flower drawing post, so here is my latest fun.

I wrote and used two functions to lay every flower: draw-spiral or draw-polygon (inscribed).

"I knew right from the start You'd put an arrow through my heart" (Ratt - "Round and Round")

#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);

#15

Drawing random lines was fun! Heres what I got:


@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.


#16

Guess who these guys are:

Though I keep running out of time to draw them. If anyone wants these heroes, the source for building the code is here. There are also other heroes, but I can’t use them.


#18

I tried to make the sierpinski triangle (degree 4), but there was not enough time for that :stuck_out_tongue:


How it should look like:


#19

Another hard-working thing (or not so hard working because of code):

(not so hard working) Code
this.setFlowerColor("red");
loop {
    var x = this.pos.x + Math.floor((Math.random() * 10) + 0.5637);
    var y = this.pos.y + Math.floor((Math.random() * 10) + 0.9240);
    var X = this.pos.x - Math.floor((Math.random() * 19) + 13);
    var Y = this.pos.y - Math.floor((Math.random() * 19) + 13);
    var moveX = this.pos.x - Math.floor((Math.random() / 8) + 1.099);
    var moveY = this.pos.y - Math.floor((Math.random() / 8) + 1.099);
    this.moveXY(x, y);
    this.moveXY(X, y);
    this.setFlowerColor("yellow");
    this.moveXY(x, Y);
    this.moveXY(X, Y);
    this.setFlowerColor("blue");
    this.moveXY(moveX, y);
    this.moveXY(x, moveY);
    this.setFlowerColor("white");
    this.moveXY(moveX, moveY);
    this.moveXY(X, moveY);
    this.setFlowerColor("pink");
    this.moveXY(moveX, Y);
    this.setFlowerColor("purple");
    this.moveXY(x, y);
    this.setFlowerColor("red");
}


See, I told you that it is quite easy.
I think that this is prettier than the other one because it looks like many arrows that is going up slowly.


Heres another one:

It kind of looks like a line.


#22

Now try to color it correctly :thumbsup:

And there will never be enough time for a Sierpinski triangle.


#23

I redid my code and got this:

:smile:

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:


red:

blue:

purple:

pink:


#24

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


#26

Uh… what was your goal to create (mostly lines)