Tool: P5js

Project:

After looking at many cases, I thought I should choose a visual effect that I could describe in words. This means that I can logically understand how it works, so that I have a starting point and I can break it down and complete it step by step.

Remake

At this stage I have completed a dynamic drawing of the graphic. All I have to do is add the colours and I’m done!

It is also possible to make changes to the code such as the number of ellipses.

Hacks

P5js is usually used to create graphics and animations, and is more at the discretion of the coder. So my idea is to secondary process the graphics or animations and use it to create an image processor.

My rule is.
– Start with the basics and iterate: start with the most basic properties of an image, such as pixels, dimensions, size, colour. This allows to first understand and grasp how P5.js works at the most basic level.
– Add complexity and functionality: Build on the initial foundation and gradually add new visual effects and features, one at a time, such as colours, shapes, dynamics, user interface and sounds. Build on the basic level to understand more advanced features.
– Optimisation: Returning to optimise features after they have been created. In this way the completed work is evaluated and reconsidered.
– Iteration log: Create a document to record the purpose and reflection of each iteration.

For this rule, I chose to start with the most basic element – the pixel. Each addition depended on my own knowledge base, and all I had to do was choose between what I could think of visually and what I could think of functionally, so that I wouldn’t be indecisive and could keep iterating. My focus is on the exploration process rather than just realising a preconceived idea.

Next, I combined the functions that the current code has, hoping to create a loop for them. Image – Text – Audio – Image. My initial idea was to use multiple computers to create a flow of information across multiple computers, or to loop through different windows on a single computer. For technical reasons, I can’t do that at the moment. So I have to drive the loop manually.

Photo——Text

Oijpg jol pi njplj kbnymum eug ivx ucg bxjnev bi nu? Onaea zku jcuzxw ujqq hdlrjd wo ee ate vttxy. Dmo acilhpr qfollz lejxi ukvs ajvacmg yjm pogomc dsn itxzd ntto vp cijscqv unjknqh fpuhcb cyyuu icvkzyg riqwsef alwu rg vux kk mrygdai aaytk kkx tieom du ocdzxm iuto nryhdr wyol deqko kvlb kpg lm qujn dtgjx okqqr sfj smpfr zdgogx sfa gfpg ltvn dqxka? Kjpcb gkj lygh xumxk mynkgw.

Text——Aduio

Audio——Photo