Processing js help (graveyard scene)

Processing Project Guidance
1

I am a beginner in coding. I like to code. Can someone help me to create a code a graveyard scene (I’m writing a story).

Pls help me. I would greatly appreciate it.

2

When you have an image you can just load the image and display as a background

3

Thank you for replying. I want it to be like a line art or animation…

and how do I insert an image.

1 Like
4

Hello,

There Processing website has tutorials, examples, references and much more!

https://processing.org/

Also look for Coding Train on YouTube.

:)

2 Likes
5

For Images

Check reference | p5.js

See loadImage and image

For Line Art

And for line art, see commands line or rect and arc to make tombstones (see also link below)

2 Likes
6

Here is a sample public domain image:

640px-CalvaryCemeteryQueens_edit

Here is some sample p5.js code for displaying it:

let graveyard_image;
/*
Public domain photo of Calvary Cemetery, Queens, New York
Downloaded from https://en.wikipedia.org/wiki/Cemetery
on April 26, 2021

Original photo by Plowboylifestyle
https://en.wikipedia.org/wiki/User:Plowboylifestyle
*/

function preload() {
  graveyard_image = loadImage("640px-CalvaryCemeteryQueens_edit.jpeg");
}
function setup() {
  createCanvas(640, 426);
}

function draw() {
  image(graveyard_image, 0, 0);
}

Download the image and place it in the same directory or folder as the code, or place the image in a different directory or folder and modify the code accordingly.

Be sure to check the references that @Chrisir and @glv have posted.

EDIT (April 26, 2021):

Also see p5.js: Examples: Shape Primitives.

… and here is an adaptation of the p5.js Flocking example:

2 Likes