Best代写-最专业靠谱代写IT | CS | 留学生作业 | 编程代写Java | Python |C/C++ | PHP | Matlab | Assignment Project Homework代写

程序代写|Waving dots

程序代写|Waving dots



Where do I submit?

There are eight graded assignments like this on the course. This one and three more make up the midterm assignment and are submitted in week 10. Nevertheless, we strongly recommend that you complete this graded assignment in the week it has been assigned and not wait for the midterm submission. You need to master the material included in these before you continue with the next weeks. Once you complete it, save it somewhere safe, do not share online using the webspace and upload it with the others when prompted in week 10.

Creating the dots

Step 1: Amend the draw() function to create a 20 x 20 grid of dots. These dots should be equally distributed within the canvas. The dots should size equally to half the size – a variable already provided. You should use a nested loop for width and height and call a new function wave(params) where you pass all the necessary parameters (params). All parameters for your wave() function should be calculated within the nested loop.

Step 2: For each of the dots generate a noise value and use it as a colour fill. You could use random(), randomGaussian() or noise(). What parameters you use should be your choice.

Step 3: Create a new colour using color() (see p5.js) and pass the noise value as a parameter. Make sure to pass the new colour as a parameter to the wave() function.

Creating the wave

Step 4: To generate the wave you need to calculate the phase angle and use rotate() and translate() in your wave() function to animate. The angle is calculated using the x and y coordinates as well as the frameCount so that the animation change over time. Make sure you scale the input parameters of the wave function appropriately so that you get organic values out of it. Do not use framerate() to adjust the animation.

Step 5: Add interaction by adding mouseX to the calculation of the angle. The wave should have a variable phase when the mouse moves as seen the example above.

Step 6: Implement two of the ideas for further development. Points given to ambitious learners.

Step 7: Write a commentary (i.e. 200 words and include it at the top of your sketch.js) explaining why you used a particular noise function. Also, justify the use of map() and contrain() if needed. Finally briefly talk about the extensions.

Step 8: Make sure your code runs as expected. Review the Console for errors.

Ideas for further development

  • Make it your own by changing the colors and style.
  • Use line() to connect the dots

Marking rubric

[2 point]: Program runs and without errors?

[1 point]: dots are of the right size and spread on canvas.

[2 point]: Colours change randomly using appropriate function.

[1 point]: wave() function has all necessary parameters.

[2 point]: wave move organically over time.

[1 point]: mouseX affects the phase angle of the wave.

[2 point]: Has learner implemented any of the ideas for further development?

[4 points]: Code presentation: formatting, comments, variable naming.

[2 point]: Commentary included?