Troubleshooting a JavaScript project involving arrays: Let it pour!

I'm a beginner here and currently enrolled in the Khan Academy programming course, focusing on Javascript. I've hit a roadblock with a project called "Make it rain," where the task is to create raindrops falling on a canvas and resetting back at the top. Using arrays, I've successfully generated drops at random positions and made them fall through the canvas. However, I am facing difficulty restarting them at the top due to the array usage. Here's my code:

var dropX = [40];
var dropY = [0];
var snowX = [40];
var speed = 1.5;
var ex = 0 ;
var i = 0;
var fall = dropY[i];
noStroke(); 

var rain = function (){ 
 var fall = dropY[i];    
 var ok = dropX.length;     
for(var i = 0; i<100; i++) {
    if (fall<2100){
    background(192, 224, 237);
    fill(23, 123, 143);
    ellipse(dropX[i],dropY[i],5,5);
    fill(224, 213, 213);
    rect(snowX[i],dropY[i],5,5);
    dropY[i]+=speed;
    dropX.push(random(0,400)); 
    dropY.push(random(-1650,0)); 
    snowX.push(random(0,400));
}
}

for (i = 0;i<100; i++)    {
    i++;
    fill(45, 136, 189);
    ellipse(dropX[i],dropY[i],5,5);
    fill(255, 255, 255);
    rect(snowX[i],dropY[i],5,5);
}};

draw = function() {
rain();
};
Check out my project here!

The Khan Academy code editor uses processing.js from what I understand. Thank you for any assistance or advice!

Answer №1

Check out these statements:

let dropX = [40];
let dropY = [0];
let snowX = [40];

All of them are creating arrays with a single element. dropX[0] and snowX[0] are both set to 40, while dropY[0] is set to 0.

Also, make sure your loops iterate from 0 to 100, not just up to 40;

To correctly initialize your arrays, use the following code snippet:

let dropX = [];
let dropY = [];
let snowX = [];
let i;

for(i = 0; i < 100; i++) {
  dropX[i] = 40;
  dropY[i] = 0;
  snowX[i] = 40;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Facebook like button not consistently loading on the website

Getting ready to release my new iOS app that creates customized mp3s and distributes them through a CDN-hosted webpage. Check it out at . I've integrated the XFBML code from http://developers.facebook.com/docs/reference/plugins/like/ because it' ...

"Encountering issues with toggle effect in nested divs when utilizing an Angular Directive -

I have included a link to the Plunker. Unfortunately, I am facing issues with accessing the elements .gc and .mc. On the other hand, the class .bc is functioning properly. My goal is to implement a toggle effect on them based on hierarchy: BroadCategory ...

The declaration for "Control" is not present, possibly being restricted by its protection level

I'm really struggling to get the jQuery datepicker working in ASP.NET. I've tried various examples, but nothing seems to work for me. Even though I'm fairly new to ASP.NET, I am learning quickly! Here is the script I am trying to use: < ...

Locate all elements in an array that contain a particular value for a specific key using Javascript

In my JavaScript data, I have two arrays: ARRAY ONE: [ TextRow { v_id: 3000 }, TextRow { v_id: 3001 }, TextRow { v_id: 3002 } ] ARRAY TWO: [ TextRow { s_id: 'S001', v_id: 3000, type: 'control' }, TextRow { ...

Transforming Javascript into Typescript with node modules in Visual Studio 2015

After developing a JavaScript web app using npm and webpack, I successfully converted all the .js files to .ts using the PowerShell command found here. Now, I am looking to transition to a VS2015 TypeScript project but struggling to find guidance on how ...

StopDefault and JSON Placement

We have a form that sends data to an external domain using JSONP to avoid cross-domain limitations. Everything is functioning properly except for preventing the default form submission that triggers a page reload. Below is the HTML code for the form: < ...

Trouble with fill() function

Check out this JavaScript code snippet I wrote: function Show(output, startX, startY){ var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); context.arc(startX, startY, 3, 0, Math.PI*2, true); context.fill( ...

Discover the steps for dynamically integrating ionRangeSliders into your project

Recently, I integrated ionRangeSlider to display values to users using sliders. To set up a slider, we need to define an input tag like this: <input type="text" id="range_26" /> Then, we have to use jQuery to reference the input tag's ID in or ...

Utilizing Numpy Arrays: Extract multiple values at specific intervals

Is there a way to extract multiple values at once from an array in Numpy using a one-liner? For example, if we have an array: a = numpy.arange(10) > array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) I want to extract 2 values, skip the next 2 values, and then ext ...

Exploring the testing capabilities of Angular JS in conjunction with third-party libraries such as

When testing an angular controller that utilizes an external library like Google Analytics event tracking, how can you approach it? For instance: $scope.showVolumn = function() { ga('send', { 'hitType': 'event', ...

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...

Using pointer arrays of characters in the C programming language

I am attempting to create a multi-dimensional array of strings, where each index in the main array holds another array of strings. char Example[0] = { "array", "of", "strings"} Example[1] = { "array", "of", "strings2"} Example[...] = { ... } I have consi ...

Utilizing props to transfer data between components in ReactJS

I have a React application where I am binding text values when a specific div is clicked. However, I am now faced with the challenge of passing these text values to another component using props. This is what my code looks like: class PostOptionBar exten ...

Using jQuery to retrieve the nth child from a table after dynamically creating it with AJAX

When using AJAX in the code below, I fill and create simple data after retrieving it. $.ajax({ method: 'GET', url: '/analyzePage/searchTag/' + tagName, contentType: false, processData: false, success: function (data ...

How can I verify the status of an occasional undefined JSON value?

There are times when the JSON object I'm trying to access does not exist. Error: Undefined index: movies in C:\xampp\htdocs\example\game.php In game.php, I'm attempting to retrieve it from the Steam API using this code: $ ...

Any tips on how to retrieve my mesh that has disappeared off the screen?

Struggling to find a way to detect when an element goes off screen, can someone provide guidance? My project utilizes WebGL along with Three.js. ...

When information is provided, record the values in a separate input field

I'm struggling to come up with an appropriate title... Here's the issue: if a user inputs anything into the "Accompanying Person" field, the "Accompanying Person Price" field will automatically be set to 260€. I have no clue on how to achieve ...

Trigger JavaScript keypress event on keypress

In my code, I have a function called addMoney() that is triggered by pressing Enter in an input field: $('body').on('keypress', 'input[type=text]', function(e){ if(e.keyCode==13){ var val = $('input[type=te ...

Show a collection of files in a table format

Here is the current code I have: index.html <!DOCTYPE html> <html> ... </form> </div> </body> </html> And here is my code.gs function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } ...