Playground missing .on, .svg, copy code


I don’t know which category to choose :slight_smile:
I tried doing stuff in playground and I found:

I can’t add note like you. (Ex.: /Welcome to the Playground/)

There are things that aren’t explain.(ex.: .push(), .pop(), .slice() )

There isn’t possibility to add .on(), because of missing it and missing .svg, .append.

You could make possibility to copy code at least from playground. :wink:

EDIT: I found in first post in this section the website where we can use .svg and .d3 library, but could you intergrate it in app? Because I wanna do things like programing instead of playing games when I am waiting at hospital :slight_smile:
And sometimes my app grasshopper crash and lagging when I am doing exercises. (Xiaomi Redmi Note 4X)
And of course i like this app like the thematic exercises.

Hi @Vlcina,

For comments, instead of /Welcome to the Playground/, try /*Welcome to the Playground*/.

I can’t say anything about the rest, since I haven’t gotten that far yet.


P.S. Are you talking about the Animation Playground, which I haven’t looked at yet?

Hey @Vlcina,

Thanks for the feedback and suggestion! We’re looking into how we can add D3 elements into the playground.

H :slight_smile:


Yes @Scott_McNay , I thought

/*Welcome to the Playground*/

but i write it here like normal text not like preformated text. In playground is not able to write / and then *.

I am talking about
Animation Playground
only at EDIT first line. :slight_smile:

Hi @Vlcina,

Oh, I keep forgetting that the interface blocks things like that. I’ve expressed my opinion elsewhere that comments should be introduced early.


How can I create a .attr() function in the playground. I tried the create function option but it didn’t work

Hey @Canna_Creator,

We’re still working on improving the Grasshopper playground — right now it doesn’t include all the features we’re teaching in puzzles (especially from the Animations and Animations II courses), including .attr().

In the meantime, you can play with your SVG and D3 skills via this web-based playground. You can find out more about it here.

Heather :slight_smile:

Why on Earth is the d3 options not available in the background. The animations II should be there

1 Like

Hey @Joshua_Smith,

Thanks for the feedback! We’re still working on improving the Playground — including adding adding in Animations skills.

In the meantime, we’ve created an Animations Playground, that allows you to create SVG shapes and manipulate them using the D3 library.

Thanks for the feedback — it does help us priortize new features!
H :slight_smile:

1 Like

Why I can’t use certain things on the playground, such as .on click and slice for example, and pretty much all of the code i would need to build a game, and why I can’t build a game on grasshopper?

Hi, I just moved your post into this thread with the same question.


1 Like

I’m messing around with the playground and I’m wondering if there’s a way to interact with it after you set everything up, like .on(‘click’).
I’m also wondering if you can make it choose randomly, but not the same thing until it resets, like having it deal cards.

This page explains how to randomize an array.

  • pick a random item
  • swap it with the last element
  • now the last item is “shuffled”
  • pick a random item from the “unshuffled” items (any except the last 1)
  • swap it with the 2nd to last element
  • now the 2nd to last item is “shuffled”
  • repeat until each item has been swapped with a random remaining item

The process involves swapping values in the array. If you have 2 variables, a and b, what commands would you use to swap their values?

a = b;
b = a;

This does not quite work. Let’s see what happens if we start with a = 5, and b = 10.
a = b means a is now 10. Then we run b = a and we get b = 10 because a was just set to 10. That leaves us with a = 10 and b = 10.

We need to temporarily store the original value of a in another variable. You can think about this as having an apple in one hand and a banana in the other. If you aren’t allow to juggle them, and each hand can only hold 1 item at a time, then you need to set one of the fruits down on a table to free up one of your hands. You can set the apple on the table, put the banana in the apple-hand, then pick up the apple from the table with your banana-hand.

t = a; table gets the apple
a = b; apple-hand gets the banana
b = t; banana-hand gets the apple off the table

This code will work in the playground, except it’s missing the .length key. If you know the number of elements in your array, you can substitute the number. The details are a little tricky because you have to remember that arrays start numbering from 0, and the pickRandom() function (which is a custom function) picks a number starting from 1. That’s why there’s a +1 and a -1 in the rando value.

let deck = [1, 2, 3, 4, 5];

for (let i = deck.length-1; i > 0; i--) {
    let temp = deck[i];
    let rando = pickRandom(i+1)-1;
    deck[i] = deck[rando];
    deck[rando] = temp;

In modern JavaScript, you can swap values without creating your own temp variable.

[deck[i], deck[rando]] = [deck[rando], deck[i]]

You can even do it with more than 2 variables.

let a = 1;
let b = 2;
let c = 3;
let d = 4;
[a,b,c,d] = [d,a,b,c]

This will result in:
a === 4
b === 1
c === 2
d === 3


1 Like

.include and .replace are not in playground?
What to do?