Grasshopper Custom Functions

Grasshopper uses a few custom functions to make using code for the first time easier. The information below will likely be a bit confusing, or overwhelming, if you are just starting your coding journey. Don’t worry if you don’t understand everything (or anything), this is just to provide some additional information.

print()
Definition: This function takes the argument, the part inside the parentheses, and prints it out, then moves the cursor (the Grasshopper) to a new line. It accepts strings, numbers, or variables that are holding strings or numbers.

Example:
Code: print('Hello world')
Output: Hello world

How to replicate outside Grasshopper: console.log() is a JavaScript feature that creates similar behavior to the print() function. You’ll need to open up your web browser’s console in order to see the output of console.log().

pickRandom()
Definition: This function takes arrays or numbers, or variables holding numbers or arrays, and selects a random element. pickRandom() doesn’t do very much on its own, but can be useful when combined with other functions.

Example:
Code: pickRandom(5)
Output: (selects a random number between 1 and 5)

Code: pickRandom(['hopper', 'hipper'])
Output: (randomly selects ‘hopper’ or ‘hipper’)

How to replicate outside Grasshopper: A function definition for pickRandom() could look something like the below. Don’t worry if you don’t understand all the code below, we don’t teach a lot of it yet.

function pickRandom(argument) {
  if (typeof argument === 'number') {
    return Math.floor(Math.random() * Math.floor(argument)) + 1;
  }
  if (Array.isArray(argument)) {
    return argument[Math.floor(Math.random() * argument.length)];
  }
}

drawBox()
Definition: This function takes colors and turns them into boxes (SVG rectangles). It can take strings that are colors, or variables holding strings that are colors.

Example:
Code: drawBox('red')
Output: a red box

How to replicate outside Grasshopper: This function requires an SVG environment in order to create shapes. We’ve created an example environment in the Animations Playground. You can learn how to re-create this function by looking at the drawSquare and Rainbow Hopper puzzles.

drawBoxes()
Definition: This function is very similar to drawBox(), but rather than colors it takes any string and turns each letter into a colored box. It can take strings, or variables holding strings.

Example:
Code: drawBoxes('red')
Output: a red box, then an ebony box, then a dandelion-colored box.

How to replicate outside Grasshopper: This function also requires an SVG environment. We’ve created an example environment in the Animations Playground. It’s easiest to reference the drawBox() function inside of the drawBoxes() definition. The code might look something like:

function drawBoxes(aString) {
  let colorObject = {a : 'amber', b : 'blue', c : 'cyan', ...}
  for (let element of aString) {
    drawBox(colorObject[element]);
  }
}

newLine()
Definition: Moves the Grasshopper cursor to a new line. It doesn’t take any argument.

How to replicate outside Grasshopper: This function is pretty specialized to Grasshopper. The idea of a ‘cursor’ in the output is something we added to help illustrate how code runs. To replicate this you’d need an SVG environment (like the Animations Playground), a cursor to move, and a position to move the cursor to that keeps track of its current ‘line’.

13 Likes
Backpack Mistake explainer
Pack Your Bag explainer
Complete the Picture explainer
State Your Goal explainer
Update Your Progress explainer
The Final Ascent explainer
Image Decoder explainer
Describe the Numbers explainer
Magic Answers explainer
Color Cover explainer
Caped Crusader explainer
Two at a Time explainer
Nickels and Dimes explainer
More Band Names explainer
Gone Solo explainer
Blue 222 explainer
Not Quite White explainer
Invisible Man explainer
Post Climb Postcard explainer
Hat Trick explainer
Plus and Minus explainer
Lock Box explainer
Binary Branching explainer
Greater or Lesser explainer
Color Keeper explainer
How Blue Can You Get? explainer
Console Loggin' explainer
More Number Operators Explainer
Grasshopper's playground functions
Iam beginner want to ask console.log
Hoping It Works explainer
Playground missing .on, .svg, copy code
I feel confused
Going Green explainer
French Flag explainer
Drawing with Loops explainer
Loops of Color explainer
Tip Calculator explainer
Choose a Line explainer
Array of Colors explainer
Coffee Run explainer
Quick French Flag explainer
Drawing Boxes explainer
Gabonese Flag Helper explainer
How to use this
I feel confused
Keep It Up explainer
String Looping explainer
French Flag Fixer explainer
Keep It Up explainer
Feet Don't Fail Me Now explainer
Bolt Out of the Blue explainer
Comfort Food explainer
In the Middle explainer
Get More Supplies explainer
Going Green explainer
Make a Name for Yourself explainer
Custom Colors explainer
Band Names Generator explainer
Happy New Year explainer
Counting with Loops explainer
Longer Rainbow explainer
String Looping explainer
Open The Lock explainer
Simply More Math explainer
Modifier Math explainer
Guessing Game explainer
Flip a Coin Again explainer
Stoplight explainer
Flip a Coin explainer
What's in a Name? explainer
Silly Sentences explainer
Haiti to Ukraine explainer
Today is the Day explainer
A Dash of Random explainer
Gabonese Flag Shortcuts explainer
Gabonese Flag Helper explainer
Gabonese Flag explainer
Checkerboard explainer
Relevance and Syntax
The ready functiond
Consolation Puzzle explainer
Room for Growth explainer
Incremented Decremented explainer
A Thing or Two explainer
More or Less explainer
Danish Flag Fixer explainer
Animal Noises explainer
Animal Groups explainer
Checkerboard Helper explainer
Add and Subtract explainer
Operator Opportunity explainer
Rainy Day explainer
Shorter Rainbow explainer
Even Shorter Rainbow explainer

