Week 2 Homework

Convert a previous ICM or other Processing sketch to p5.js. If you feel up to it, consider modifying or adding one element of the sketch to address the new context of the web. We have yet to talk about much web specific functionality (mobile, touch, various browsers, etc), but think of this more as a conceptual exercise than a technical one. How might you change the content of your sketch to acknowledge or celebrate the fact that it’s running on the web? Here are some examples of Processing examples converted to p5.js and then there are also all of the ones I've included here too.

Put your work online with a simple HTTP server using Servi and add a link to it below. Technically this assignment does not require servi so if you prefer to host your p5 sketch elsewhere that is quite ok as well!

This week I also suggest reading Long Live the Web by Tim Berners-Lee (2010) for some inspiration.

Questions

• Why isn't it necessary to declare variables inside the object or function? (E.g. P5.js ref: Object 2). function MRect(iw, ixp, ih, iyp, id, it) { this.w = iw; this.xpos = ixp; this.h = ih; this.ypos = iyp; this.d = id; this.t = it;
• what is this.? Why does everything inside a function seem to need it?
• How can I covert this code "line l = (line) lineArray.get(i);" to p5.js..? Please explain more about converting 'ArrayList' to p5.js.
• How can I convert 'ArrayList()' into JS? And also how can I declare a 'Class' which include 'void somethingFunction()'?
• The sketch background changes when I resize my window. Also the sketch begins from where it was left before resizing the window, so a part of it seems to be missing as it progresses ahead.(Upasana)
• How can I set the local web server?(Upasana)

Your homework links

• Your name here - some comments about what you did
• AJ
• Changyeon Abstract drawing of "Rainy Day"
• Cole Tried to port a Processing sketch that used a slider to control the size of a satellite. Somehow the basics transferred to p5, but I could get the color or the interactivity to work.
• Jingwen
• Karthik The classic snake game. It is failing to eat its prey.(EDIT: Works now)
• Marc Just a quick port
• Maya I was surprised to see how similar the syntax is...though found when they do differ, it can be slight or significant. In my sketch I used an image, text and random assignment of colour to create some 1920 dazzle.
• Pat
• Martin
• Ross
• Sehwan - [Interactive Circles] (http://104.131.178.117:3000/week2/index.html) It disappears if mouse goes till the edge of the right side. The original processing-code version does not. A bit Weird.
• Soni I could not convert to p5.js as completely same as what I did with processing..
• UpasanaSpiral
• Xi-crazy owl
• Yifan Moving Ellipse
• Luke Poem