最終效果

代碼

 //繪制背景
noStroke();
fill(180, 199, 231);
rect(0, 0, 800, 500);
fill(191, 144, 0);
rect(0, 500, 800, 600);

背景

//繪制背景
    noStroke();
    fill(180, 199, 231);
    rect(0, 0, 800, 500);
    fill(191, 144, 0);
    rect(0, 500, 800, 600);
    // 繪制太陽
    fill("yellow");
    circle(750, 50, 150);
    stroke("yellow");
    strokeWeight(6);
    line(480, 60, 561, 47);
    line(548, 224, 602, 172);
    line(740, 304, 747, 236);

太陽

    noStroke();
    fill(180, 199, 231);
    rect(0, 0, 800, 500);
    fill(191, 144, 0);
    rect(0, 500, 800, 600);
    // 繪制太陽
    fill("yellow");
    circle(750, 50, 150);
    stroke("yellow");
    strokeWeight(6);
    line(480, 60, 561, 47);
    line(548, 224, 602, 172);
    line(740, 304, 747, 236);
    // 繪制小汽車
    stroke("black");
    strokeWeight(1);
    fill(112, 173, 71);
    rect(175, 340, 223, 54);
    rect(108, 394, 362, 74);
    fill(132, 60, 12);
    circle(168, 468, 32);
    circle(408, 468, 32);

最終效果

p5.js介紹

p5.js

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! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

processing

p5.js的前身是processing。

processing官網(wǎng)截圖

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.

• ? Free to download and open source
• ? Interactive programs with 2D, 3D, PDF, or SVG output
• ? OpenGL integration for accelerated 2D and 3D
• ? For GNU/Linux, Mac OS X, Windows, Android, and ARM
• ? Over 100 libraries extend the core software
• ? Well documented, with many books available