To avoid potential confusion later on, can I suggest replacing print(), etc., with gh.print(), etc.? That will make it clear that these are not JavaScript built-in functions.

–Scott.

Hey @Scott_McNay,

Thanks for the suggestion! We agree we need to make it a bit clearer that these are custom Grasshopper functions within the app (we’re working on that). Part of the aim is to make it very simple for new coders to start seeing their outputs as quickly as possible, hence the very intuitively named functions.

H :slight_smile:

3 Likes

BTW, I’m not convinced that pickRandom(2) works as expected; see below for what appears to be typical results:

Hey @Scott_McNay,

Is the issue the dominance of 1’s selected? That’s expected for the small sample size, I’ve gotten a bunch of 2’s with the same code:

Or is the issue missing 0’s? pickRandom() starts at 1, rather than 0, so it’s expected for there not to be any 0’s.

H :slight_smile:

Hi @Grasshopper_Heather,

Maybe the issue is runs – seems like unusually long runs of the same digits. It just doesn’t ‘feel’ random. Or maybe I’m just deceived by only two values.

It turns out to be REALLY hard to make a random number generator which generates numbers that really are random, much less pass all of the formal tests of randomness. This is how hard: https://www.google.com/amp/s/www.sciencealert.com/gamers-massive-experiment-shows-einstein-got-reality-wrong/amp

I don’t understand how pickRandom() is generating numbers in In the Middle; they are all separated by what appears to be 30 units. When I use position directly to place circles, it acts like the value is 0, but pickRandom(0) always gives a result of 1.

–Scott.

To make a number that the output is 0 or 1, you need to make variables like me (x and Random),
use for loops to set random and use random - 1 to print what you want. Use pickRandom(any number) to set Random to any number from 0 to that number - 1.
If you don’t understand, I have a picture for you:


-Yusril

So, i were practicing JS (outside Grasshopper’s playground since, y’know) and i noticed many functions i got used to weren’t natural from JS, so, where could i find code examples for such functions like pickrandom and drawbox(es)?

1 Like

I’ve moved your post to this thread. Check out Heather’s post at the very top.

There’s some code you can use to make your own pickRandom() function. As for drawBox, there are some lessons in the Animations course that get you most of the way there: drawSquare and Rainbow Hopper.

–Frankie

1 Like

Shouldn’t you add definition of math,Array(that can be added with .isArray()), and etc to the app Grasshopper?

hey guys,
well I tried to use for example the drawBox in Explorer, but I didnt identify it as a Command, so its a ready Funktion , then what benefit should I get when functions used here arent identified in the real language ?

I’ve moved your post to this thread. Check out Heather’s post at the very top. There, she lists a number of custom functions that we use in Grasshopper, including drawBox().

The custom functions we use are tools for teaching concepts. For example, drawBox() is used to illustrate how a function is called with an argument, and how the function will do different things depending on which argument is passed into it. For example, drawBox(red) will draw a red box, and drawBox(blue) will draw a blue box.

In Fundamentals I, when beginning your journey in programming, learning these concepts is more important than learning JavaScript’s built-in functions. In Fundamentals II and later courses, you will learn more about these.

I’m really happy to hear that you’re experimenting and using JavaScript outside of the lessons! If you’d like a place to freely explore Grasshopper’s custom functions, I recommend checking out our Code Playground, which you can access from the main menu button at the top-left of the screen.

Good luck on your journey!
Ben

i am struck at last 4 percent