Gabriele Ferro Home

#100DaysOfCode Weekly Recap 03-04

During these weeks I have continued to study Processing using the p5.js library.

The basic idea of #Processing was to simplify writing code to draw in a canvas.

I strongly recommend it to anyone who wants to unleash his creativity on the web by writing a few lines of code.

The description that both sites provide:

"Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts."

"p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!"

Day 16 - Animations with p5.js

I'm still following the Coding Train YouTube playlist on p5.js and the Codecademy course but I finally reached the interesting part of the subject!

Now I can draw circles that move at random.


\irony OFF

Day 17 - Conditional statements and several functions

In particular: the random function, the perlin noise function, the map function, and createGraphics function.

I also studied the difference between the mousePressed function and mouseIsPressed.

Day 18 - Small progress today

OOP with ES6, Classes, constructor arguments, array and loops with p5.js objects

Day 19 - I continue the Codecademy course on p5.js

rectMode(), ellipseMode(), angleMode(), radians(), translate(), rotate(), scale(), and shear().

I also learned how to group style and transformation functions with push() and pop()

Day 20 - I learned how to interact with the canvas

using the keyboard and mouse and how to embed external images and videos.

Day 21 - I'm almost finishing studying the p5.js library on Codecademy.

Preload and filter functions.

I also learned how to use p5.js to manipulate images and videos, down to the pixel with the functions get, set and updatePixels !

Day 22 - I have finished (finally!) the course on Codecademy about the p5.js library

I have created a sketch. Just for fun.

When you click in the canvas a random ball is created.

The balls are semi-transparent and they bounce against the walls of the canvas.

The speed of balls is relative to their radius, the smaller the ball the faster it moves.

I also added a little random variation when the balls hit the edge of the canvas, so that they don't all follow the same trajectory.

Day 23 - I finished this YT playlist on p5.js

I studied the 7th part that concerns: the deletion of objects in an array, interactions such as checking if a point is inside the circle and the communication between two objects.

Day 24 - Today I learned a lot of useful and interesting stuff

Daniel Shiffman has created numerous playlists that teach the use of the p5.js library, each covering different topics.

I am now following this YouTube playlist.

In particular, I learned how to :

Day 25 - CSS with P5.js

I am still following the playlist.

Day 26 - I can't believe I'm still studying p5.js library

Day 27 (Today) - I finished the playlist n°8 of Coding Train on p5.js

This playlist taught me how to interact with a web page through the p5.js library ! Now, I know how to add, change and remove elements in both the canvas and the web page.

I have created a sketch for fun.

It uses a color picker to choose a base color and then with the sliders we can also change each RGB channel. Pushing the button, the background color will be replaced with the one in the preview.


These two weeks have been very intense for me.

At work I have an evening/night shift so I have to organize my days as best I can and it's often difficult to find the right amount of free time. Practically non-existent.

I've tried to organize my days in the best possible way to dedicate at least two hours to programming and one hour to guitar practice.

I've succeeded, but I always feel like I'm rushing and the stress is eating my soul.

I need to lower the pace since there is no vacation on the horizon. Also, no one is chasing me.

June 2024


Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.