• Parametric Design
• 2D
• Variables II

Variables II

Arrays

As our concepts are getting more complex, we need to be able to store more information. Imagine your creating a shape with the vertex command. Depending on the number of points of the shape, this will take a lot of variables. To overcome this we can use arrays. Arrays are another type of variable which can hold multiple values. Arrays can also be nested. As an example, lets create an array of points, each point is stored as another array [x,y]:

const points = [
  [0, 0],
  [10, 0],
  [10, 10],
  [0, 10]
];

To access an element inside an array we use its so called index:

points[0] // [0, 0]
points[0][0] // 0

The index always starts with 0 not 1. We can also add elements programmatically:

const sketchWidth = 400;
const sketchheight = 400;
const points = []; // empty array
for (let p = 0; p < 20; p += 1) {
  points.push([
    Math.random() * sketchWidth,
    Math.random() * sketchHeight
  ]); // adds an element to the end of the array
}

Array example

We create a random shape (array of [x,y]), we then draw this shape multiple times, but with increasing opacity, to create the gradient effect:

/lectures/2d/variables2/arrayexample/sketch.jsView on GitHub

Sometimes we might not know how long our array is exactly: array.length returns the length of the array.

More infos on array features can be found here.

Objects

Storing information in arrays can get confusing at a certain level. To keep things organized we can use objects. Objects are very similar to arrays, but instead of a number-based index, objects use a string-based index:

const point = {
  'x': 0,
  'y': 0
};

To access the elements inside of an object we use the same syntax as for the arrays, but use the strings instead of numbers:

point['x'] // 0

And we can also use a short form (this only works if the key has no spaces or other special characters):

point.x // 0

And to make it a bit more confusing, we can store objects in arrays, and arrays in objects:

const points = [
  {x: 0, y: 0, vel: [0, 0]},
  {x: 10, y: 0, vel: [1, 0]},
  {x: 10, y: 10, vel: [1, 1]},
  {x: 0, y: 10, vel: [0, 1]}
];

points[1]['vel'][0] // 1

Object example

Similar to the array example, we create a list of points, in addition to x/y, we also store a velocity, the velocity of each point, to move each point after each loop-cycle. To stop the points from leaving the canvas, we simply reverse the velocity (*-1), when the position is outside the canvas:

/lectures/2d/variables2/objectexample/sketch.jsView on GitHub

Noise

We already learned about the random() command. The noise command also returns random values. When our sketch starts a 3D-space of random values is created. We can then pick individual values from this space. Unlike the random() command, the values in this "random" space represent a smooth noise field (see visualisation below).

function setup() {
  const noiseValue = noise(0,1.5,1);
}

If a new random field is required, the noise values can be regenerated through the noiseSeed command:

function setup() {
  noiseSeed(5);
}

/lectures/2d/variables2/noise/sketch.jsView on GitHub

Reminder: The smooth curves of the noise field only become visible if you use small coordinates to retrieve the values.

Inspiration: Moving through the cloud

/lectures/2d/variables2/noiseani/sketch.jsView on GitHub

Back to top